Zum Hauptinhalt springen

Dynamische Blockierung von Anzeigentypen mit data-block-ad-types

Als Publisher möchten Sie vielleicht steuern, welche Anzeigentypen Ihren Besuchern angezeigt werden, basierend auf bestimmten Bedingungen wie Benutzerauthentifizierung, Benutzereinstellungen oder anderen Faktoren. In diesem Artikel zeigen wir Ihnen anhand von zwei Codeschnipseln, wie Sie dynamisch verwalten können, welche Anzeigentypen in Ihrer ExoClick-Anzeigenzone angezeigt oder blockiert werden.

Um dies zu ermöglichen, nutzen wir die Funktion data-block-ad-types von ExoClick und geben ihr die dynamische Kontrolle über mehrere Werbespots, ohne komplexe Backend-Integrationen zu benötigen.

BEISPIEL 1 - Dynamische Anzeigen auf der Grundlage von Benutzereingaben​

Diese Methode ist ideal für die Anpassung von Werbeeinschränkungen auf der Grundlage der Zustimmung des Nutzers. Wenn ein Besucher Ihren Bedingungen zustimmt, wird seine Präferenz im localStorage seines Browsers gespeichert. Durch diese Aktion werden die Anzeigeneinstellungen für diesen Benutzer bei allen nachfolgenden Besuchen dauerhaft geändert, sodass Sie eine breitere Palette von Anzeigentypen schalten können, sobald die Zustimmung erteilt wurde.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script>

      const adZoneConfigs = [
        { containerId: "zid-5662140", class: "eas6a97888e20", zoneid: "5662140" },
        { containerId: "zid-5532602", class: "eas6a97888e2", zoneid: "5532602" },
      ];

    //  CHANGE BLOCKED AD TYPES BASED ON BOOLEAN VALUE AND RE RENDER THE ADS 
      let updateAdRestrictions = (value) => {
        if (value === true) {
          adZoneConfigs.forEach((adZone) => {
            let adContainer = document.getElementById(adZone.containerId);
            adContainer.innerHTML = "";
            adContainer.innerHTML = `
            <ins class="${adZone.class}" data-zoneid="${adZone.zoneid}" data-block-ad-types=""></ins>

            `;
            (AdProvider = window.AdProvider || []).push({ serve: {} });
          });
        }
        return;
      };
    </script>

  </head>
  <body>
    <h1>TEST PAGE</h1>

    <!-- ACCEPT TEMRS AND ADD CONSENT TO LOCAL STORAGE ON CLICK -->
    <button
      id="accept-terms-button"
      onclick="updateAdRestrictions(true); localStorage.setItem('acceptTerms', true); this.remove();"
    >
      I accept the terms and conditions
    </button>

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

      <h2>zid-5662140</h2>
      <div id="zid-5662140">
        <ins
          class="eas6a97888e20"
          data-zoneid="5662140"
          data-block-ad-types="101"
        ></ins>

        <script>
          (AdProvider = window.AdProvider || []).push({ serve: {} });
        </script>
      </div>


      <h2>zid-5532602</h2>
      <div id="zid-5532602">
        <ins
          class="eas6a97888e2"
          data-zoneid="5532602"
          data-block-ad-types="101"
        ></ins>
        <script>
          (AdProvider = window.AdProvider || []).push({ serve: {} });
        </script>
      </div>
    </main>


    <!-- CHECK LOCAL STORAGE FOR VERIFIED COOKIE AND CALL updateAdRestrictions IF THE USER IS ALREADY VERIFIED -->
    <!-- MUST BE PLACED AFTER THE AD ZONES' SCRIPTS -->
    <script>
      const cookie = localStorage.getItem("acceptTerms");
      const parsedCookie = JSON.parse(cookie)
      if (parsedCookie === true) {
        updateAdRestrictions(true);
        document.getElementById("accept-terms-button").remove();
      } 
    </script>
  </body>
</html>

BEISPIEL 2 - Dynamische Anzeige von Anzeigen auf der Grundlage von URL-Parametern​

Dieser Ansatz eignet sich für die Änderung von Anzeigeneinstellungen auf der Grundlage eines URL-Parameters. Nachdem sich ein Benutzer authentifiziert hat, kann er beispielsweise zu einer URL weitergeleitet werden, die einen Parameter wie "user_verified=1" enthält. Dieser Parameter signalisiert der Seite, dass der Benutzer verifiziert ist, und veranlasst das System, weniger restriktive Anzeigentypen für diese Sitzung anzuzeigen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Page</title>
  </head>

  <body>
    <header>
      <ins
        class="eas6a97888e20"
        data-zoneid="5662140"
        data-block-ad-types="101"
      ></ins>

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

      <script>
        (AdProvider = window.AdProvider || []).push({ serve: {} });
      </script>
    </header>

    <footer id="footer-ads">
      <script
        async
        type="application/javascript"
        src="https://a.magsrv.com/ad-provider.js"
      ></script>

      <ins
        class="eas6a97888e2"
        data-zoneid="5532602"
        data-block-ad-types="101"
      ></ins>

      <script>
        (AdProvider = window.AdProvider || []).push({ serve: {} });
      </script>
    </footer>

    <script>
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );
      const headerElement = document.querySelector('[data-zoneid="5662140"]');
      const footerElement = document.querySelector('[data-zoneid="5532602"]');
      const elementsArr = [headerElement, footerElement];
      if (userVerified == 1) {
        elementsArr.forEach((element) => {
          element.setAttribute("data-block-ad-types", "");
          const newElement = element.cloneNode(true);
          element.parentNode.replaceChild(newElement, element);
        });
      }
    </script>
  </body>
</html>