Skip to main content

Integrate to traffic driving tags to ad-servers

If you want to use your ad-server to drive traffic to your advertorial content, you need to setup 3rd-party HMTL creative in your ad-server.

It is as simple as Contimo script + placement tag code.

<script async src="https://scripts.contimo.app/pub/{publisherId}/drivers.js" data-gdpr="${GDPR}" data-tc-string="${GDPR_CONSENT_1299}"></script>
<div data-contimo-placement-key="mysite/in-feed"></div>
info

Ad-servers usually wrap creatives into iframes, therefore Traffic driver will not inherit your website stylesheets. Therefore, you have to include minimal set of CSS rules to the Traffic driver template.

:::info::: Contimo works with TCF 2.2 framework with 1299 Vendor Client ID. When deploying Traffic driving tag through ad-server, make sure to pass consent string in data-gdpr and data-tc-string fields on the script tag as shown on example above. :::

Utilise your ad-server macro to build a placement key​

You can utilise Contimo's semantic keys, to map them to your websites using single creative code.

For divtance, you use Google Ad Manager and you send a website key in your GPT code. Assume you have two possible values: website-1.com and website-2.com. On each you want to have sticky-bottom traffic driving placement.

Then you:

  1. Create two placements in Contimo: website-1.com/sticky-bottom and website-2.com/sticky-bottom
  2. You creative code in GAM is:
<script async src="https://scripts.contimo.app/pub/{publisherId}/drivers.js" data-gdpr="${GDPR}" data-tc-string="${GDPR_CONSENT_1299}"></script>
<div data-contimo-placement-key="%%PATTERN:website%%/sticky-bottom"></div>

Testing​

To test your traffic driving, you can add data-contimo-dummy="true" attribute to your placement tag. Then it will return dummy traffic driver.

You can use your ad-server macro to detect preview mode to activate dummy traffic driver.

<script async src="https://scripts.contimo.app/pub/{publisherId}/drivers.js" data-gdpr="${GDPR}" data-tc-string="${GDPR_CONSENT_1299}"></script>
<div data-contimo-placement-key="%%PATTERN:website%%/sticky-bottom" data-contimo-dummy="%%PREVIEW_MODE%%"></div>

So, you can use your ad-servers preview function to preview how dummy traffic driver will look on your website.

Display placement only after traffic driver was rendered​

If you work with anchor traffic driver powered by GAM, you may want to show it only when and if traffic driver is rendered.

Contimo script emits a message with data contimo:trafficDriverRendered.

window.addEventListener("message", function(event) {
  if (event.data === "contimo:trafficDriverRendered") {
    document.getElementById('anchor_container').classList.add('show');
  }
});