Cómo integrar ExoClick con AgeGO

Esta guía pretende explicar:

• Cómo enviar un sitio a AgeGO.
• Cómo pasar parámetros de verificación de edad a ExoClick y bloquear anuncios en zonas publicitarias.
• Cómo integrar las zonas publicitarias de AgeGO y ExoClick para mostrar anuncios SFW a los usuarios antes de que verifiquen su edad.

Cómo enviar un sitio a AgeGO

Para enviar un sitio a AgeGO, inicie sesión en AgeGO dashboard. A continuación, vaya a "Mis sitios" y haga clic en "Nuevo sitio":

A partir de esta configuración, debe añadir al menos el Nombre y el Dominio de nivel superior. Una vez completados estos ajustes, haga clic en "Crear". El sitio se añadirá a su cuenta.

Por defecto, todos los sitios tienen el estado "Listo" cuando se crean. Sin embargo, esto no significa que tu sitio pueda utilizar AgeGO todavía. Para habilitar AgeGO en tu sitio, necesitas contactar con AgeGO a través de su formulario de contacto y proporcionar el ID de sitio correspondiente a tu sitio.

Puede encontrar el ID del sitio junto al nombre de su sitio:

Una vez que su sitio sea aprobado, su estado cambiará a "En ejecución" y podrá seguir las instrucciones de integración para integrar AgeGO en su sitio. Esta solución ofrece actualmente dos métodos, Modal (simple o avanzado) y S2S, y las instrucciones de configuración para cada método están disponibles en el panel de control de AgeGO. Para los propósitos de esta guía, hablaremos del método Modal.

Cómo pasar la verificación de edad y publicar anuncios SFW

Si utiliza un sistema de verificación de edad (AgeGO u otro proveedor), es posible que desee seguir mostrando anuncios a todos los usuarios (los que no verificaron su edad y los que sí lo hicieron).

Para identificar a un usuario como que ha pasado (o no) la verificación de edad, utilice el parámetro data-ex_av en sus zonas de anuncios. Este parámetro permite 3 valores:

• "0": Sin verificación de edad (Indefinido)
• "1": Verificación de edad - Verificado
• "2": Verificación de edad - No verificado

Entonces, para bloquear anuncios a ciertos usuarios (en este contexto, los que no verificaron su edad), use el parámetro data-block-ad-types. Este parámetro permite múltiples valores, pero para esta guía sólo vamos a utilizar el valor 101.

Por lo tanto, si desea publicar un anuncio que es SFW y desea identificar a ese usuario como alguien que aún no ha verificado su edad, integrará los parámetros de este modo:

• *Formatos publicitarios asíncronos (banner, FPI, multiformato, 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 (enlace): https://s.pemsrv.com/v1/link.php?cat=&idzone=XXXXX&type=8&ex_av=2&block_ad_types=101
• Enlace directo: https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=2&blocked_ad_types=101

Nota: Debe utilizar tanto data-ex_av como data-block-ad-types cuando sirva anuncios SFW, de lo contrario el usuario no será identificado correctamente y los anuncios no serán bloqueados.

Y si quieres servir todo tipo de anuncios a un usuario verificado, los servirás así:

• Formatos publicitarios asíncronos (banner, FPI, multiformato, 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 (enlace): https://s.pemsrv.com/v1/link.php?cat=&idzone=XXXXXXX&type=8&ex_av=1
• Enlace directo: https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=

Cómo crear una experiencia SFW

El siguiente tutorial explica cómo crear una "experiencia SFW", es decir, cómo asegurarse de que sólo se sirven anuncios SFW cuando el usuario aún no ha verificado su edad. Ten en cuenta que este método es solo una recomendación y que puedes cambiar la configuración si necesitas seguir un flujo de usuarios diferente.

Para esta configuración, necesitaremos crear un archivo de script separado. En este ejemplo, lo hemos llamado 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);
}

Este archivo contiene tres funciones: una función para detectar cookies, una función para cargar la superposición AgeGO, y una función para detectar el clic en clases específicas. En este caso, estamos utilizando las clases .main y .footer.

A continuación, en el HTML de su sitio, colocará lo siguiente:

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

En este ejemplo, los anuncios son SFW por defecto hasta que el usuario verifique su edad. Cuando el usuario haga clic en las clases seleccionadas que hemos mencionado anteriormente, aparecerá la superposición AgeGO. Después de que el usuario verifique su edad, la página se cargará normalmente y esta vez no bloqueará ningún anuncio.

---

Algunas notas sobre este tutorial:

1. Esta configuración se basa en la cookie agego_aver establecida por AgeGO. Sin embargo, esto se puede cambiar: puede establecer un valor en localStorage utilizando los eventos del script AgeGO y luego decidir qué anuncios mostrar en función de ese valor.
2. Ambos métodos se centran únicamente en la publicación de anuncios. Las miniaturas de vídeo y otros contenidos del sitio web no se tienen en cuenta en este código.
3. Actualmente, AgeGO no tiene detección de país incorporada. Tienes que decidir cuándo quieres mostrar este código.

---

Si desea configurar data-ex_av y data-block-ad-types en función de diferentes eventos de su elección, consulte nuestros otros tutoriales: Bloquear tipos de anuncios dinámicamente, Bloquear tipos de anuncios dinámicamente en zonas de anuncios in-stream.

Por último, para una integración más genérica de la zona publicitaria con una solución de verificación de edad, consulte este otro tutorial