Zum Hauptinhalt springen

Dynamische Blockierung von Anzeigentypen für ExoClick In-Stream (Video) Zonen

In diesem Tutorial zeigen wir Ihnen, wie Sie Video (In-Stream)-Anzeigenkampagnen basierend auf dem Anzeigentyp dynamisch blockieren können.

Dieser Ansatz kann in verschiedenen Szenarien umgesetzt werden, aber eine häufige Anwendung ist, wenn Sie als Herausgeber bestimmte Arten von Anzeigen für Nutzer anzeigen möchten, die ihre Zustimmung gegeben haben, während Sie bestimmte Kampagnen für diejenigen blockieren möchten, die die Geschäftsbedingungen Ihrer Website nicht akzeptieren.

Zur Veranschaulichung dieser Idee haben wir zwei Codeschnipsel mit Vanilla JS erstellt. Im ersten Beispiel wird gezeigt, wie man Videoanzeigen auf der Grundlage von URL-Parametern blockieren kann. Das zweite Beispiel simuliert einen Fall, in dem die Zustimmung des Nutzers im lokalen Speicher des Browsers gespeichert wird. In beiden Fällen nutzen wir die Funktion "block-ad-types" von Exoclick.

In order to display In-Stream ads, we're using Fluid Player, a free, open-source HTML5 player that is compatible with VAST and VPAID formats.

Beachten Sie, dass Sie diesen Code an die Anforderungen Ihres Players anpassen müssen, wenn Sie eine andere Konfiguration haben. Die Kernlogik für die Funktion "Block-Ad-Types" bleibt jedoch gleich.

BEISPIEL 1 - Blockieren von In-Stream-Anzeigentypen basierend auf URL-Parameter​

Dies ist eine recht einfache Logik, die sich nicht wesentlich von einer grundlegenden Fluid Player-Integration unterscheidet, bei der zunächst ein Standard-Videoplayer geladen und dann Fluid Player daran angehängt wird.

Der Hauptunterschied besteht darin, dass wir vor dem Anhängen von Fluid Player an den Standard-Videoplayer eine URL-Parameterprüfung durchführen, bei der wir den Wert für "user_verified" abrufen.

Mit dieser Definition haben wir eine if-Anweisung, die die Variable dynamicVastTag so einstellt, 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 die Variable dynamicVastTag als Wert für die Eigenschaft vastTag enthalten ist.


<!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) ads | block-ad-types</title>

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


    <!-- Initialize an instance of Fluid Player -->
    <script>
      console.log("initializing fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types for In Stream (video) ads using URL params</h1>

    <!-- Regular <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"
        />
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- Script that sets Fluid Player config -->
    <script>
      
      // Function to get user_verified value from URL parameter
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Define blocked ad types based on URL parameters
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // block NSFW ads
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // if user is verified, show all ads
      }

      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 - Blockieren von In-Stream-Anzeigentypen basierend auf lokalen Speicherdaten​

Diese Implementierung unterscheidet sich von der vorherigen durch die Verwendung eines lokalen Speichers zur Verwaltung der Benutzerzustimmung anstelle von URL-Parametern. Der Code ist modular aufgebaut, mit separaten Funktionen zum Erstellen des Videoplayers und der Fluid Player-Konfiguration.

Der Abschnitt <head> der HTML-Datei enthält drei Hauptfunktionen, die die Anzeigenschaltung auf der Grundlage der Zustimmung des Nutzers steuern:

  • insertVideoPlayer erstellt ein Videoplayerelement und fügt es der Webseite hinzu.
  • fluidPlayerConfig erzeugt ein Konfigurationsobjekt für Fluid Player. Die Hauptlogik dieser Funktion liegt in der Auswahl der Anzeigen-URL: Wenn der Benutzer die Bedingungen nicht akzeptiert hat (false), wird die URL um &block_ad_types=101 erweitert, um bestimmte Anzeigen zu blockieren. Wenn der Nutzer zugestimmt hat (true), wird die Standard-URL verwendet, die alle Anzeigen zulässt.
  • insertFluidPlayer bindet alles zusammen. Zunächst wird der Videoplayer mithilfe von insertVideoPlayer erstellt, und dann wird der Fluid Player daran angehängt, wobei die spezifische Konfiguration aus playerConfig verwendet wird, die auf die Zustimmung des Benutzers zugeschnitten ist.

In <body> prüft das endgültige Skript beim Laden der Seite den lokalen Speicher auf die Zustimmung des Benutzers und stellt die Player entsprechend dar. Wenn keine Zustimmung erteilt wurde, der Benutzer aber später die Bedingungen durch Klicken auf die Schaltfläche akzeptiert, wird der Player mit den aktualisierten Berechtigungen neu 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) ads | block-ad-types</title>

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

    <script>
      // Dynamically creates a <video> element and places it inside the div with the given 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("Your browser does not support the video tag.");

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

    <script>
      // Defines the Fluid Player configuration, including the dynamic VAST tags that determine which ads to block or show based on user consent
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // User consent
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Show all ads
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // Block NSFW ads
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- This is the script that binds the video player and Fluid Player logic and renders the content in the UI -->
    <script>
      let player;

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

  <body>
    <h1>block-ad-types for In Stream (video) ads using local storage</h1>

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

    <!-- Container for the video player to attach to -->
    <!-- Must be defined before the Fluid Player initialization -->
    <div id="video-wrapper"></div>

    <!-- This script checks for the user consent in local storage and initializes the player accordingly -->
    <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>