如何为 ExoClick In-stream（视频）区域动态屏蔽广告类型
在本教程中，我们将演示如何根据广告类型动态屏蔽*视频（流内）***广告系列。
这种方法可以在各种情况下使用，但常见的应用是，当你作为出版商，希望向同意的用户展示某些类型的广告，同时阻止那些不接受你网站条款和条件的用户参与特定的广告活动时，就可以使用这种技术。
为了说明这个想法，我们使用 vanilla JS 创建了两个代码片段。在第一个示例中，我们演示了如何根据 URL 参数阻止视频广告。第二个示例模拟了用户同意存储在浏览器本地存储中的情况。在这两种情况下，我们都使用了 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.
请注意，如果您有不同的设置，则必须调整此代码以适应您的播放器要求。不过，"block-ad-types "功能的核心逻辑保持不变。
示例 1 - 根据 URL 参数阻止流内广告类型
这是一个相当直接的逻辑，与基本的 Fluid Player 集成并无太大区别，即首先加载标准视频播放器，然后将 Fluid Player 连接到该播放器。
这里的主要区别在于，在将 Fluid Player 附加到标准视频播放器之前，我们会执行 URL 参数检查，并在其中检索 user_verified 的值。
定义好这一点后，我们就有了一个 if 语句，该语句会将 dynamicVastTag 变量设置为要么阻止未验证用户观看 NSFW 广告，要么允许已验证用户观看所有广告。
设置该变量后，我们将继续加载 Fluid Player 配置对象，确保将 dynamicVastTag 变量作为 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>
示例 2 - 根据本地存储数据阻止流内广告类型
该实现与之前的实现不同，它使用本地存储来管理用户同意，而不是 URL 参数。代码是模块化的，有用于创建视频播放器和 Fluid Player 配置的独立函数。
HTML 的 head 部分包含三个主要功能，可根据用户同意控制广告投放：
insertVideoPlayer创建视频播放器元素并将其添加到网页中。- fluidPlayerConfig`为流畅播放器生成一个配置对象。该函数的关键逻辑在于如何选择广告 URL：如果用户尚未接受条款（false），它会在 URL 中添加
&block_ad_types=101，以阻止某些广告。如果用户已接受（true），则使用标准 URL，允许所有广告。 - insertFluidPlayer "将一切联系在一起。它首先使用 insertVideoPlayer 创建视频播放器，然后使用 playerConfig 中的特定配置将流体播放器附加到视频播放器上，这些配置是根据用户的同意定制的。
在 body 中，最终脚本会在页面加载时检查本地存储是否获得用户同意，并据此渲染播放器。如果用户没有同意，但后来通过点击按钮接受了条款，播放器就会以更新后的权限重新初始化。
<!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>