...
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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> |
Only this declaration of code is needed:
| Code Block | ||
|---|---|---|
| ||
<!-- 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> |
...
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 | ||
|---|---|---|
| ||
<!-- 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> |
...
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> |
...
.
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.