Google Analytics をいまいち使いこなせていない管理人NSです。
これまでは、取得が難しそうな埋め込み動画の再生イベントをトラッキングできていなかったのですが、すばらな記事を見つけて一発で解決しました。
なお、26~33行目のコメントアウト部分は、Googleタグマネージャを利用している場合に必要な処理ということです。
イベントカテゴリには「Youtube」、イベントアクションには動画の再生情報、イベントラベルには動画のIDとタイトルが送られます。親切設計!
下の表は、Youtube の API公式リファレンスに示されている
この内、私が欲しいのは
更に、動画のHTML を埋め込む度にいちいちパラメータを書き加えるのも面倒なので、スクリプト実行時に自動追記する処理を入れました。
という感じに、弊サイト用にカスタマイズしたコードがこちら
でもウチってそんなに動画埋め込んでなかった…三年近くやってて数本(笑)
このブログのどこかで動画を見かけたら再生して下さると嬉しいです。
これまでは、取得が難しそうな埋め込み動画の再生イベントをトラッキングできていなかったのですが、すばらな記事を見つけて一発で解決しました。
埋め込みYoutubeプレイヤーの再生状況をGoogleアナリティクスで解析する方法 | SEM TechnologyjQueryを使うので当面PC限定になりますが、まあそもそも他のイベントもスマホの方では取得できてなかった…
オリジナルコード
上記サイト様のコードです。なお、26~33行目のコメントアウト部分は、Googleタグマネージャを利用している場合に必要な処理ということです。
$(document).ready(function () { // YoutubeのAPIライブラリを読み込む. $.getScript('https://www.youtube.com/player_api', function () { YT.ready(function () { var getStateChangeEventName = function (event_id) { if (event_id == YT.PlayerState.ENDED) return 'YT.PlayerState.ENDED'; if (event_id == YT.PlayerState.PLAYING) return 'YT.PlayerState.PLAYING'; if (event_id == YT.PlayerState.PAUSED) return 'YT.PlayerState.PAUSED'; if (event_id == YT.PlayerState.BUFFERING) return 'YT.PlayerState.BUFFERING'; if (event_id == YT.PlayerState.CUED) return 'YT.PlayerState.CUED'; if (event_id == YT.PlayerState.UNSTARTED) return 'YT.PlayerState.UNSTARTED'; return 'Unknown'; }; $('iframe').filter(function(i, element){ return element.src.indexOf('youtube.com/embed/') >= 0; }).each(function(i, element) { var player = new YT.Player(element); player.addEventListener('onStateChange', function (e) { var videoData = e.target['getVideoData'](); var actionName = getStateChangeEventName(e["data"]); var labelName = videoData.video_id + " : " + videoData.title; ga('send', 'event', 'Youtube', actionName, labelName, { 'nonInteraction': true }); // dataLayer.push({ // 'event': 'YoutubeEvent', // 'youtube': { // 'action': actionName, // 'title': videoData.title, // 'video_id': videoData.video_id // } // }); }); }); }); }); });これをコピペし、トラッキングしたい Youtube動画のHTMLコード
<iframe src="https://www.youtube.com/embed/Fqz1mQqeqpA" width="560" height="315"></iframe>これの
src
属性のURLの動画IDの最後に?version=3&enablejsapi=1
というパラメータを書き加えればOK。
<iframe src="https://www.youtube.com/embed/Fqz1mQqeqpA?version=3&enablejsapi=1" width="560" height="315"></iframe>
こうですね。イベントカテゴリには「Youtube」、イベントアクションには動画の再生情報、イベントラベルには動画のIDとタイトルが送られます。親切設計!
デチューン
動画のイベントはプレーヤーの状態が変わると発火します。下の表は、Youtube の API公式リファレンスに示されている
onStateChange
イベントで取得可能なステータス一覧です。
プロパティ | 値 | 意味 |
---|---|---|
YT.PlayerState.UNSTARTED | -1 | 未再生 |
YT.PlayerState.ENDED | 0 | 最後まで再生された |
YT.PlayerState.PLAYING | 1 | 再生中 |
YT.PlayerState.PAUSED | 2 | 一時停止 |
YT.PlayerState.BUFFERING | 3 | バッファリング中 |
YT.PlayerState.CUED | 5 | 頭出し済み |
PLAYING
とENDED
ぐらいなので、それ以外をスルーするように書き変えることにしました。更に、動画のHTML を埋め込む度にいちいちパラメータを書き加えるのも面倒なので、スクリプト実行時に自動追記する処理を入れました。
という感じに、弊サイト用にカスタマイズしたコードがこちら
$(function(){ 'use strict'; console.log('ga4youtube.js ver.1.1') $.getScript('https://www.youtube.com/player_api', function(){ YT.ready(function(){ const _param = '?version=3&enablejsapi=1'; $('iframe').filter(function(i, element){ return element.src.indexOf('youtube.com/embed/') >= 0; }).each(function(i, element){ element.src += (element.src.indexOf(_param) == -1)? _param : ''; var player = new YT.Player(element); player.addEventListener('onStateChange', function(e){ var action = e.data == YT.PlayerState.ENDED || e.data == YT.PlayerState.PLAYING ? e.data : undefined; if(action != undefined){ var videoData = e.target.getVideoData(); var labelName = videoData.video_id + " : " + videoData.title; ga( 'send', 'event', 'Youtube', 'YT.PlayerState.' + ['ENDED','PLAYING'][action], labelName, { 'nonInteraction': true }); } }); }); }); }); });テストもうまく行ったので、今日から運用開始です!
でもウチってそんなに動画埋め込んでなかった…三年近くやってて数本(笑)
このブログのどこかで動画を見かけたら再生して下さると嬉しいです。
コメント