So integrieren Sie ExoClick mit AgeGO

Dieser Leitfaden soll Folgendes erklären:

• Wie man eine Website bei AgeGO einreicht.
• Wie man Altersverifizierungsparameter an ExoClick übergibt und Anzeigen in Anzeigenzonen blockiert.
• Wie man AgeGO und ExoClick-Anzeigenzonen zusammen integriert, um Nutzern vor der Altersverifizierung SFW-Anzeigen anzuzeigen.

Wie man eine Website bei AgeGO einreicht

Um eine Website bei AgeGO einzureichen, melden Sie sich im AgeGO-Dashboard. Gehen Sie dann zu „My Sites“ und klicken Sie auf „New Site“:

ExoClick AgeGO 1

In diesen Einstellungen müssen Sie mindestens Name und die Top-Level-Domain. Sobald Sie diese Einstellungen abgeschlossen haben, klicken Sie auf „Create“. Die Website wird Ihrem Konto hinzugefügt.

Standardmäßig haben alle Websites beim Erstellen den Status „Ready“. Das bedeutet jedoch nicht, dass Ihre Website AgeGO schon nutzen kann. Um AgeGO auf Ihrer Website zu aktivieren, müssen Sie AgeGO über das Kontaktformular kontaktieren und die zu Ihrer Website gehörende Site-ID angeben.

Sie finden die Site-ID neben dem Namen Ihrer Website:

ExoClick AgeGO 2

Sobald Ihre Website genehmigt ist, ändert sich ihr Status zu „Running“, und Sie können den Integrationsanweisungen folgen, um AgeGO auf Ihrer Website zu integrieren. Diese Lösung bietet derzeit zwei Methoden, Modal (einfach oder erweitert) und S2S, und die Einrichtungsanweisungen für jede Methode sind im AgeGO-Dashboard verfügbar. Für diesen Leitfaden behandeln wir die Modal Methode.

Wie man den Status der Altersverifizierung übergibt und SFW-Anzeigen ausliefert

Wenn Sie ein Altersverifizierungssystem (AgeGO oder einen anderen Anbieter) verwenden, möchten Sie möglicherweise weiterhin allen Nutzern Anzeigen anzeigen (denjenigen, die ihr Alter nicht verifiziert haben, und denen, die es verifiziert haben).

Um einen Nutzer als Person zu identifizieren, die die Altersverifizierung bestanden hat (oder nicht), verwenden Sie den data-ex_av Parameter in Ihren Anzeigenzonen. Dieser Parameter erlaubt 3 Werte:

• "0": Keine Altersverifizierung (nicht definiert)
• "1": Altersverifizierung - bestätigt
• "2": Altersverifizierung - nicht bestätigt

Um dann Anzeigen für bestimmte Nutzer zu blockieren (in diesem Kontext diejenigen, die ihr Alter nicht verifiziert haben), verwenden Sie den data-block-ad-types Parameter. Dieser Parameter erlaubt mehrere Werte, aber für diesen Leitfaden verwenden wir nur den Wert 101.

Wenn Sie also eine SFW-Anzeige ausliefern möchten und diesen Nutzer als jemanden identifizieren wollen, der sein Alter noch nicht verifiziert hat, integrieren Sie die Parameter so:

• Async-Anzeigenformate (Banner, FPI, Mehrfachformat usw.):

<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
• Direktlink: https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=2&blocked_ad_types=101

Hinweis: Sie müssen beide verwenden data-ex_av und data-block-ad-types beim Ausliefern von SFW-Anzeigen verwenden, andernfalls wird der Nutzer nicht korrekt identifiziert und Anzeigen werden nicht blockiert.

Und wenn Sie einem verifizierten Nutzer alle Arten von Anzeigen ausliefern möchten, tun Sie dies so:

• Async-Anzeigenformate (Banner, FPI, Mehrfachformat usw.):

<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
• Direktlink: https://s.zlinkt.com/v1/d.php?z=XXXXXXX&ex_av=

Wie man ein SFW-Erlebnis erstellt

Das folgende Tutorial erklärt, wie man eine „SFW-Experience“ erstellt, also wie man sicherstellt, dass nur SFW-Anzeigen ausgeliefert werden, wenn der Nutzer sein Alter noch nicht verifiziert hat. Beachten Sie, dass diese Methode nur eine Empfehlung ist und Sie die Einrichtung ändern können, wenn Sie einem anderen Nutzerfluss folgen müssen.

