Comment intégrer ExoClick avec 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 ensemble AgeGO et les zones publicitaires ExoClick afin d'afficher 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 « My Sites » et cliquez sur « New Site » :

ExoClick AgeGO 1

Dans ces paramètres, vous devez au minimum ajouter le Nom et le domaine de premier niveau. Une fois ces paramètres renseignés, cliquez sur « Create ». Le site sera ajouté à votre compte.

Par défaut, tous les sites ont le statut « Ready » à leur création. Cependant, cela ne signifie pas encore que votre site peut utiliser AgeGO. Pour activer AgeGO sur votre site, vous devez contacter AgeGO via leur formulaire de contact et fournir l’ID du site correspondant à votre site.

Vous pouvez trouver l’ID du site à côté du nom de votre site :

ExoClick AgeGO 2

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 propose actuellement deux méthodes, Modal (simple ou avancé) et S2S, et les instructions de configuration pour chaque méthode sont disponibles dans le tableau de bord AgeGO. Dans le cadre de ce guide, nous allons parler de la méthode Modal de méthode.

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

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

Pour identifier qu'un utilisateur a (ou n'a pas) passé la vérification de l'âge, utilisez le data-ex_av paramètre sur vos zones publicitaires. Ce paramètre autorise 3 valeurs :

• "0" : Aucune 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, pour bloquer les publicités pour certains utilisateurs (dans ce contexte, ceux qui n'ont pas vérifié leur âge), utilisez le data-block-ad-types paramètre. Ce paramètre autorise plusieurs valeurs, mais pour ce guide nous allons seulement utiliser la valeur 101.

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

• Formats publicitaires asynchrones (bannière, 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 (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

Remarque: Vous devez utiliser les deux data-ex_av et data-block-ad-types lors de la diffusion de publicités SFW, sinon l'utilisateur ne sera pas correctement identifié et les publicités ne seront pas bloquées.

Et si vous souhaitez diffuser tous les types de publicités à un utilisateur vérifié, vous les diffuserez comme ceci :

• Formats publicitaires asynchrones (bannière, 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 (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 garantir que seules des publicités SFW soient diffusées lorsque l'utilisateur n'a pas encore vérifié son âge. Notez que cette méthode est seulement une recommandation et que vous pouvez modifier la configuration si vous devez suivre un autre parcours utilisateur.

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 false;
  const token = parts.pop().split(";").shift();
  const format = token.split(".");
  if (format.length !== 3) return false;
  try {
    format.slice(0, 2).forEach(part => {
      const padded = part + "=".repeat((4 - part.length % 4) % 4);
      atob(padded.replace(/-/g, "+").replace(/_/g, "/"));
    });
    return true; 
  } catch (e) {
    return false; 
  }
}

function verifier(event, container) {
    window.AGEGO = window.AGEGO || function () {
	(AGEGO.e = AGEGO.e || []).push(arguments)
	};
     AGEGO('configure', {
	siteId: XXXXXXX, // ID du site de votre site dans AgeGo
	autoBlur: true,
	verifyMode: 'inline', 
	requireAgeVerification: true, 
	allowDirectContinue: false, 
	overlay: {
		logo: 'wlogo.png', // Logo de votre site
		theme: 'auto'
		},
	events: {
		onVerificationFlowEnd() {
			console.log("Vérification réussie");
			window.location.reload();
			},
            	onVerificationFlowFailed() {
			console.log("Échec de la vérification avec le code d'erreur :" + error);
			},
            	onAgeVerify() {
			console.log("Début du processus de vérification de l'âge");
			},
            	onDirectContinue() {
			console.log("Action DirectContinue");
			},
            	onUnderageSkip() {
			console.log("Ignoré");
			},
            	onVerifiedBefore() {
			console.log("Déjà vérifié");
			}
		}
	       }
	);

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

const TARGET_SELECTOR = '.main, .footer; // remplacez par les classes où le clic sera intercepté

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 superposition AgeGO, et une fonction pour détecter le clic sur des classes spécifiques. Dans ce cas, nous utilisons les classes .main et .footer.

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

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

<!-- Code avec fonctions personnalisées -->
<script src="main.js"></script>

<!-- Code du fournisseur de publicités -->
<script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script>

<!-- Zones publicitaires. XXXX et YYYYY correspondent à la classe et aux identifiants de zone fournis par le panneau d'administration. -->
<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 pour diffuser les publicités avec les bons paramètres -->
<script>
	const agegoValue = getCookie("agego_aver");
	if (agegoValue !== false)  {
               console.log("utilisateur vérifié");
        	   const adInsElements = document.querySelectorAll("ins");
        	   adInsElements.forEach(ins => {
            	ins.setAttribute("data-ex_av", "1");
            	ins.setAttribute("data-block-ad-types", "0");
        		});
    	   }
             else {
                 console.log("utilisateur non vérifié");
                 ['pointerdown', 'click', 'touchstart'].forEach(type => {
                 document.addEventListener(type, intercept, { capture: true });
                 });
             }
	(AdProvider = window.AdProvider || []).push({"serve": {}});
</script>

Dans cet exemple, les publicités sont SFW par défaut jusqu'à ce que l'utilisateur vérifie son âge. Lorsque l'utilisateur clique sur les classes sélectionnées mentionnées précédemment, la superposition AgeGO apparaîtra. Après que l'utilisateur a vérifié son âge, la page se chargera normalement et cette fois-ci, aucune publicité ne sera bloquée.

---

Quelques remarques concernant ce tutoriel :

1. Cette configuration repose sur le agego_aver cookie 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, puis décider quelles publicités afficher en fonction de cette valeur.
2. Les deux méthodes se concentrent uniquement sur la diffusion des publicités. Les miniatures vidéo et le reste du contenu du site Web ne sont pas pris en compte dans ce code.
3. Actuellement, AgeGO n'a pas de détection de pays intégrée. Vous devez décider quand vous souhaitez afficher ce code.

---

Si vous souhaitez configurer le data-ex_av et data-block-ad-types en fonction de différents événements de votre choix, alors pensez à 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 des zones publicitaires avec une solution de vérification de l'âge, veuillez consulter ce tutoriel.