ポップアップレコメンドでYouTubeの動画再生時にクリック計測する – Rtoaster サポートセンター

Webコンテンツグループ設定のポップアップコンテンツで、YouTubeを動画ファイル元にしたコンテンツを作成しレコメンドした場合、動画再生をしてもクリック計測はされない仕様となっております。

ここではコールバック関数を使って動画再生時にクリック計測を行う方法について紹介します。

ワンタグで実装している場合

Rtoaster action+管理画面 > 「Webコンテンツグループ設定」画面に遷移します。
動画再生時にクリック計測したいYouTube動画のコンテンツグループを選択し、編集ボタンをクリックします。
「Webコンテンツグループ編集（ポップアップ）」画面 > 「コンテンツ」にて、対象のコンテンツを選択し、編集ボタンをクリックします。
「コンテンツ編集」画面 > 「内容設定」タブ > URLにて、設定いただいているURLの末尾に「&enablejsapi=1」を追加し、「OK」ボタンをクリックします。
例) https://www.youtube.com/watch?v=XXX&enablejsapi=1
「設定の反映」をします。
Rtoaster action+管理画面 > 「ワンタグ設定」画面 > 「アクション」タブに遷移します。
YouTube動画のポップアップをレコメンドしているアクションを選択し、「編集」ボタンをクリックします。
「アクション編集画面」 > 「コールバック関数など」にて、「レコメンド実行後に呼び出されるコールバック関数」にコールバック関数に記載のスクリプトを転記し、「OK」ボタンをクリックします。
「ワンタグ設定」画面 > 「バージョン」タブにて、ワンタグのバージョン公開を行います。

コールバック関数

function (e) {
  const addYTIframeAPIEvent = (elementId) => {
    const iframeId = `${elementId}_iframe`;
    document
      .getElementById(elementId)
      .getElementsByTagName("iframe")[0]
      .setAttribute("id", iframeId);

    let isEventSent = false;
    const _onPlayerStateChange = (event) => {
      if (event.data == YT.PlayerState.PLAYING) {
        if (isEventSent) {
          return;
        }
        Rtoaster.click(elementId);
        Rtoaster.event();
        isEventSent = true;
      }
    };

    new YT.Player(iframeId, {
      events: {
        onStateChange: _onPlayerStateChange,
      },
    });
  };

  const isYoutube =
    document.getElementById(e)?.getElementsByTagName("iframe").length > 0 ??
    false;

  if (window.rt_iframeElementIds == null) {
    window.rt_iframeElementIds = [];
  }
  if (isYoutube) {
    window.rt_iframeElementIds.push(e);
  }

  if (e === undefined) {
    if (window.rt_iframeElementIds.length === 0) {
      return;
    }

    window.onYouTubeIframeAPIReady = () => {
      for (const elementId of window.rt_iframeElementIds) {
        addYTIframeAPIEvent(elementId);
      }
    };

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}

コードを直接HTMLに実装している場合

Rtoaster action+管理画面 > 「Webコンテンツグループ設定」画面に遷移します。
動画再生時にクリック計測したいYouTube動画のコンテンツグループを選択し、編集ボタンをクリックします。
「Webコンテンツグループ編集（ポップアップ）」画面 > 「コンテンツ」にて、対象のコンテンツを選択し、編集ボタンをクリックします。
「コンテンツ編集」画面 > 「内容設定」タブ > URLにて、設定いただいているURLの末尾に「&enablejsapi=1」を追加し、「OK」ボタンをクリックします。
例) https://www.youtube.com/watch?v=XXX&enablejsapi=1
「設定の反映」をします。
次にYouTube動画コンテンツのRtoasterレコメンドコードの実装をしているページのソースコードを開きます。
Rtoaster.recommendNow()を記載している箇所の上部にコールバック関数に記載のスクリプトをを記載します。
コールバック関数についての詳細はレコメンド表示後にJavascriptを実行するをご確認ください。

コールバック関数

Rtoaster.callback = function (e) {
  const addYTIframeAPIEvent = (elementId) => {
    const iframeId = `${elementId}_iframe`;
    document
      .getElementById(elementId)
      .getElementsByTagName("iframe")[0]
      .setAttribute("id", iframeId);

    let isEventSent = false;
    const _onPlayerStateChange = (event) => {
      if (event.data == YT.PlayerState.PLAYING) {
        if (isEventSent) {
          return;
        }
        Rtoaster.click(elementId);
        Rtoaster.event();
        isEventSent = true;
      }
    };

    new YT.Player(iframeId, {
      events: {
        onStateChange: _onPlayerStateChange,
      },
    });
  };

  const isYoutube =
    document.getElementById(e)?.getElementsByTagName("iframe").length > 0 ??
    false;

  if (window.rt_iframeElementIds == null) {
    window.rt_iframeElementIds = [];
  }
  if (isYoutube) {
    window.rt_iframeElementIds.push(e);
  }

  if (e === undefined) {
    if (window.rt_iframeElementIds.length === 0) {
      return;
    }

    window.onYouTubeIframeAPIReady = () => {
      for (const elementId of window.rt_iframeElementIds) {
        addYTIframeAPIEvent(elementId);
      }
    };

    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
}