Cómo bloquear dinámicamente tipos de anuncios para zonas In-stream (video) de ExoClick

En este tutorial, demostraremos cómo bloquear dinámicamente bloquear Video (In-Stream) campañas publicitarias según el tipo de anuncio.

Este enfoque puede implementarse en diversos escenarios, pero una aplicación común es usar esta técnica cuando tú, como editor, quieres mostrar ciertos tipos de anuncios a los usuarios que dan su consentimiento, mientras bloqueas campañas específicas para aquellos que no aceptan los términos y condiciones de tu sitio web.

Para ilustrar esta idea, hemos creado dos fragmentos de código usando JavaScript puro. En el primero, demostramos cómo bloquear anuncios de video basándonos en parámetros de URL. El segundo ejemplo simula un caso en el que el consentimiento del usuario se almacena en el almacenamiento local del navegador. En ambos casos, estamos aprovechando la función de Exoclick block-ad-types funcionalidad.

Para mostrar anuncios In-Stream, estamos usando Fluid Player, un reproductor HTML5 gratuito y de código abierto compatible con los formatos VAST y VPAID.

Ten en cuenta que, si tienes una configuración diferente, tendrás que adaptar este código para ajustarlo a los requisitos de tu reproductor. Sin embargo, la lógica principal de la block-ad-types funcionalidad sigue siendo la misma.

EJEMPLO 1 - Bloquear tipos de anuncios In-Stream según el parámetro de URL

Esta es una lógica bastante sencilla que no difiere mucho de una integración básica de Fluid Player, en la que primero se carga un reproductor de video estándar y luego se le adjunta Fluid Player.

La principal diferencia aquí es que, antes de adjuntar Fluid Player al reproductor de video estándar, realizamos una comprobación del parámetro de URL, donde recuperamos el valor de user_verified.

Con eso definido, tenemos una sentencia if que establece la dynamicVastTag variable para bloquear anuncios NSFW para usuarios no verificados o permitir todos los anuncios para usuarios verificados.

Una vez establecida esta variable, procedemos a cargar el objeto de configuración de Fluid Player, asegurándonos de incluir la dynamicVastTag variable como valor de la vastTag propiedad.

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

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

    <!-- Inicializar una instancia de Fluid Player -->
    <script>
      console.log("inicializando fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>block-ad-types para anuncios In Stream (video) usando parámetros de URL</h1>

    <!-- Reproductor <video> normal -->
    <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"
        />
        Tu navegador no admite la etiqueta de video.
      </video>
    </div>

    <!-- Script que establece la configuración de Fluid Player -->
    <script>
      
      // Función para obtener el valor user_verified del parámetro de URL
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // Definir los tipos de anuncios bloqueados según los parámetros de URL
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // bloquear anuncios NSFW
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // si el usuario está verificado, mostrar todos los anuncios
      }

      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>

EJEMPLO 2 - Bloquear tipos de anuncios In Stream según datos del almacenamiento local

Esta implementación se diferencia de la anterior por usar el almacenamiento local para gestionar el consentimiento del usuario en lugar de parámetros de URL. El código es modular, con funciones separadas para crear el reproductor de video y la configuración de Fluid Player.

El <head> la sección del HTML contiene tres funciones principales que controlan la entrega de anuncios según el consentimiento del usuario:

insertVideoPlayer crea un elemento de reproductor de video y lo añade a la página web.
fluidPlayerConfig genera un objeto de configuración para Fluid Player. La lógica clave de esta función está en cómo elige la URL del anuncio: si el usuario no ha aceptado los términos (false), añade &block_ad_types=101 a la URL para bloquear ciertos anuncios. Si el usuario ha aceptado (true), usa la URL estándar, permitiendo todos los anuncios.
insertFluidPlayer lo une todo. Primero crea el reproductor de video usando insertVideoPlayer y luego le adjunta Fluid Player, usando la configuración específica de playerConfig, adaptada al consentimiento del usuario.

En la <body>, el script final comprueba el consentimiento del usuario en el almacenamiento local al cargar la página y renderiza los reproductores en consecuencia. Si no se dio consentimiento pero el usuario acepta más tarde los términos haciendo clic en el botón, el reproductor se reinicializa con los permisos actualizados.

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

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

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

    <script>
      // Crea dinámicamente un elemento <video> y lo coloca dentro del div con el parámetro ID dado
      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("Tu navegador no admite la etiqueta de video.");

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

    <script>
      // Define la configuración de Fluid Player, incluyendo las etiquetas VAST dinámicas que determinan qué anuncios bloquear o mostrar según el consentimiento del usuario
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // Consentimiento del usuario
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // Mostrar todos los anuncios
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // Bloquear anuncios NSFW
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- Este es el script que enlaza la lógica del reproductor de video y Fluid Player y muestra el contenido en la interfaz -->
    <script>
      let player;

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

  <body>
    <h1>block-ad-types para anuncios In Stream (video) usando almacenamiento local</h1>

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

    <!-- Contenedor al que se adjuntará el reproductor de video -->
    <!-- Debe definirse antes de la inicialización de Fluid Player -->
    <div id="video-wrapper"></div>

    <!-- Este script comprueba el consentimiento del usuario en el almacenamiento local e inicializa el reproductor en consecuencia -->
    <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>

AnteriorCómo bloquear dinámicamente tipos de anuncios usando data-block-ad-types

¿Te fue útil?