Wie man Anzeigentypen für ExoClick In-Stream-(Video)-Zonen dynamisch blockiert

In diesem Tutorial zeigen wir, wie man dynamisch blockieren Video (In-Stream) Werbekampagnen basierend auf dem Anzeigentyp.

Dieser Ansatz kann in verschiedenen Szenarien umgesetzt werden, aber eine häufige Anwendung ist es, diese Technik zu verwenden, wenn Sie als Publisher bestimmte Arten von Anzeigen Nutzern anzeigen möchten, die zustimmen, während Sie bestimmte Kampagnen für diejenigen blockieren, die die Allgemeinen Geschäftsbedingungen Ihrer Website nicht akzeptieren.

Um diese Idee zu veranschaulichen, haben wir zwei Code-Snippets mit Vanilla JS erstellt. Im ersten zeigen wir, wie man Videoanzeigen basierend auf URL-Parametern blockiert. Das zweite Beispiel simuliert einen Fall, in dem die Einwilligung des Nutzers im lokalen Speicher des Browsers gespeichert ist. In beiden Fällen nutzen wir Exoclicks block-ad-types Funktion.

Um In-Stream-Anzeigen anzuzeigen, verwenden wir Fluid Player, einen kostenlosen, quelloffenen HTML5-Player, der mit den VAST- und VPAID-Formaten kompatibel ist.

Beachten Sie, dass Sie diesen Code an Ihre Player-Anforderungen anpassen müssen, wenn Sie ein anderes Setup haben. Die Kernlogik für die block-ad-types Funktion bleibt jedoch gleich.

BEISPIEL 1 - In-Stream-Anzeigentypen basierend auf URL-Parameter blockieren

Die Logik ist hier recht unkompliziert und unterscheidet sich kaum von einer grundlegenden Fluid-Player-Integration, bei der zuerst ein standardmäßiger Videoplayer geladen und dann Fluid Player daran angehängt wird.

Der Hauptunterschied besteht hier darin, dass wir, bevor wir Fluid Player an den Standard-Videoplayer anhängen, eine Prüfung des URL-Parameters durchführen, bei der wir den Wert für user_verified.

Nachdem das definiert ist, haben wir eine if-Anweisung, die die dynamicVastTag Variable so setzt, dass sie entweder NSFW-Anzeigen für nicht verifizierte Nutzer blockiert oder alle Anzeigen für verifizierte Nutzer zulässt.

Sobald diese Variable gesetzt ist, laden wir das Fluid-Player-Konfigurationsobjekt und stellen sicher, dass wir die dynamicVastTag Variable vastTag Eigenschaft.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>In-Stream-(Video-)Anzeigen | block-ad-types</title>

    <!-- Fluid Player importieren -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <!-- Eine Instanz von Fluid Player initialisieren -->
    <script>
      console.log("initializing fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types für In-Stream-(Video-)Anzeigen mithilfe von URL-Parametern</h1>

    <!-- Normaler <video>-Player -->
    <div class="video-wrapper">
      <video
        id="example-player"
        muted
        style="width: 50vw; height: 500px; margin: 0 auto; padding: 0"
      >
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
        Ihr Browser unterstützt das Video-Tag nicht.
      </video>
    </div>

    <!-- Skript, das die Fluid-Player-Konfiguration setzt -->
    <script>
      
      // Funktion zum Abrufen des Werts user_verified aus dem URL-Parameter
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Blockierte Anzeigentypen basierend auf URL-Parametern definieren
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // NSFW-Anzeigen blockieren
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // wenn der Nutzer verifiziert ist, alle Anzeigen anzeigen
      }

      var player = fluidPlayer("example-player", {
        layoutControls: {
          primaryColor: "#FF0000",
          timelinePreview: {
            file: "thumbnails.vtt",
            type: "VTT",
          },
          controlForwardBackward: {
            show: true,
            doubleTapMobile: false,
          },
        },
        vastOptions: {
          adList: [
            {
              roll: "preRoll",
              vastTag: dynamicVastTag,
              timer: 5,
            },
          ],
        },
      });
    </script>
  </body>
</html>

BEISPIEL 2 - In-Stream-Anzeigentypen basierend auf lokalen Speicherdaten blockieren

Diese Implementierung unterscheidet sich von der vorherigen dadurch, dass lokaler Speicher verwendet wird, um die Einwilligung des Nutzers anstelle von URL-Parametern zu verwalten. Der Code ist modular aufgebaut, mit separaten Funktionen zum Erstellen des Videoplayers und der Fluid-Player-Konfiguration.

