Comment bloquer dynamiquement les types de publicités pour les zones ExoClick In-stream (vidéo)
Dans ce tutoriel, nous verrons comment bloquer dynamiquement les campagnes publicitaires Vidéo (In-Stream) en fonction du type de publicité.
Cette approche peut être mise en œuvre dans différents scénarios, mais une application courante consiste à utiliser cette technique lorsque vous, en tant qu'éditeur, souhaitez montrer certains types de publicités aux utilisateurs qui ont donné 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 utilisant vanilla JS. Dans le premier, nous montrons comment bloquer les publicités vidéo en fonction des paramètres de l'URL. Le second exemple simule un cas où le consentement de l'utilisateur est stocké dans le stockage local du navigateur. Dans les deux cas, nous utilisons la fonctionnalité block-ad-types d'Exoclick.
Afin d'afficher des publicités 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 vous avez une configuration différente, vous devrez adapter ce code pour répondre aux besoins de votre lecteur. Cependant, la logique de base de la fonctionnalité
block-ad-typesreste la même.
EXEMPLE 1 - Bloquer les types de publicités 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 de base de Fluid Player, dans laquelle un lecteur vidéo standard est d'abord chargé, puis Fluid Player y est attaché.
La principale différence est qu'avant d'attacher Fluid Player au lecteur vidéo standard, nous effectuons une vérification des paramètres de l'URL, où nous récupérons la valeur de user_verified.
Avec cette définition, nous avons une instruction if qui définit la variable dynamicVastTag pour bloquer les publicités NSFW pour les utilisateurs non vérifiés ou pour autoriser toutes les publicités pour les utilisateurs vérifiés.
Une fois cette variable définie, nous chargeons l'objet de configuration du lecteur Fluid, en veillant à inclure la variable dynamicVastTag comme valeur de la propriété 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>
EXEMPLE 2 - Blocage des types de publicités en flux sur la base des données de 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 URL. Le code est modulaire, avec des fonctions distinctes pour la création du lecteur vidéo et la configuration du lecteur Fluid.
La section <head> de l'HTML contient trois fonctions principales qui contrôlent la diffusion des publicités en fonction du consentement de l'utilisateur :
- insertVideoPlayer` crée un élément de lecteur vidéo et l'ajoute à la page web.
fluidPlayerConfiggénère un objet de configuration pour Fluid Player. La logique clé de cette fonction est la façon dont elle choisit l'URL de la publicité : si l'utilisateur n'a pas accepté les conditions (false), elle ajoute&block_ad_types=101à l'URL pour bloquer certaines publicités. Si l'utilisateur a accepté (true), il utilise l'URL standard, autorisant toutes les publicités.- InsertFluidPlayer fait le lien entre tous les éléments. Il crée d'abord le lecteur vidéo à l'aide de insertVideoPlayer, puis y associe Fluid Player, en utilisant la configuration spécifique de playerConfig adaptée au consentement de l'utilisateur.
Dans le <body>, le script final vérifie le stockage local pour le consentement de l'utilisateur lors du chargement de la page et rend les lecteurs en conséquence. Si aucun consentement n'a été donné mais que l'utilisateur accepte ensuite 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>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>