Traffective ads in Experience

Summary

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/

Preconditions

• The following information / files need to be prepared before an integration can be started:
  • HTML file with Traffective ad DIV tags with CSS variables and script, configured for various ad types
  • XLS file containing categories and DFP ad URLs specific to each page
  • Link to the repository outlining ad placements for both mobile and desktop versions for each page type
  • Link indicating the redirection path for ads.txt.
  • List of vendors for CMP
• Check the page Simple static ads in Experience and familiarize yourself with the general concepts of ad integration in Purple Experience. If you have not done so before, it is highly recommended to integrate static ads first, and later proceed to Traffective ads
• Ads can be tested only on customer domain or its subdomains (example.de, dev.example.de etc.). For configuration of subdomains CNAME look at this doc https://docs.purplepublish.com/experience/configure-a-custom-domain
• For traffective script to load properly, CMP (Consent Manager) must be configured with a list of vendors.

How-to guide

1. Go to Experience Builder, choose your app from the list and click on it

2. Click on 'Pull from preview'

3. Click on 'default'.

4. Click on 'storefront'.

5. Click on 'assets'.

6. Go to 'scripts' and create a file called "traffective.js" - this needs to be the exact naming

7. Add the script from the customer to traffective.js. Here is a sample format how custom script should be implemented:

8. Change the variable "client alias", scriptUrl and linkUrl for the CSS according to the information provided for the integration. Important: try to import css files as link in custom.css or even prerender it through index.html for better performance.



9. If more styles or scripts are needed for the implementation, they can be added using the document.head.appendChild() function.



10. 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.

11. Go to the folder 'assets' and click on the 'ads.json' file

12. Click on the '+' button

13. 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:



13. Change the providerConfig to "Traffective"



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



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



16. Deprecated usage of styles (better use class and add proper styling to class, display: none is already added in the code): 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:



17. 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.



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

19. 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

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



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



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

22. Now we should add traffective configs per each page where we have ads. By clicking on the icon with the three lines to the right of "view", please activate the checkbox for "pageConfigs".



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



24. 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.



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



26. Add the targeting information by adding the fields "key" and "value" from the option icon on the right. If there is more than one value, select "values". If there are more than one value, please separate them by comma.



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









28. 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.



29. 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). Always save your changes (to save, click on empty spot and use Ctrl+S).

30. 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:

• Select "condition" at the top right burger menu of ad section

• Below "adId" in right burger menu select "compareValue", "negated" and "AND" options

• Add proper values like this "$context.device_type", "true", "phone"

• Add also "tablet" value

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:

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

32. 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:



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



Notes: You can check implementation of HZ or BoersenZeitung for reference.