Traffective ads in Experience

In this article, you learn how to add 'Traffective' ads to the Purple Experience. 'Traffective' is an ad platform popular with German advertisers. To learn more, visit https://traffective.com/en/

7. Check the traffective-parameter



8. Add and fill the fields "scriptURL","clientAlias","dfpAdUrl","targeting" with the provided Data.

Important: import css files as link in custom.css @import "https://cdntrf.com/css/hz-de.css";.

9. Depending on the setup, ads might not load during development, because the site does not use the final customer domain. In cases like that, the following script can be used to test the implementation via messages in the console.

10. Click on the '+' button to add ad-slots.

11. From the HTML with all the ads, get the id of the included <div>-tags and copy them to the new ads.json item

From here:

To here:

12. Change the providerConfig to "Traffective"



13. Add the same id from the HTML DIV to "id" at the bottom:



14. Click on the three line icon on the right next to "providerConfig" and activate the checkboxes for "class" and "style"



15. Go back the HTML file with the ad tag specifications and copy the values for "style" and "class" to the corresponding ads.json fields

From here:

To here:



16. Deprecated usage of styles (better use class and add proper styling to class, display: none is already added in the code): Optionally: It is possible to add other styles here. If you do so, separate the styles by colon as shown below and make key values in double quotes.





17. After creating the item, save the ads.json and/or add more ad tags by adding more items

18. Alternatively you can download the ads.json and edit it with a different editor using copy, paste and replace. After editing it can be uploaded again

19. After the ads.json file is configured, please go to the views.json file in the same folder



20. Go to the page where you would like to place an ad tag. Ideally, youhave design files showing exactly where the ads go



A design provided by the customer or the project designer might look like this:

21. Now add traffective configs for each page where we want ads to be displayed. By clicking on the icon with the three lines to the right of "view", please activate the checkbox for "pageConfigs".



22. Using the options button with three lines again, activate the checkbox for "traffective"



23. By clicking on the three lines for "traffective" activate "dfpAdUrlSlug" and "targeting" - do not activate "clientAlias". The value for "clientAlias" is set globally in the traffective.js as mentioned above.

The dfpAdUrls should be provided by the client in the XLS mentioned above.



24. Add the "dfpAdUrlSlug" - so only the last part of the "dfpAdUrls" provided by the client. In our example, this would be "homepage"



25. Add the targeting information by adding the fields "key" and "value" or "values" from the option icon on the right. If there is more than one value, select "values" and enter multiple values separated by comma.



26. Add Key / Value pairs for the following data, as provided in the XLS from traffective or the client









27. Once the pageConfig settings are done, the ad tag itself needs to be added to the page content. In order to do this, navigate to the "content" section of the view you are editing and identify the position where the ad should be placed according to the project design.

Add a content item. Choose the type "Ad", type in "type" "ad" and choose the correct adId according to the HTML provided for the project.



28. If you would like to place a sticky ad, place the ads content item at the top of the view and go back to the ads.json and adapt the styling accordingly (shown below) or the class in the custom.css. Always save your changes (to save, click on empty spot and use Ctrl+S).

29. Also, you will have configurations for Desktop and Mobile or Tablet. In this case, you need to add additional configurations to views.json per each of your ad, so it will be visible on one ore another screens.

For Desktop:

For Mobile or Tablet, it is almost the same. With "compareValue", instead "negated" and "AND", select just "value". Use "phone" or "tablet" depending on your need. It will look like this:

30. Add all the elements according to the clients' specifications

31. And the last one add redirect for ads.txt file and don't forget to move it on top of views.json, so it won't interfere with path slugs of other pages:



32. After you are done, push the changes to Preview and extensible test the implementation