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/ preconditions the following information / files need to be prepared before an integration can be started html file with traffective ad div tags, 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 https //docs purplepublish com/experience/static ads 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 docid 5qp36x0omn32fk oye2ey for traffective script to load properly, docid\ iubzrguxkik85qjapwxie must be configured with a list of vendors how to guide go to experience builder in your folder default/storefront/assets/scripts create a file called "traffective js" this needs to be the exact naming add the script code for traffective from the aforementioned html here here is a sample format how custom script should be implemented in default/storefront/assets , click on the 'ads json' file, or create one click on properties icon 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 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 this code needs to be removed before the site goes into production 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 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 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 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