Zum Hauptinhalt springen

How To Integrate ExoClick with AgeGO

This guide aims to explain:

  • How to submit a site to AgeGO.
  • How to pass age verification parameters to ExoClick and block ads on ad zones.
  • How to integrate AgeGO and ExoClick ad zones together so as to show SFW ads to users before they verify their age.

How to submit a site to AgeGO

In order to submit a site to AgeGO, login to the AgeGO dashboard. Then, go to “My Sites” and click “New Site”:

ExoClick AgeGO 1

From these settings, you need to at least add the Name and the Top Level Domain. Once you complete these settings, click “Create”. The site will be added to your account.

By default, all sites have the “Ready” status when created. However, this doesn’t mean your site can use AgeGO yet. In order to enable AgeGO in your site, you need to contact AgeGO through their contact form and provide the Site ID corresponding to your site.

You can find the Site ID next to your site’s name:

ExoClick AgeGO 2

Once your site is approved, its status will change to “Running” and you will be able to follow the integration instructions to integrate AgeGO on your site. This solution currently offers two methods, Modal (simple or advanced) and S2S, and the set up instructions for each method are available in the AgeGO dashboard. For the purposes of this guide, we will talk about the Modal method.

How to pass age verification parameters to ExoClick and block ads

When using an age verification system (AgeGO or another provider), you might want to keep displaying ads to any users (the ones who didn’t verify their age and the ones who did).

In order to identify a user as having (or not having) passed age verification, use the data-ex_av parameter on your ad zones. This parameter allows 3 values:

  • "0": No Age Verification (Undefined)
  • "1": Age Verification - Verified
  • "2": Age Verification - Not Verified

Then, in order to block ads to certain users (in this context, the ones who didn’t verify their age), use the data-block-ad-types parameter. This parameter allows multiple values, but for this guide we are only going to use value 101.

Therefore, if you want to serve an ad that is SFW and you want to identify that user as someone who hasn’t verified their age yet, you will integrate the parameters like this:

  • Async ad formats (banner, FPI, multi-format, etc.):
<script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script> 
<ins class="eas6a97888e2" data-zoneid="XXXXXXXX" data-ex_av="2" data-block-ad-types="101"></ins>
<script>(AdProvider = window.AdProvider || []).push({"serve": {}});</script>
  • In-Stream: https://s.magsrv.com/v1/vast.php?idzone=XXXXXX&ex_av=2&block_ad_types=101
  • Popunder (link): https://s.pemsrv.com/v1/link.php?cat=&idzone=XXXXX&type=8&ex_av=2&block_ad_types=101
  • Direct Link: https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=2&blocked_ad_types=101

Note: You must use both data-ex_av and data-block-ad-types when serving SFW ads, otherwise the user won’t be properly identified and ads won't be blocked.

And if you want to serve all kinds of ads to a verified user, you will serve them like this:

  • Async ad formats (banner, FPI, multi-format, etc.):
<script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script> 
<ins class="eas6a97888e2" data-zoneid="XXXXXXX" data-ex_av="1"></ins>
<script>(AdProvider = window.AdProvider || []).push({"serve": {}});</script>
  • In-Stream: https://s.magsrv.com/v1/vast.php?idzone=XXXXXXXX&ex_av=1
  • Popunder (link): https://s.pemsrv.com/v1/link.php?cat=&idzone=XXXXXXX&type=8&ex_av=1
  • Direct Link: https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=

How to integrate AgeGO with ExoClick ads to serve SFW ads when the user hasn’t verified their age yet

The following tutorial explains how to create a “SFW-experience”, that is, how to ensure only SFW ads are served when the user hasn’t verified their age yet. Note that this method is just a recommendation and you can change the set up if you need to follow a different user flow.

For this set up, we will need to create a separate script file. In this example, we have called it main.js:

function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}

function verifier(event, container) {
window.AGEGO = window.AGEGO || function () {
(AGEGO.e = AGEGO.e || []).push(arguments)
};
AGEGO('configure', {
siteId: XXXXXXX, // Site ID of your site in AgeGo
autoBlur: true,
verifyMode: 'inline',
requireAgeVerification: true,
allowDirectContinue: false,
overlay: {
logo: 'wlogo.png', // Logo of your site
theme: 'auto'
},
events: {
onVerificationFlowEnd() {
console.log("Verification successfull");
window.location.reload();
},
onVerificationFlowFailed() {
console.log("Verification failed with errorcode:" + error);
},
onAgeVerify() {
console.log("Begin Age Verification process");
},
onDirectContinue() {
console.log("DirectContinue action");
},
onUnderageSkip() {
console.log("Skipped");
},
onVerifiedBefore() {
console.log("Verified Before");
}
}
}
);

var n = document.createEvent("Event");
n.initEvent("DOMContentLoaded", !0, !0),
document.dispatchEvent(n);
}

const TARGET_SELECTOR = '.main, .footer; // replace with classes where click will be intercepted

function intercept(e) {
const container = e.target.closest(TARGET_SELECTOR);
if (!container) return;

e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();

verifier(e, container);
}

This file contains three functions: a function to detect cookies, a function to load the AgeGO overlay, and a function to detect the click on specific classes. In this case, we are using classes .main and .footer.

Then, on your site’s HTML, you will place the following:

<!--Code from AgeGo-->
<script src="https://verifycdn.agego.com/v1/verify.js"></script>

<!-- Code with custom functions-->
<script src="main.js"></script>

<!-- Ad provider code-->
<script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script>

<!-- Ad zones. XXXX and YYYYY correspond to the class and zone IDs provided by the Admin Panel. -->
<div id="videontv">
<ins class="XXXXXX" data-zoneid="YYYYYY" data-block-ad-types="101" data-ex_av="2"></ins>
<ins class="XXXXXX" data-zoneid="YYYYYY" data-block-ad-types="101" data-ex_av="2"></ins>
</div>

<!-- Code to serve ads with the right params-->
<script>
const agegoValue = getCookie("agego_aver");
if (agegoValue === "yes") {
console.log("user verified");
const adInsElements = document.querySelectorAll("ins");
adInsElements.forEach(ins => {
ins.setAttribute("data-ex_av", "1");
ins.setAttribute("data-block-ad-types", "0");
});
}
else {
console.log("user not verified");
['pointerdown', 'click', 'touchstart'].forEach(type => {
document.addEventListener(type, intercept, { capture: true });
});
}
(AdProvider = window.AdProvider || []).push({"serve": {}});
</script>

In this example, ads are SFW by default until the user verifies its age. When the user clicks on the selected classes we previously mentioned, the AgeGO overlay will appear. After the user verifies their age, the page will load normally and this time it won't block any ads.


A few notes regarding this tutorial:

  1. This setup relies on the agego_aver cookie set by AgeGO. However, this can be changed: you can set a value in localStorage using the events of the AgeGO script and then decide which ads to show based on that value.
  2. Both methods focus on ad serving only. Video thumbnails and other website content is not taken into account on this code.
  3. Currently, AgeGO doesn’t have built-in country detection. You need to decide when you want to show this code.

If you want to set up the data-ex_av and data-block-ad-types based on different events of your choice, then consider checking our other tutorials: dynamically block ad types, dynamically block ad types in in-stream ad zones.

Lastly, for a more generic ad zone integration with an age verification solution, please check this other tutorial.