Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Overview

This integration guide applies if some ads need to be delivered in addition to Snigel through GPT or AdSense.

For this integration guide, we assume the example of a website with the following three ads on every page:

...

Create the following tag in the <head> element of the page:

Code Block
languagenone
<script data-cfasync="false" async src="https://cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPYscript>

Note:

  • Replace **site.domain** with the actual site domain

  • Place the script at the very top of the header to ensure the best performance

  • If Google Analytics is used, place the AdEngine tag after the Google Analytics tag

...

You can declare ad units using the snigelPubConf element.

The following example assumes that a page only has the Top Leaderboard and no Sidebar_2 through AdEngine. Create the following tags in the element of the page:

Code Block
languagenone
<script data-cfasync="false" type="text/javascript">
  window.snigelPubConf = {
    "adengine": {
      "activeAdUnits": ["topleaderboard","sidebar_2"]
    }
  }
</script>
<script data-cfasync="false" async src="https://cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPYscript>

Note:

  • Replace **site.domain** with the actual site domain

  • Place the script at the very top of the header to ensure best performance

  • If Google Analytics is used, place the AdEngine tag after the Google Analytics tag

  • Keep the correct order of the tags: first configuration and then loading of AdEngine

...

If the page contains a mixed setup of Snigel and GPT ads, it is important to declare the ad tags that are used in the current page, and by which technology they are auctioned. If ad tags are not properly declared, only default ad units will be auctioned, and GPT units might be missing. This will lead to false or missing ad impressions, negatively affecting page performance and user experience.
You can declare ad units using the snigelPubConf element. GPT ad-units are defined using googletag.defineSlot.

The following example assumes that a page fills a Top Leaderboard and Sidebar_2 through Snigel and a Sidebar through GPT. Create the following tags in the <head> element of the page:

Code Block
languagenone
<script data-cfasync="false" type="text/javascript">
  // define ad-slot using googletag defineSlot
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(function() {
    googletag.defineSlot("/1234567/sidebar", [160, 600], "div-sidebar").
      addService(googletag.pubads());
  });
</script>
<script data-cfasync="false" type="text/javascript">
  window.snigelPubConf = {
    "adengine": {
      "activeAdUnits": ["topleaderboard","sidebar_2"],
      "additionalGptAdSlotIds": ["div-sidebar"]
    }
  }
</script>
<script data-cfasync="false" async src="https://cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPYscript>

Note:

  • Replace **site.domain** with the actual site domain

  • Place the script at the very top of the header to ensure the best performance

  • If Google Analytics is used, place the AdEngine tag after the Google Analytics tag

  • Keep the correct order of the tags: first configuration and then loading of AdEngine

  • Adapt the sample code to the page requirements and use proper ids, names and sizes

...

If the page is loading AdSense or GPT manually it is important to remove these tags from the page. They will be loaded automatically by AdEngine.

Please follow the Page Cleanup and Compatibility Guide.

Body configuration

The page body needs to define div elements which will be filled with ads. They need to be placed where the ad should be displayed.
The div elements should reserve the maximum width and height of the displayed ad to prevent Cumulative Layout Shift (CLS). If you are using ad labeling, reserve an additional 15px of height for the label. To reserve the proper space please consult your account manager to get the exact ad sizes.

...

AdSense ad-units need to be declared following the Google implementation guide.
Please remove this part of code from your page, as it will be delivered automatically by AdEngine.

Code Block
languagenone
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>COPYscript>

Only this declaration of code is needed:

Code Block
languagenone
<!-- AdEngine Top Leaderboard -->
<div id="adngin-topleaderboard-0"></div>

<!-- AdSense Sidebar -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>COPYscript>

Note:

  • Although AdEngine loads automatically AdSense, this step should be skipped for very specific setups, like the automatic one when there are no body tags. And you should consult your account manager to review the setup and to update the AdEngine configuration if needed.

...

When dealing with automatic AdSense, and there are no div elements being set, it's required to keep the initialization code but it needs to be paused when used in conjunction of our AdConsent. AdEngine will unpause AdSense again as soon as the consent is provided.

Code Block
languagenone
<!-- load adSense -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567891234567"></script>
<script>
  // globally pause AdSense delivery
  (adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1;
</script>COPYscript>

GPT

There is no difference between AdEngine and GPT div elements. They are declared the same way. For each div element name, provided by your account manager, create tags like in the example:

Code Block
<!-- AdEngine Top Leaderboard -->
<div id="adngin-topleaderboard-0"></div>

<!-- GPT Sidebar -->
<div id="div-sidebar"></div>COPYdiv>

Testing on a staging page

It is recommended to test an AdEngine integration on a staging page first to prevent any problems , and allow your account manager to review the integration before going live on production.

⚠️ If you apply all steps directly on the live page without a review from your account manager, Snigel can`t be held responsible for any revenue loss.

On the staging page, use the staging version of AdEngine, which is accessible on staging-cdn.snigelweb.com instead of the production version available at cdn.snigelweb.com.

Code Block
<script data-cfasync="false" async src="https://staging-cdn.snigelweb.com/adengine/**site.domain**/loader.js" type="text/javascript"></script>COPY

...

.

Consent management

If you are using AdConsent to manage user consent, there are additional elements required to be compliant with privacy laws.

Please follow the Consent Management Page Integration Guide.