Перейти к основному содержанию

Как динамически блокировать типы объявлений с помощью data-blocked-types

Как издатель, вы можете захотеть контролировать, какие типы объявлений будут показываться вашим посетителям на основе определенных условий, таких как аутентификация пользователя, настройки его предпочтений или другие факторы. В этой статье мы продемонстрируем два фрагмента кода, с помощью которых можно динамически управлять типами объявлений, отображаемых или блокируемых в рекламной зоне ExoClick.

Чтобы сделать это возможным, мы воспользовались функцией data-blocked-type компании 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 = `
            <ins class="${adZone.class}" data-zoneid="${adZone.zoneid}" data-block-ad-types=""></ins>

            `;
            (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. Например, после аутентификации пользователя можно перенаправить его на URL, содержащий такой параметр, как ?user_verified=1. Этот параметр сигнализирует странице о том, что пользователь прошел верификацию, побуждая систему показывать менее строгие типы объявлений для этой сессии.

<!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>