AdEngine Basic Setup
- Nelson Pina
- Reinhard Steiner
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:
topleaderboarddiv-name:
adngin-topleaderboard-0
"Sidebar"
ad-unit-name:
sidebardiv-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:
topleaderboarddiv-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.
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.