Cómo integrar ExoClick con AgeGO

Esta guía tiene como objetivo explicar:

• Cómo enviar un sitio a AgeGO.
• Cómo pasar los parámetros de verificación de edad a ExoClick y bloquear anuncios en zonas de anuncios.
• Cómo integrar AgeGO y las zonas de anuncios de 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, inicia sesión en el panel de control de AgeGO. Luego, ve a “Mis sitios” y haz clic en “Nuevo sitio”:

ExoClick AgeGO 1

De estos ajustes, al menos debes añadir el Nombre y el Dominio de nivel superior. Una vez que completes estos ajustes, haz clic en “Crear”. El sitio se añadirá a tu cuenta.

De forma predeterminada, todos los sitios tienen el estado “Ready” al crearse. Sin embargo, esto no significa que tu sitio pueda usar AgeGO todavía. Para habilitar AgeGO en tu sitio, debes ponerte en contacto con AgeGO a través de su formulario de contacto y proporcionar el ID del sitio correspondiente a tu sitio.

Puedes encontrar el ID del sitio junto al nombre de tu sitio:

ExoClick AgeGO 2

Una vez que tu sitio esté aprobado, su estado cambiará a “Running” y podrás seguir las instrucciones de integración para integrar AgeGO en tu sitio. Esta solución actualmente ofrece 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 el estado de verificación de edad y mostrar anuncios SFW

Cuando utilizas un sistema de verificación de edad (AgeGO u otro proveedor), quizás quieras seguir mostrando anuncios a todos los usuarios (a los que no verificaron su edad y a los que sí).

Para identificar a un usuario como que ha pasado (o no) la verificación de edad, usa el data-ex_av parámetro en tus 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

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

Por lo tanto, si quieres mostrar un anuncio que sea SFW y quieres identificar a ese usuario como alguien que aún no ha verificado su edad, integrarás los parámetros así:

• Formatos de anuncios 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: Debes usar ambos data-ex_av y parámetro data-block-ad-types al servir anuncios SFW; de lo contrario, el usuario no se identificará correctamente y los anuncios no se bloquearán.

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

• Formatos de anuncios 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 asegurarte de que solo se muestren anuncios SFW cuando el usuario aún no haya 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 usuario 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 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 del sitio de tu sitio en AgeGO
	autoBlur: true,
	verifyMode: 'inline', 
	requireAgeVerification: true, 
	allowDirectContinue: false, 
	overlay: {
		logo: 'wlogo.png', // Logotipo de tu sitio
		theme: 'auto'
		},
	events: {
		onVerificationFlowEnd() {
			console.log("Verificación exitosa");
			window.location.reload();
			},
            	onVerificationFlowFailed() {
			console.log("La verificación falló con el código de error:" + error);
			},
            	onAgeVerify() {
			console.log("Iniciar proceso de verificación de edad");
			},
            	onDirectContinue() {
			console.log("Acción de continuación directa");
			},
            	onUnderageSkip() {
			console.log("Omitido");
			},
            	onVerifiedBefore() {
			console.log("Verificado anteriormente");
			}
		}
	       }
	);

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

const TARGET_SELECTOR = '.main, .footer; // reemplaza con las clases donde se interceptará el clic

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 de AgeGO y una función para detectar el clic en clases específicas. En este caso, estamos usando las clases .main y .footer.

Entonces, en el HTML de tu sitio, colocarás lo siguiente:

<!--Código de AgeGO-->
<script src="https://verifycdn.agego.com/v1/verify.js"></script>

<!-- Código con funciones personalizadas-->
<script src="main.js"></script>

<!-- Código del proveedor de anuncios-->
<script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script>

<!-- Zonas de anuncios. XXXX y YYYYY corresponden a la clase y a los ID de zona proporcionados por el panel de administración. -->
<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>

<!-- Código para mostrar anuncios con los parámetros correctos-->
<script>
	const agegoValue = getCookie("agego_aver");
	if (agegoValue !== false)  {
               console.log("usuario verificado");
        	   const adInsElements = document.querySelectorAll("ins");
        	   adInsElements.forEach(ins => {
            	ins.setAttribute("data-ex_av", "1");
            	ins.setAttribute("data-block-ad-types", "0");
        		});
    	   }
             else {
                 console.log("usuario no verificado");
                 ['pointerdown', 'click', 'touchstart'].forEach(type => {
                 document.addEventListener(type, intercept, { capture: true });
                 });
             }
	(AdProvider = window.AdProvider || []).push({"serve": {}});
</script>

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

---

Algunas notas sobre este tutorial:

1. Esta configuración depende de la agego_aver cookie establecida por AgeGO. Sin embargo, esto puede cambiarse: puedes establecer un valor en localStorage usando los eventos del script de 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 video y otro contenido del sitio web no se tienen en cuenta en este código.
3. Actualmente, AgeGO no cuenta con detección de país integrada. Debes decidir cuándo quieres mostrar este código.

---

Si quieres configurar el data-ex_av y parámetro data-block-ad-types según diferentes eventos de tu elección, entonces considera consultar nuestros otros tutoriales: bloquear dinámicamente tipos de anuncios, bloquear dinámicamente tipos de anuncios en zonas de anuncios in-stream.

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