如何使用 data-block-ad-types 动态屏蔽广告类型
作为出版商，您可能希望根据特定条件（如用户验证、用户偏好设置或其他因素）控制向访客显示哪些类型的广告。在本文中，我们将演示两个代码片段，让您了解如何动态管理在 ExoClick 广告区内显示或阻止哪些广告类型。
为了实现这一点，我们利用 ExoClick 的数据块广告类型功能，对多个广告点进行动态控制，而无需复杂的后台集成。
示例 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>