Come bloccare dinamicamente i tipi di annunci per le zone In-stream (video) di ExoClick

In questo tutorial mostreremo come bloccare dinamicamente bloccare Video (In-Stream) campagne pubblicitarie in base al tipo di annuncio.

Questo approccio può essere implementato in vari scenari, ma un’applicazione comune è usare questa tecnica quando tu, in qualità di publisher, desideri mostrare determinati tipi di annunci agli utenti che forniscono il consenso, bloccando al contempo campagne specifiche per coloro che non accettano i termini e le condizioni del tuo sito web.

Per illustrare questa idea, abbiamo ստեղծato due snippet di codice utilizzando JavaScript vanilla. Nel primo, mostriamo come bloccare gli annunci video in base ai parametri URL. Il secondo esempio simula un caso in cui il consenso dell’utente è memorizzato nell’archiviazione locale del browser. In entrambi i casi, stiamo sfruttando block-ad-types funzionalità.

Per visualizzare gli annunci In-Stream, stiamo usando Fluid Player, un player HTML5 gratuito e open source compatibile con i formati VAST e VPAID.

Tieni presente che, se hai una configurazione diversa, dovrai adattare questo codice alle esigenze del tuo player. Tuttavia, la logica di base per la block-ad-types funzionalità rimane la stessa.

ESEMPIO 1 - Bloccare i tipi di annunci In-Stream in base al parametro URL

Questa è una logica piuttosto semplice che non differisce molto da una normale integrazione di Fluid Player, in cui viene caricato prima un player video standard e poi vi viene collegato Fluid Player.

La differenza principale qui è che, prima di collegare Fluid Player al player video standard, eseguiamo un controllo del parametro URL, in cui recuperiamo il valore di user_verified.

Definito questo, abbiamo un’istruzione if che imposta la dynamicVastTag variabile in modo da bloccare gli annunci NSFW per gli utenti non verificati oppure consentire tutti gli annunci per gli utenti verificati.

Una volta impostata questa variabile, procediamo a caricare l’oggetto di configurazione di Fluid Player, assicurandoci di includere la dynamicVastTag variabile come valore della proprietà vastTag .

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

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

    <!-- Inizializza un’istanza di Fluid Player -->
    <script>
      console.log("inizializzazione fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types per annunci In Stream (video) tramite parametri URL</h1>

    <!-- Player <video> standard -->
    <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"
        />
        Il tuo browser non supporta il tag video.
      </video>
    </div>

    <!-- Script che imposta la configurazione di Fluid Player -->
    <script>
      
      // Funzione per ottenere il valore user_verified dal parametro URL
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Definisce i tipi di annunci bloccati in base ai parametri URL
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // blocca gli annunci NSFW
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // se l’utente è verificato, mostra tutti gli annunci
      }

      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>

ESEMPIO 2 - Bloccare i tipi di annunci In Stream in base ai dati dell’archiviazione locale

Questa implementazione si differenzia dalla precedente perché utilizza l’archiviazione locale per gestire il consenso dell’utente invece dei parametri URL. Il codice è modulare, con funzioni separate per creare il player video e la configurazione di Fluid Player.

Il <head> la sezione dell’HTML contiene tre funzioni principali che controllano la pubblicazione degli annunci in base al consenso dell’utente:

insertVideoPlayer crea un elemento player video e lo aggiunge alla pagina web.
fluidPlayerConfig genera un oggetto di configurazione per Fluid Player. La logica chiave di questa funzione risiede nel modo in cui sceglie l’URL dell’annuncio: se l’utente non ha accettato i termini (false), aggiunge &block_ad_types=101 all’URL per bloccare determinati annunci. Se l’utente ha accettato (true), utilizza l’URL standard, consentendo tutti gli annunci.
insertFluidPlayer mette tutto insieme. Prima crea il player video usando insertVideoPlayer e poi vi collega Fluid Player, utilizzando la configurazione specifica di playerConfig, pensata su misura per il consenso dell’utente.

Nella <body>, lo script finale controlla il consenso dell’utente nell’archiviazione locale al caricamento della pagina e renderizza i player di conseguenza. Se non è stato dato alcun consenso ma l’utente accetta successivamente i termini facendo clic sul pulsante, il player viene reinizializzato con i permessi aggiornati.

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

    <title>Annunci In Stream (video) | block-ad-types</title>

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

    <script>
      // Crea dinamicamente un elemento <video> e lo colloca all’interno del div con il parametro ID indicato
      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("Il tuo browser non supporta il tag video.");

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

    <script>
      // Definisce la configurazione di Fluid Player, inclusi i tag VAST dinamici che determinano quali annunci bloccare o mostrare in base al consenso dell’utente
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // Consenso dell’utente
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Mostra tutti gli annunci
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // Blocca gli annunci NSFW
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- Questo è lo script che collega la logica del player video e di Fluid Player e renderizza il contenuto nell’interfaccia utente -->
    <script>
      let player;

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

  <body>
    <h1>block-ad-types per annunci In Stream (video) tramite archiviazione locale</h1>

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

    <!-- Contenitore a cui collegare il player video -->
    <!-- Deve essere definito prima dell’inizializzazione di Fluid Player -->
    <div id="video-wrapper"></div>

    <!-- Questo script controlla il consenso dell’utente nell’archiviazione locale e inizializza il player di conseguenza -->
    <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>

PrecedenteCome bloccare dinamicamente i tipi di annunci usando data-block-ad-types

È stato utile?