Comment bloquer dynamiquement les types de publicités pour les zones In-Stream (vidéo) d’ExoClick

Dans ce tutoriel, nous allons démontrer comment bloquer Vidéo (In-Stream) des campagnes publicitaires en fonction du type d'annonce.

Cette approche peut être mise en œuvre dans divers scénarios, mais une application courante consiste à utiliser cette technique lorsque vous, en tant qu'éditeur, souhaitez afficher certains types d'annonces aux utilisateurs qui donnent leur consentement, tout en bloquant des campagnes spécifiques pour ceux qui n'acceptent pas les conditions générales de votre site web.

Pour illustrer cette idée, nous avons créé deux extraits de code en JavaScript natif. Dans le premier, nous montrons comment bloquer des annonces vidéo en fonction des paramètres d'URL. Le second exemple simule un cas dans lequel le consentement de l'utilisateur est stocké dans le stockage local du navigateur. Dans les deux cas, nous tirons parti de la block-ad-types fonctionnalité.

Afin d'afficher des annonces In-Stream, nous utilisons Fluid Player, un lecteur HTML5 gratuit et open source compatible avec les formats VAST et VPAID.

Gardez à l'esprit que si votre configuration est différente, vous devrez adapter ce code pour qu'il réponde aux exigences de votre lecteur. Cependant, la logique de base de la block-ad-types fonctionnalité reste la même.

EXEMPLE 1 - Bloquer les types d'annonces In-Stream en fonction d'un paramètre d'URL

Il s'agit d'une logique assez simple qui ne diffère pas beaucoup d'une intégration Fluid Player de base, dans laquelle un lecteur vidéo standard est chargé en premier, puis Fluid Player y est attaché.

La principale différence ici est qu'avant d'attacher Fluid Player au lecteur vidéo standard, nous effectuons une vérification du paramètre d'URL, où nous récupérons la valeur de user_verified.

Une fois cela défini, nous avons une instruction if qui définit la dynamicVastTag variable afin de bloquer les annonces NSFW pour les utilisateurs non vérifiés ou d'autoriser toutes les annonces pour les utilisateurs vérifiés.

Une fois cette variable définie, nous procédons au chargement de l'objet de configuration de Fluid Player, en veillant à inclure la dynamicVastTag variable comme valeur de la vastTag propriété.

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

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

    <!-- Initialiser une instance de Fluid Player -->
    <script>
      console.log("initializing fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types pour les annonces In Stream (vidéo) à l'aide de paramètres d'URL</h1>

    <!-- Lecteur <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"
        />
        Votre navigateur ne prend pas en charge la balise vidéo.
      </video>
    </div>

    <!-- Script qui définit la configuration de Fluid Player -->
    <script>
      
      // Fonction pour récupérer la valeur de user_verified à partir du paramètre d'URL
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Définir les types d'annonces bloqués en fonction des paramètres d'URL
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // bloquer les annonces NSFW
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // si l'utilisateur est vérifié, afficher toutes les annonces
      }

      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>

EXEMPLE 2 - Bloquer les types d'annonces In Stream en fonction des données du stockage local

Cette implémentation diffère de la précédente en utilisant le stockage local pour gérer le consentement de l'utilisateur au lieu des paramètres d'URL. Le code est modulaire, avec des fonctions distinctes pour créer le lecteur vidéo et la configuration de Fluid Player.

Le <head> section du HTML contient trois fonctions principales qui contrôlent la diffusion des annonces en fonction du consentement de l'utilisateur :

• insertVideoPlayer crée un élément de lecteur vidéo et l'ajoute à la page web.
• fluidPlayerConfig génère un objet de configuration pour Fluid Player. La logique clé de cette fonction réside dans la façon dont elle choisit l'URL des annonces : si l'utilisateur n'a pas accepté les conditions (false), elle ajoute &block_ad_types=101 à l'URL pour bloquer certaines annonces. Si l'utilisateur a accepté (true), elle utilise l'URL standard, autorisant ainsi toutes les annonces.
• insertFluidPlayer rassemble tout. Elle crée d'abord le lecteur vidéo à l'aide de insertVideoPlayer, puis y attache Fluid Player, en utilisant la configuration spécifique de playerConfig adaptée au consentement de l'utilisateur.

Dans la <body>, le script final vérifie le consentement de l'utilisateur dans le stockage local au chargement de la page et affiche les lecteurs en conséquence. Si aucun consentement n'a été donné mais que l'utilisateur accepte plus tard les conditions en cliquant sur le bouton, le lecteur est réinitialisé avec les autorisations mises à jour.

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

    <title>Annonces In Stream (vidéo) | block-ad-types</title>

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

    <script>
      // Crée dynamiquement un élément <video> et le place dans la div avec le paramètre d'ID donné
      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("Votre navigateur ne prend pas en charge la balise vidéo.");

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

    <script>
      // Définit la configuration de Fluid Player, y compris les balises VAST dynamiques qui déterminent quelles annonces bloquer ou afficher en fonction du consentement de l'utilisateur
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // Consentement de l'utilisateur
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Afficher toutes les annonces
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // Bloquer les annonces NSFW
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- Voici le script qui relie la logique du lecteur vidéo et de Fluid Player et affiche le contenu dans l'interface utilisateur -->
    <script>
      let player;

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

  <body>
    <h1>block-ad-types pour les annonces In Stream (vidéo) en utilisant le stockage local</h1>

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

    <!-- Conteneur auquel rattacher le lecteur vidéo -->
    <!-- Doit être défini avant l'initialisation de Fluid Player -->
    <div id="video-wrapper"></div>

    <!-- Ce script vérifie le consentement de l'utilisateur dans le stockage local et initialise le lecteur en conséquence -->
    <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>