ExoClickインストリーム（動画）ゾーンの広告タイプを動的にブロックする方法
このチュートリアルでは、広告タイプに基づいて動画（インストリーム）*広告キャンペーンを動的にブロックする方法を紹介します。
このアプローチは様々なシナリオで実施することができますが、一般的な用途としては、パブリッシャーとして、同意を提供したユーザーには特定のタイプの広告を表示し、ウェブサイトの利用規約に同意しないユーザーには特定のキャンペーンをブロックしたい場合にこのテクニックを使用します。
このアイデアを説明するために、バニラJSを使って2つのコード・スニペットを作成した。最初の例では、URLパラメータに基づいて動画広告をブロックする方法を示している。2つ目の例では、ユーザーの同意がブラウザのローカルストレージに保存されている場合をシミュレートしています。どちらの場合も、Exoclick の block-ad-types 機能を活用しています。
インストリーム広告を表示するために、VAST および VPAID 形式と互換性のある無料のオープンソース HTML5 プレーヤーである Fluid Player を使用しています。
もし違うセットアップをしている場合は、プレーヤーの要求に合わせてこのコードを変更する必要があることを覚えておいてください。しかし、
block-ad-types機能のコアロジックは変わりません。
例1 - URLパラメータに基づいてインストリーム広告タイプをブロックする
これは、標準的なビデオプレーヤーが最初にロードされ、それからFluid Playerがそれにアタッチされる、基本的なFluid Playerの統合とあまり変わらない、かなり単純なロジックです。
ここでの主な違いは、Fluid Player を標準のビデオプレーヤーにアタッチする前に、URL パラメーターのチェックを行い、そこで user_verified の値を取得することです。
この定義で、未認証ユーザーのNSFW広告をブロックするか、認証済みユーザーのすべての広告を許可するようにdynamicVastTag変数を設定するif文がある。
この変数が設定されると、Fluid Player の config オブジェクトをロードし、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> 」セクションには、ユーザーの同意に基づいて広告配信をコントロールする3つの主な機能が含まれている：
insertVideoPlayerビデオプレーヤー要素を作成し、ウェブページに追加します。- fluidPlayerConfig`はFluid Playerの設定オブジェクトを生成します。この関数の主要なロジックは、広告URLを選択する方法にあります。ユーザーが条件を受け入れていない場合(false)、特定の広告をブロックするために、URLに
&block_ad_types=101を追加します。ユーザーが条件を受け入れた場合（true）、標準のURLを使用し、すべての広告を許可する。 insertFluidPlayerは、すべてを結びつけます。最初に、insertVideoPlayer を使ってビデオプレーヤーを作成し、それから、ユーザーの同意に合わせた playerConfig からの特定の設定を使用して、Fluid Player をそれにアタッチします。
<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>