Cómo bloquear dinámicamente tipos de anuncios para zonas ExoClick In-stream (vídeo)
En este tutorial, demostraremos cómo bloquear dinámicamente campañas de anuncios de vídeo (In-Stream) en función del tipo de anuncio.
Este enfoque puede aplicarse en varios escenarios, pero una aplicación común es utilizar esta técnica cuando usted, como editor, desea mostrar ciertos tipos de anuncios a los usuarios que dan su consentimiento, mientras que bloquea campañas específicas para aquellos que no aceptan los términos y condiciones de su sitio web.
Para ilustrar esta idea, hemos creado dos fragmentos de código utilizando vanilla JS. En el primero, demostramos cómo bloquear anuncios de vídeo basándonos en parámetros de URL. El segundo ejemplo simula un caso en el que el consentimiento del usuario se guarda en el almacenamiento local del navegador. En ambos casos, estamos aprovechando la función block-ad-types de Exoclick.
Para mostrar anuncios In-Stream, utilizamos Fluid Player, un reproductor HTML5 gratuito y de código abierto que es compatible con los formatos VAST y VPAID.
Tenga en cuenta que si tiene una configuración diferente, tendrá que adaptar este código a los requisitos de su reproductor. Sin embargo, la lógica central de la función "bloquear tipos de anuncios" sigue siendo la misma.
EJEMPLO 1 - Bloquear tipos de anuncios In-Stream en función de un parámetro URL
Se trata de 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 vídeo estándar y luego se le adjunta Fluid Player.
La principal diferencia aquí es que, antes de adjuntar Fluid Player al reproductor de vídeo estándar, realizamos una comprobación del parámetro URL, donde recuperamos el valor de user_verified.
Una vez definido esto, tenemos una sentencia if que establece la variable dynamicVastTag para bloquear los 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 Fluid Player, asegurándonos de incluir la variable dynamicVastTag como valor de la propiedad vastTag.
<!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>
EJEMPLO 2 - Bloquear tipos de anuncios In Stream basados en datos de almacenamiento local
Esta implementación difiere de la anterior en que utiliza almacenamiento local para gestionar el consentimiento del usuario en lugar de parámetros URL. El código es modular, con funciones separadas para crear el reproductor de vídeo y la configuración de Fluid Player.
La sección <head> del HTML contiene tres funciones principales que controlan la difusión de anuncios en función del consentimiento del usuario:
insertVideoPlayercrea un elemento reproductor de vídeo y lo añade a la página web.fluidPlayerConfiggenera 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=101a la URL para bloquear ciertos anuncios. Si el usuario ha aceptado (true), utiliza la URL estándar, permitiendo todos los anuncios.- insertFluidPlayer` lo une todo. En primer lugar, crea el reproductor de vídeo mediante insertVideoPlayer y, a continuación, le adjunta Fluid Player, utilizando la configuración específica de playerConfig adaptada al consentimiento del usuario.
En el <body>, el script final comprueba el almacenamiento local para el consentimiento del usuario en la carga de la página y renderiza los reproductores en consecuencia. Si no se ha dado el consentimiento, pero el usuario acepta posteriormente las condiciones haciendo clic en el botón, el reproductor se reinicia 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>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>