data-block-ad-typesを使って広告タイプを動的にブロックする方法
パブリッシャーとして、ユーザー認証、ユーザー嗜好設定、またはその他の要因などの特定の条件に基づいて、訪問者に表示される広告の種類を制御したい場合があります。この記事では、ExoClick広告ゾーン内で表示またはブロックされる広告タイプを動的に管理する方法を2つのコードスニペットで紹介します。
これを可能にするために、私たちはExoClickのdata-block-ad-types機能を活用し、複雑なバックエンドの統合を必要とせずに、複数の広告スポットをダイナミックにコントロールできるようにしています。
例1 - ユーザーの入力に基づいて広告を動的に表示する
この方法は、ユーザーの同意に基づいて広告の制限を調整するのに理想的です。訪問者が条件に同意すると、そのユーザーの設定はブラウザの localStorage に保存されます。このアクションは、その後のすべての訪問でそのユーザーの広告設定を永続的に変更し、一度同意が与えられれば、より幅広い種類の広告を提供することができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
const adZoneConfigs = [
{ containerId: "zid-5662140", class: "eas6a97888e20", zoneid: "5662140" },
{ containerId: "zid-5532602", class: "eas6a97888e2", zoneid: "5532602" },
];
// CHANGE BLOCKED AD TYPES BASED ON BOOLEAN VALUE AND RE RENDER THE ADS
let updateAdRestrictions = (value) => {
if (value === true) {
adZoneConfigs.forEach((adZone) => {
let adContainer = document.getElementById(adZone.containerId);
adContainer.innerHTML = "";
adContainer.innerHTML = `
`;
(AdProvider = window.AdProvider || []).push({ serve: {} });
});
}
return;
};
</script>
</head>
<body>
<h1>TEST PAGE</h1>
<!-- ACCEPT TEMRS AND ADD CONSENT TO LOCAL STORAGE ON CLICK -->
<button
id="accept-terms-button"
onclick="updateAdRestrictions(true); localStorage.setItem('acceptTerms', true); this.remove();"
>
I accept the terms and conditions
</button>
<main>
<script
async
type="application/javascript"
src="https://a.magsrv.com/ad-provider.js"
></script>
<h2>zid-5662140</h2>
<div id="zid-5662140">
<ins
class="eas6a97888e20"
data-zoneid="5662140"
data-block-ad-types="101"
></ins>
<script>
(AdProvider = window.AdProvider || []).push({ serve: {} });
</script>
</div>
<h2>zid-5532602</h2>
<div id="zid-5532602">
<ins
class="eas6a97888e2"
data-zoneid="5532602"
data-block-ad-types="101"
></ins>
<script>
(AdProvider = window.AdProvider || []).push({ serve: {} });
</script>
</div>
</main>
<!-- CHECK LOCAL STORAGE FOR VERIFIED COOKIE AND CALL updateAdRestrictions IF THE USER IS ALREADY VERIFIED -->
<!-- MUST BE PLACED AFTER THE AD ZONES' SCRIPTS -->
<script>
const cookie = localStorage.getItem("acceptTerms");
const parsedCookie = JSON.parse(cookie)
if (parsedCookie === true) {
updateAdRestrictions(true);
document.getElementById("accept-terms-button").remove();
}
</script>
</body>
</html>
例2 - URLパラメータに基づいて広告を動的に表示する
この方法は、URLパラメータに基づいて広告設定を変更する場合に有効です。例えば、ユーザーが認証された後、?user_verified=1のようなパラメータを含むURLにリダイレクトさせることができる。このパラメータは、ユーザーが認証済みであることをページに通知し、システムがそのセッションに対してより制限の少ない広告タイプを表示するよう促します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Page</title>
</head>
<body>
<header>
<ins
class="eas6a97888e20"
data-zoneid="5662140"
data-block-ad-types="101"
></ins>
<script
async
type="application/javascript"
src="https://a.magsrv.com/ad-provider.js"
></script>
<script>
(AdProvider = window.AdProvider || []).push({ serve: {} });
</script>
</header>
<footer id="footer-ads">
<script
async
type="application/javascript"
src="https://a.magsrv.com/ad-provider.js"
></script>
<ins
class="eas6a97888e2"
data-zoneid="5532602"
data-block-ad-types="101"
></ins>
<script>
(AdProvider = window.AdProvider || []).push({ serve: {} });
</script>
</footer>
<script>
const userVerified = new URLSearchParams(window.location.search).get(
"user_verified"
);
const headerElement = document.querySelector('[data-zoneid="5662140"]');
const footerElement = document.querySelector('[data-zoneid="5532602"]');
const elementsArr = [headerElement, footerElement];
if (userVerified == 1) {
elementsArr.forEach((element) => {
element.setAttribute("data-block-ad-types", "");
const newElement = element.cloneNode(true);
element.parentNode.replaceChild(newElement, element);
});
}
</script>
</body>
</html>