Das <head> Der HTML-Abschnitt enthält drei Hauptfunktionen, die die Auslieferung von Anzeigen auf Grundlage der Nutzereinwilligung steuern:

insertVideoPlayer erstellt ein Video-Player-Element und fügt es der Webseite hinzu.
fluidPlayerConfig generiert ein Konfigurationsobjekt für Fluid Player. Die Kernlogik dieser Funktion liegt darin, wie sie die Anzeigen-URL auswählt: Wenn der Nutzer die Bedingungen nicht akzeptiert hat (false), fügt sie &block_ad_types=101 zur URL hinzu, um bestimmte Anzeigen zu blockieren. Wenn der Nutzer akzeptiert hat (true), verwendet sie die Standard-URL und lässt alle Anzeigen zu.
insertFluidPlayer verknüpft alles miteinander. Zuerst erstellt es den Video-Player mit insertVideoPlayer und hängt dann Fluid Player daran an, wobei die spezifische Konfiguration aus playerConfig verwendet wird, die auf die Einwilligung des Nutzers zugeschnitten ist.

Im <body>, prüft das finale Skript beim Laden der Seite den lokalen Speicher auf die Einwilligung des Nutzers und rendert die Player entsprechend. Wenn keine Einwilligung erteilt wurde, der Nutzer die Bedingungen jedoch später durch Klicken auf die Schaltfläche akzeptiert, wird der Player mit den aktualisierten Berechtigungen erneut initialisiert.

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

    <title>In-Stream-(Video-)Anzeigen | block-ad-types</title>

    <!-- Fluid Player importieren  -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <script>
      // Erstellt dynamisch ein <video>-Element und platziert es im div mit dem angegebenen ID-Parameter
      const insertVideoPlayer = (containerId) => {
        const videoPlayerContainer = document.getElementById(containerId);
        videoPlayerContainer.innerHTML = "";
        let video = document.createElement("video");
        video.id = "example-player";
        video.style.width = "700px";
        video.style.height = "500px";
        video.controls = true;

        let source = document.createElement("source");
        source.src =
          "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
        source.type = "video/mp4";

        video.appendChild(source);
        video.append("Ihr Browser unterstützt das Video-Tag nicht.");

        videoPlayerContainer.appendChild(video);
      };
    </script>

    <script>
      // Definiert die Fluid-Player-Konfiguration, einschließlich der dynamischen VAST-Tags, die bestimmen, welche Anzeigen basierend auf der Einwilligung des Nutzers blockiert oder angezeigt werden
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // Nutzereinwilligung
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Alle Anzeigen anzeigen
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // NSFW-Anzeigen blockieren
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- Dies ist das Skript, das die Logik des Videoplayers und des Fluid Players verknüpft und den Inhalt in der Benutzeroberfläche rendert -->
    <script>
      let player;

      const insertFluidPlayer = (acceptTerms) => {
        insertVideoPlayer("video-wrapper");
        player = fluidPlayer("example-player", fluidPlayerConfig(acceptTerms));
      };
    </script>
  </head>

  <body>
    <h1>block-ad-types für In-Stream-(Video-)Anzeigen mithilfe von lokalem Speicher</h1>

    <button
      id="accept-terms-button"
      onclick="
      localStorage.setItem('userConsent', JSON.stringify(true));
      insertFluidPlayer(true);
      this.remove();
      "
    >
      Bedingungen akzeptieren
    </button>

    <!-- Container für den Video-Player, an den angehängt werden soll -->
    <!-- Muss vor der Fluid-Player-Initialisierung definiert werden -->
    <div id="video-wrapper"></div>

    <!-- Dieses Skript prüft die Nutzereinwilligung im lokalen Speicher und initialisiert den Player entsprechend -->
    <script>
      const userConsentCookie = localStorage.getItem("userConsent");
      const parsedCookie = JSON.parse(userConsentCookie);

      if (parsedCookie === true) {
        insertFluidPlayer(true);
        const consentButton = document.getElementById("accept-terms-button");
        if (consentButton) {
          consentButton.remove();
        }
      } else {
        insertFluidPlayer(false);
      }
    </script>
  </body>
</html>

VorherigeWie man Anzeigentypen dynamisch mit data-block-ad-types blockiert

War das hilfreich?