Como bloquear dinamicamente tipos de anúncios para zonas ExoClick In-stream (vídeo)
Neste tutorial, demonstraremos como bloquear dinamicamente campanhas de anúncios Video (In-Stream) com base no tipo de anúncio.
Esta abordagem pode ser implementada em vários cenários, mas uma aplicação comum é utilizar esta técnica quando, enquanto editor, pretende mostrar determinados tipos de anúncios a utilizadores que dão o seu consentimento, enquanto bloqueia campanhas específicas para aqueles que não aceitam os termos e condições do seu sítio Web.
Para ilustrar esta ideia, criámos dois snippets de código utilizando vanilla JS. No primeiro, demonstramos como bloquear anúncios de vídeo com base em parâmetros de URL. O segundo exemplo simula um caso em que o consentimento do utilizador é armazenado no armazenamento local do browser. Em ambos os casos, estamos a utilizar a funcionalidade block-ad-types da 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.
Tenha em mente que se você tiver uma configuração diferente, você terá que adaptar este código para atender às necessidades do seu jogador. No entanto, a lógica central da funcionalidade
block-ad-typespermanece a mesma.
EXEMPLO 1 - Bloquear tipos de anúncios In-Stream com base no parâmetro URL
Esta é uma lógica bastante simples que não difere muito de uma integração básica do Fluid Player, na qual um reprodutor de vídeo padrão é carregado primeiro e, em seguida, o Fluid Player é anexado a ele.
A principal diferença aqui é que, antes de anexar o Fluid Player ao reprodutor de vídeo padrão, realizamos uma verificação de parâmetro de URL, onde recuperamos o valor de user_verified.
Com isso definido, temos uma instrução if que define a variável dynamicVastTag para bloquear anúncios NSFW para usuários não verificados ou permitir todos os anúncios para usuários verificados.
Uma vez que esta variável esteja definida, carregamos o objeto de configuração do Fluid Player, certificando-nos de incluir a variável dynamicVastTag como um valor para a propriedade 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>
EXEMPLO 2 - Bloquear tipos de anúncios In Stream com base em dados de armazenamento local
Esta implementação difere da anterior por utilizar o armazenamento local para gerir o consentimento do utilizador em vez dos parâmetros URL. O código é modular, com funções separadas para criar o leitor de vídeo e a configuração do Fluid Player.
A secção <head> do HTML contém três funções principais que controlam a apresentação de anúncios com base no consentimento do utilizador:
insertVideoPlayercria um elemento de leitor de vídeo e adiciona-o à página Web.fluidPlayerConfiggera um objeto de configuração para o Fluid Player. A lógica chave desta função está na forma como escolhe o URL do anúncio: se o utilizador não aceitou os termos (false), adiciona&block_ad_types=101ao URL para bloquear certos anúncios. Se o utilizador tiver aceite (true), utiliza o URL padrão, permitindo todos os anúncios.- *o
insertFluidPlayer* junta tudo. Primeiro cria o leitor de vídeo usando insertVideoPlayer e depois anexa o Fluid Player a ele, usando a configuração específica de playerConfig que é adaptada ao consentimento do utilizador.
Em <body>, o script final verifica o armazenamento local quanto ao consentimento do utilizador no carregamento da página e processa os jogadores em conformidade. Se não foi dado consentimento, mas o utilizador mais tarde aceita os termos clicando no botão, o leitor é reinicializado com as permissões actualizadas.
<!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>