Für diese Einrichtung müssen wir eine separate Skriptdatei erstellen. In diesem Beispiel haben wir sie genannt 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, // Site-ID Ihrer Website in AgeGo
	autoBlur: true,
	verifyMode: 'inline', 
	requireAgeVerification: true, 
	allowDirectContinue: false, 
	overlay: {
		logo: 'wlogo.png', // Logo Ihrer Website
		theme: 'auto'
		},
	events: {
		onVerificationFlowEnd() {
			console.log("Verifizierung erfolgreich");
			window.location.reload();
			},
            	onVerificationFlowFailed() {
			console.log("Verifizierung fehlgeschlagen mit Fehlercode:" + error);
			},
            	onAgeVerify() {
			console.log("Altersverifizierungsprozess starten");
			},
            	onDirectContinue() {
			console.log("DirectContinue-Aktion");
			},
            	onUnderageSkip() {
			console.log("Übersprungen");
			},
            	onVerifiedBefore() {
			console.log("Bereits verifiziert");
			}
		}
	       }
	);

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

const TARGET_SELECTOR = '.main, .footer; // durch Klassen ersetzen, bei denen der Klick abgefangen wird

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

   verifier(e, container);
}

Diese Datei enthält drei Funktionen: eine Funktion zum Erkennen von Cookies, eine Funktion zum Laden des AgeGO-Overlays und eine Funktion zum Erkennen des Klicks auf bestimmte Klassen. In diesem Fall verwenden wir die Klassen .main und .footer.

Dann fügen Sie in das HTML Ihrer Website Folgendes ein:

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

<!-- Code mit benutzerdefinierten Funktionen-->
<script src="main.js"></script>

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

<!-- Anzeigenzonen. XXXX und YYYYY entsprechen der Klasse und den Zonen-IDs, die vom Admin-Panel bereitgestellt werden. -->
<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 zum Ausliefern von Anzeigen mit den richtigen Parametern-->
<script>
	const agegoValue = getCookie("agego_aver");
	if (agegoValue !== false)  {
               console.log("Nutzer verifiziert");
        	   const adInsElements = document.querySelectorAll("ins");
        	   adInsElements.forEach(ins => {
            	ins.setAttribute("data-ex_av", "1");
            	ins.setAttribute("data-block-ad-types", "0");
        		});
    	   }
             else {
                 console.log("Nutzer nicht verifiziert");
                 ['pointerdown', 'click', 'touchstart'].forEach(type => {
                 document.addEventListener(type, intercept, { capture: true });
                 });
             }
	(AdProvider = window.AdProvider || []).push({"serve": {}});
</script>

In diesem Beispiel, sind Anzeigen standardmäßig SFW, bis der Nutzer sein Alter verifiziert. Wenn der Nutzer auf die zuvor genannten ausgewählten Klassen klickt, wird das AgeGO-Overlay angezeigt. Nachdem der Nutzer sein Alter verifiziert hat, wird die Seite normal geladen, und dieses Mal werden keine Anzeigen blockiert.

---

Einige Hinweise zu diesem Tutorial:

1. Diese Einrichtung basiert auf dem agego_aver von AgeGO gesetzten Cookie. Dies kann jedoch geändert werden: Sie können mithilfe der Ereignisse des AgeGO-Skripts einen Wert in localStorage setzen und dann anhand dieses Werts entscheiden, welche Anzeigen angezeigt werden sollen.
2. Beide Methoden konzentrieren sich nur auf die Anzeigenauslieferung. Videominiaturen und andere Website-Inhalte werden in diesem Code nicht berücksichtigt.
3. Derzeit verfügt AgeGO nicht über eine integrierte Landerkennung. Sie müssen entscheiden, wann Sie diesen Code anzeigen möchten.

---

Wenn Sie das data-ex_av und data-block-ad-types basierend auf verschiedenen Ereignissen Ihrer Wahl einrichten möchten, dann sehen Sie sich unsere anderen Tutorials an: Anzeigentypen dynamisch blockieren, Anzeigentypen in In-Stream-Anzeigenzonen dynamisch blockieren.

Schließlich finden Sie für eine allgemeinere Integration von Anzeigenzonen mit einer Altersverifizierungslösung bitte dieses andere Tutorial.