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" },
      ];

      //  ブール値に基づいてブロックされた広告タイプを変更し、広告を再レンダリングします
      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>テストページ</h1>

    <!-- 規約に同意し、クリック時に localStorage に同意を追加 -->
    <button
      id="accept-terms-button"
      onclick="updateAdRestrictions(true); localStorage.setItem('acceptTerms', true); this.remove();"
    >
      利用規約に同意します
    </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>

    <!-- 検証済み cookie があるかローカル ストレージを確認し、ユーザーがすでに検証済みの場合は updateAdRestrictions を呼び出します -->
    <!-- 広告ゾーンのスクリプトの後に配置する必要があります -->
    <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>テストページ</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>

前へビデオスライダー - ビデオスライダー広告ゾーンの設定方法次へExoClickのインストリーム（動画）ゾーンで広告タイプを動的にブロックする方法

最終更新 14 日前

役に立ちましたか？