YouTube動画のクリック計測方法について

ページ内にあるYouTubeの動画がクリックされたかどうか計測するゴールは、通常の要素クリックでは計測されないため、下記手順が必要です。


①動画クリック計測のために、カスタムコンバージョンゴールを設定する

②コードエディタを開き、プレキャンペーンJSに計測用コードを書く

①動画クリック計測のために、カスタムコンバージョンゴールを設定する

該当キャンペーン内の設定 > ゴールをクリックし、ゴールを作成

ゴール名:任意です。今回は「youtubeクリック計測」としています。

ゴールの種類:カスタムコンバージョンを計測

URL:ここにYouTubeの動画が存在しているページを指定します。

   必要に応じてURLのパターンを変更をしてください。

           VWOで設定できるURLパターンについてはこちら

②コードエディタを開き、プレキャンペーンJSに計測用コードを書く

※一部、URLとゴール番号をご自身で入れていただく必要がございます。

async function initYTAPI() {

    await YTurlCheck("ここにyoutubeのURLを入れます");

    if (typeof (window.YT) == "undefined") {

      vwo_$.getScript("https://www.youtube.com/iframe_api", function (data, textStatus, jqxhr) {

        if (window.timerX) clearInterval(window.timerX);

        window.timerX = setInterval(function () {

          if (typeof (window.YT.Player) != "undefined") {

            console.log("Insider undefined");

            console.log(vwo_$("#vwo_YT"));

            window.vwo_player = new YT.Player('vwo_YT', {

              events: {

                'onStateChange': onPlayerStateChange

              }

            });

            clearInterval(window.timerX);

          }

        }, 100);

      });

    } else {

      window.vwo_player = new YT.Player('vwo_YT', {

        events: {

          'onStateChange': onPlayerStateChange

        }

      });

    }

  }

  function YTurlCheck(videoURL) {

    var yTCSS = "iframe[src='" + videoURL + "']";

    return new Promise(resolve => {

      var waitForVideoToLoad = setInterval(function () {

        if (vwo_$(yTCSS).length > 0) {

          clearInterval(waitForVideoToLoad);

          var vidSrc = vwo_$(yTCSS).attr('src');

          console.log("vidSrc is....");

          console.log(vidSrc);

          if (vidSrc.indexOf('enablejsapi=1') == -1) {

            vwo_$(yTCSS).attr({

              'id': 'vwo_YT'

            });

            if (vidSrc.indexOf('?') > -1) {

              vwo_$(yTCSS).attr({

                'src': vwo_$(yTCSS).attr('src') + "&enablejsapi=1"

              });

            } else {

              vwo_$(yTCSS).attr({

                'src': vwo_$(yTCSS).attr('src') + "?enablejsapi=1"

              });

            }

          } else if (vidSrc.indexOf('enablejsapi=1') > -1) {

            vwo_$(yTCSS).attr({

              'id': 'vwo_YT'

            });

          }

          resolve();

        }

      }, 1000);

    })

  }

  function onPlayerStateChange(event) {

    console.log('change');

    if (event.data == YT.PlayerState.PLAYING) {

      console.log('Video Played');

      /* Place your custom conversion goal code here. You can get this code from the summary page of the A/B test inside VWO dashboard */

      window._vis_opt_queue = window._vis_opt_queue || [];

      window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(ここにゴールの番号を入れます);});

    };

  };

  try {

    vwo_$(function () {

      console.log("before YTurlCheck func");

      initYTAPI();

    });

  } catch (e) {

    console.log('Reach out to us:support@vwo.com');

  } 

※iframeタグのゴール計測は不安定なため、上記の設定を行っていただいてもゴール計測が出来ない場合が稀にございます。その際は、サポートまでお問い合わせください。