website logo
➡️ purplepublish.com
Overview
Setup
Editorial
Experience
Growth
Developers
Navigate through spaces
⌘K
Experience Builder
Feature flags and Anchor tags
Simple static ads in Experience
Traffective ads in Experience
Basic Experience Set-up
Configure a login page in Experience Builder
App menu configuration in Dynamic resources/Experience Builder
Add an app menu entry in Experience Builder
Change text in the messages.json in Experience Builder
Configure the App Onboarding in Experience Builder
Configure the feedback email in the app with Experience Builder
Configure a coupon code page in Experience Builder
Add a translation to the app menu entries in Experience Builder
Configure a custom domain
Branding of the Experience
Change the brand logo in the HTML Experience with Experience Builder
Configure brand colours in the HTML Experience with Experience Builder
Deposit a font in the HTML Experience with Experience Builder
Configure legal information pages in Experience Builder
Docs powered by archbee 

Traffective ads in Experience

29min

Summary

In this article, you learn how to add Traffective ads in 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 intergration 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) should 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
Document image


2. Click on 'Pull from preview'

Document image


3. Click on 'default'.

Document image


4. Click on 'storefront'.

Document image


5. Click on 'assets'.

Document image


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

Document image


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

Sample code format

Document image


8. Change the variable "client alias", scriptUrl and linkUrl for the CSS according to the information provided for the integration.



Document image


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



Document image


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. This code needs to be removed before the site goes into production.



Document image


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

Document image


12. Click on the '+' button

Document image


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:

Document image


To here:



Document image


13. Change the providerConfig to "Traffective"



Document image


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



Document image


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



Document image


16. Deprecated usage of styles (better use class and add proper stylings 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:

Document image


To here:



Document image


17. Deprecated usage of styles (better use class and add proper stylings 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.



Document image


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



Document image


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



Document image


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

Document image


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



Document image


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

Document image




Document image


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.



Document image


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



Document image


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.



Document image


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



Document image

Document image






Document image

Document image




Document image


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 "conten" 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.



Document image

Document image


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 emty spot and use Ctrl+S).



Document image


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
Document image

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

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

  • Add also "tablet" value
Document image


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:

Document image


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:



Document image


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



You have successfully added a Traffective ads in the Experience HTML of your app, merged the changes and updated the dynamic resources. You can test the result in the preview and push them live if they look fine, to make them visible in your live app.



Updated 24 May 2023
Did this page help you?
Yes
No
PREVIOUS
Simple static ads in Experience
NEXT
Basic Experience Set-up
Docs powered by archbee 
Sample code format
ImprintPrivacy Policy
© Sprylab Technologies GmbH 2022