Comment intégrer ExoClick à AgeGO

Ce guide vise à expliquer :

• Comment soumettre un site à AgeGO.
• Comment transmettre les paramètres de vérification de l'âge à ExoClick et bloquer les publicités sur les zones publicitaires.
• Comment intégrer les zones publicitaires d'AgeGO et d'ExoClick afin de montrer des publicités SFW aux utilisateurs avant qu'ils ne vérifient leur âge.

Comment soumettre un site à AgeGO

Pour soumettre un site à AgeGO, connectez-vous au tableau de bord AgeGO. Ensuite, allez dans "Mes sites" et cliquez sur "Nouveau site" :

A partir de ces paramètres, vous devez au moins ajouter le Nom et le Domaine de premier niveau. Une fois ces paramètres complétés, cliquez sur "Créer". Le site sera ajouté à votre compte.

Par défaut, tous les sites ont le statut "Prêt" lorsqu'ils sont créés. Cependant, cela ne signifie pas encore que votre site peut utiliser AgeGO. Afin d'activer AgeGO sur votre site, vous devez contacter AgeGO via leur formulaire de contact et fournir l'ID du site correspondant à votre site

Vous trouverez l'identifiant du site à côté du nom de votre site :

Une fois votre site approuvé, son statut passera à "Running" et vous pourrez suivre les instructions d'intégration pour intégrer AgeGO sur votre site. Cette solution offre actuellement deux méthodes, Modal (simple ou avancé) et S2S, et les instructions d'installation pour chaque méthode sont disponibles dans le tableau de bord AgeGO. Pour les besoins de ce guide, nous parlerons de la méthode Modal.

Comment passer le statut de vérification de l'âge et diffuser des publicités SFW

Si vous utilisez un système de vérification de l'âge (AgeGO ou un autre fournisseur), vous pouvez continuer à afficher des publicités à tous les utilisateurs (ceux qui n'ont pas vérifié leur âge et ceux qui l'ont vérifié).

Afin d'identifier un utilisateur comme ayant (ou n'ayant pas) passé la vérification de l'âge, utilisez le paramètre data-ex_av sur vos zones publicitaires. Ce paramètre peut prendre 3 valeurs :

• "0" : Pas de vérification de l'âge (non défini)
• "1" : Vérification de l'âge - Vérifié
• "2" : Vérification de l'âge - Non vérifié

Ensuite, afin de bloquer les publicités à certains utilisateurs (dans ce contexte, ceux qui n'ont pas vérifié leur âge), utilisez le paramètre data-block-ad-types. Ce paramètre peut prendre plusieurs valeurs, mais pour ce guide, nous n'utiliserons que la valeur 101.

Par conséquent, si vous voulez diffuser une publicité qui est SFW et que vous voulez identifier cet utilisateur comme quelqu'un qui n'a pas encore vérifié son âge, vous intégrerez les paramètres comme suit :

• Formats publicitaires asynchrones (bannières, FPI, multiformats, 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 (lien) : https://s.pemsrv.com/v1/link.php?cat=&idzone=XXXXX&type=8&ex_av=2&block_ad_types=101
• Lien direct : https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=2&blocked_ad_types=101

Note : Vous devez utiliser à la fois data-ex_av et data-block-ad-types lorsque vous diffusez des publicités SFW, sinon l'utilisateur ne sera pas correctement identifié et les publicités ne seront pas bloquées.

Et si vous voulez diffuser toutes sortes de publicités à un utilisateur vérifié, vous les diffuserez de la manière suivante :

• Asynchronisation des formats publicitaires (bannière, FPI, multiformat, 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 (lien) : https://s.pemsrv.com/v1/link.php?cat=&idzone=XXXXXXX&type=8&ex_av=1
• Lien direct : https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=

Comment créer une expérience SFW

Le tutoriel suivant explique comment créer une "expérience SFW", c'est-à-dire comment s'assurer que seules les publicités SFW sont diffusées lorsque l'utilisateur n'a pas encore vérifié son âge. Notez que cette méthode n'est qu'une recommandation et que vous pouvez modifier la configuration si vous avez besoin de suivre un flux d'utilisateurs différent.

Pour cette configuration, nous devons créer un fichier de script séparé. Dans cet exemple, nous l'avons appelé 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);
}

Ce fichier contient trois fonctions : une fonction pour détecter les cookies, une fonction pour charger la couche AgeGO et une fonction pour détecter les clics sur des classes spécifiques. Dans ce cas, nous utilisons les classes .main et .footer.

Ensuite, sur le code HTML de votre site, vous placerez ce qui suit :

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

Dans cet exemple, les annonces sont SFW par défaut jusqu'à ce que l'utilisateur vérifie son âge. Lorsque l'utilisateur clique sur les classes sélectionnées que nous avons mentionnées précédemment, la superposition AgeGO apparaît. Une fois que l'utilisateur a vérifié son âge, la page se charge normalement et, cette fois, aucune publicité n'est bloquée.

---

Quelques remarques concernant ce tutoriel :

1. Cette configuration repose sur le cookie agego_aver défini par AgeGO. Cependant, cela peut être modifié : vous pouvez définir une valeur dans localStorage en utilisant les événements du script AgeGO et décider ensuite des publicités à afficher en fonction de cette valeur.
2. Les deux méthodes se concentrent uniquement sur la diffusion de publicités. Les vignettes vidéo et le reste du contenu du site ne sont pas pris en compte dans ce code.
3. Actuellement, AgeGO ne dispose pas d'un système intégré de détection des pays. Vous devez décider quand vous voulez afficher ce code.

---

Si vous souhaitez configurer les types data-ex_av et data-block-ad-types en fonction de différents événements de votre choix, vous pouvez consulter nos autres tutoriels : bloquer dynamiquement les types de publicités, bloquer dynamiquement les types de publicités dans les zones publicitaires in-stream.

Enfin, pour une intégration plus générique d'une zone publicitaire avec une solution de vérification de l'âge, veuillez consulter cet autre tutoriel