Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

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:

  • "Top Leaderboard"

    • ad-unit-name: topleaderboard

    • div-name: adngin-topleaderboard-0

  • "Sidebar_2"

    • ad-unit-name: sidebar_2

    • div-name: adngin-sidebar_2-0

  • "Sidebar"

    • ad-unit-name: sidebar

    • div-name: div-sidebar

Head Configuration

The head section modifications are the essential part of this integration. Without adding the AdEngine script and configuration to the head, the ads won't render.

To have an optimized and effective setup to bid on the site, a few code tags need to be implemented as outlined below.

AdEngine with automatic ad rendering and AdSense

This is the easiest way to integrate AdEngine. It will load the site specific AdEngine configuration and display ads automatically in the selected <div> elements. AdSense will be automatically loaded and started by AdEngine. If applicable, AdEngine will pause AdSense until user consent is available.
AdSense ad-units are declared in the body of the page as usual. There is no need for any other declaration. For more details see body configuration.

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

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

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

AdEngine with explicit ad declaration and AdSense

If there are specific pages where only a subset of the ads are shown, it is important to declare the ad tags, that are used in the current page. If ad tags are not properly declared, ad units will be auctioned, even if not used. This will lead to false ad impressions, negatively affecting page performance and user experience. AdSense will be automatically loaded and started by AdEngine. If applicable, AdEngine will pause AdSense until user consent is available. AdSense ad-units are declared in the body of the page as usual. There is no need for any other declaration. For more details see body configuration.

You can declare ad units using the snigelPubConf element.

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

<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>COPY

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

AdEngine with explicit ad declaration for GPT

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 through Snigel and a Sidebar through GPT. Create the following tags in the <head> element of the page:

<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>COPY

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

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

Cleanup the page of old tags

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 additional 15px of height for the label. To reserve the proper space please consult your account manager to get the exact ad sizes.

AdSense

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.

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

Only this declaration of code is needed:

<!-- 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>

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.

Automatic ads by AdSense

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.

<!-- 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>

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:

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

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

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.

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

Snigel is using the staging version of AdEngine to deliver previews of new features and enhancements before they are available on production. This way it is possible to test new features in a safe way.

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.

  • No labels