ExoClickのインストリーム（動画）ゾーンで広告タイプを動的にブロックする方法

このチュートリアルでは、動的に ブロックする 動画（インストリーム） 広告タイプに基づく広告キャンペーン。

このアプローチはさまざまなシナリオで実装できますが、一般的な用途としては、あなたがパブリッシャーとして、同意を提供するユーザーには特定の種類の広告を表示し、サイトの利用規約に同意しないユーザーには特定のキャンペーンをブロックしたい場合に、この手法を使うことです。

この考え方を示すために、Vanilla JS を使った2つのコードスニペットを作成しました。1つ目では、URLパラメータに基づいて動画広告をブロックする方法を示します。2つ目の例では、ユーザーの同意がブラウザーのローカルストレージに保存されているケースをシミュレートします。どちらの場合も、私たちは Exoclick の block-ad-types 機能。

インストリーム広告を表示するために、私たちは Fluid Playerこれは、VASTおよびVPAID形式に対応した無料のオープンソースHTML5プレーヤーです。

別の構成を使用している場合は、このコードをプレーヤーの要件に合わせて調整する必要があることに留意してください。ただし、 block-ad-types 機能の中核ロジックは同じです。

例1 - URLパラメータに基づいてインストリーム広告タイプをブロックする

これは非常にシンプルなロジックで、基本的な Fluid Player の統合と大きくは異なりません。標準の動画プレーヤーを最初に読み込み、その後で Fluid Player をそれに追加します。

ここでの主な違いは、Fluid Player を標準の動画プレーヤーに追加する前に、URLパラメータのチェックを行い、 user_verified.

それを定義したうえで、次の dynamicVastTag 変数を設定する if 文があり、未認証ユーザーにはNSFW広告をブロックし、認証済みユーザーにはすべての広告を許可します。

この変数を設定したら、次に Fluid Player の設定オブジェクトを読み込み、 dynamicVastTag 変数を vastTag プロパティの値として含めることを確認します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>インストリーム（動画）広告 | block-ad-types</title>

    <!-- Fluid Player をインポート -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <!-- Fluid Player のインスタンスを初期化 -->
    <script>
      console.log("Fluid Player を初期化中")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>URLパラメータを使用したインストリーム（動画）広告向けの block-ad-types</h1>

    <!-- 通常の <video> プレーヤー -->
    <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"
        />
        お使いのブラウザーは video タグをサポートしていません。
      </video>
    </div>

    <!-- Fluid Player の設定を行うスクリプト -->
    <script>
      
      // URLパラメータから user_verified の値を取得する関数
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // URLパラメータに基づいてブロックする広告タイプを定義
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // NSFW広告をブロック
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // ユーザーが認証済みの場合、すべての広告を表示
      }

      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 の設定用に別々の関数があります。

その <head> HTML の section には、ユーザーの同意に基づいて広告配信を制御する3つの主要な関数が含まれています。

insertVideoPlayer 動画プレーヤー要素を作成し、ウェブページに追加します。
fluidPlayerConfig Fluid Player 用の設定オブジェクトを生成します。この関数の重要なロジックは、どの広告URLを選ぶかという点にあります。ユーザーが利用規約に同意していない場合（false）は、 &block_ad_types=101 をURLに追加して特定の広告をブロックします。ユーザーが同意している場合（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>インストリーム（動画）広告 | block-ad-types</title>

    <!-- Fluid Player をインポート  -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <script>
      // 指定された ID パラメータを持つ div の中に <video> 要素を動的に作成して配置します
      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("お使いのブラウザーは video タグをサポートしていません。");

        videoPlayerContainer.appendChild(video);
      };
    </script>

    <script>
      // ユーザーの同意に基づいてブロックまたは表示する広告を決定する動的VASTタグを含む、Fluid Player の設定を定義します
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // ユーザーの同意
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // すべての広告を表示
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // NSFW広告をブロック
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- これは、動画プレーヤーと Fluid Player のロジックを結び付け、UI にコンテンツを表示するスクリプトです -->
    <script>
      let player;

      const insertFluidPlayer = (acceptTerms) => {
        insertVideoPlayer("video-wrapper");
        player = fluidPlayer("example-player", fluidPlayerConfig(acceptTerms));
      };
    </script>
  </head>

  <body>
    <h1>ローカルストレージを使用したインストリーム（動画）広告向けの block-ad-types</h1>

    <button
      id="accept-terms-button"
      onclick="
      localStorage.setItem('userConsent', JSON.stringify(true));
      insertFluidPlayer(true);
      this.remove();
      "
    >
      利用規約に同意
    </button>

    <!-- 動画プレーヤーを追加するためのコンテナ -->
    <!-- Fluid Player の初期化前に定義しておく必要があります -->
    <div id="video-wrapper"></div>

    <!-- このスクリプトは、ローカルストレージ内のユーザー同意を確認し、それに応じてプレーヤーを初期化します -->
    <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>

前へdata-block-ad-types を使用して広告タイプを動的にブロックする方法

役に立ちましたか？