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 7 Current »

Overview

This integration guide applies if all ads are delivered by Snigel on a site with a simple page layout.

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

  • "Top Leaderboard"

    • ad-unit-name: topleaderboard

    • div-name: adngin-topleaderboard-0

  • "Sidebar"

    • ad-unit-name: sidebar

    • div-name: adngin-sidebar-0

Head Configuration

The head section modifications are the essential part of the 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

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.

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>

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

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 on 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.
You can declare ad units using the snigelPubConf element.

Please remember:

  • ad-unit-name: topleaderboard

  • div-name: adngin-topleaderboard-0

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

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

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

Cleanup the page of old tags

If the page used other ad-stacks like AdSense or GPT it is important to remove these tags from the page.

Please follow the Page Cleanup and Compatibility Guide.

Body configuration

The page body needs to define <div> elements that 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.

Your account manager will provide you with all tags, like this example:

<div id="adngin-topleaderboard-0"></div>
<div id="adngin-sidebar-0"></div>

Note:

  • If there are existing <div>elements that should be reused, provide the information to your account manager.

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