YouTubeのAPI仕様変更によりGoogleアナリティクスでの計測ができなくなっています。
記事はそのまま残しますが、このコードでは計測ができません。
新しいAPIに対応したコードは自社のブログに書きました。よろしければご覧ください。
勉強不足で今まで知らなかったのですが、ページ内に埋め込んだYouTube動画の再生や完了、再生時間などをGoogleアナリティクスのイベントトラッキングで計測することができるんですね。
YouTube JavaScript APIというものを使うらしいです。
—
ということで勢いに任せてサンプルスクリプトを作ってみましたので公開します。
ファイルダウンロード
ファイル内容:
・ youtube.gatracking.0.0.1.js
YouTube JavaScript APIに関する記述が書いてある本体ファイル。動画を埋め込んでいるページのHTMLから読み込んでください。
・sample.html
HTML内の記述サンプル。動画プレーヤーの埋め込みはswfobject.jsを使ってください。
・swfobject.js
一応同梱していますが、Google Codeで最新版をダウンロードした方がいいかと思います。
http://code.google.com/p/swfobject/
計測されるデータの仕様
計測するのは、動画の再生開始、再生終了、再生時間の3つです。
・動画の再生開始
再生開始は、プレーヤー内でバッファリング後に動画が再生されたタイミングで計測されます。(≠再生ボタンが押されたタイミング)
一時停止後の再生開始(再生再開)は計測しませんが、再生終了(最後まで閲覧)後のリピート再生は計測されます。
・動画の再生終了
再生終了は、プレーヤー内で動画の終了箇所まで再生されたタイミングで計測されます。
シークバーなどを使って動画の途中をスキップした場合でも終了箇所が再生された場合は計測されます。
・再生時間
再生時間は、再生開始から何秒間動画が再生されたかを計測しています。
一時停止をしている間は再生時間に含まれません。
シークバーを使って巻き戻した場合でも秒数のカウントは継続されますので、同じ部分を何度も再生した場合はその分再生時間が加算されます。
動画の再生終了時とページ離脱時(サイト内遷移や再読み込み含む)の2つのタイミングで、それまでの再生時間が計測されます。
再生終了後にリピート再生した場合は、再生時間は0秒からカウントされます。
_trackEventの引数
・動画の再生開始時のイベント
category: URLのパス部分(例: /directory/index.html)
action: moviePlay
label: 動画プレーヤー埋め込みHTML部分で指定したatts変数の値
value: 設定なし
・動画の再生終了時のイベント
category: URLのパス部分
action: movieEnd
label: 動画プレーヤー埋め込みHTML部分で指定したatts変数の値
value: 設定なし
・再生時間のイベント
category: URLのパス部分
action: movieViewTime
label: 動画プレーヤー埋め込みHTML部分で指定したatts変数の値
value: 再生時間(整数値、単位は秒)
デモ画面
http://meaningfree.net/ga_test/youtube/sample.html
いちおう動作確認はしていますが、不具合があれば教えていただけると助かります。
YouTubeのAPI仕様変更によりGoogleアナリティクスでの計測ができなくなっています。
記事はそのまま残しますが、このコードでは計測ができません。
新しいAPIに対応したコードは、また記事にしてアップする予定です。
以下ソースコードです。
var gaCategory = location.pathname; // GAに送信するイベントのカテゴリ。デフォルトではURLのパス部分。
// -----初期設定---------------
var ytplayer = document.getElementsByTagName("object");
var loadNum = 0;
var ReStart = new Array();
var ViewTime = new Array();
function CountSec(PlayerName){
ViewTime[PlayerName]++;
}
// -----初期設定ここまで---------------
// -----プレーヤー読み込み時の処理---------------
function onYouTubePlayerReady(){
var PlayerName = ytplayer[loadNum].id;
ytplayer[loadNum].addEventListener("onStateChange", '(function(newState) { onytplayerStateChange(newState, "' + ytplayer[loadNum].id + '");})' );
ReStart[PlayerName] = 0;
loadNum++;
}
// -----再生状況変更時の処理---------------
function onytplayerStateChange(newState,PlayerName) {
if(newState==1){ // 再生開始
if(ReStart[PlayerName]==0){
_gaq.push(['_trackEvent', gaCategory, 'moviePlay', PlayerName]); // 再生イベント送信
ViewTime[PlayerName] = 0;
ReStart[PlayerName] = 1;
CountSecTimer = setInterval("CountSec('" + PlayerName + "')",1000);
}else{
if(CountSecTimer){clearInterval( CountSecTimer );}
CountSecTimer = setInterval("CountSec('" + PlayerName + "')",1000);
}
}
if(newState==0){ // 終了
_gaq.push(['_trackEvent', gaCategory, 'movieEnd', PlayerName]); // 終了イベント送信
if(CountSecTimer){clearInterval( CountSecTimer );}
ViewTimeTotal = ViewTime[PlayerName];
_gaq.push(['_trackEvent', gaCategory, 'movieViewTime', PlayerName, ViewTimeTotal]); // 再生時間送信(動画終了時)
ReStart[PlayerName]=0;
}
if(newState==2){ // 一時停止
if(CountSecTimer){clearInterval( CountSecTimer );}
}
}
// -----ページ離脱時の処理---------------
window.onbeforeunload = function() {
for(i=0; i < ytplayer.length; i++){
PlayerName = ytplayer[i].id;
if(ViewTime[PlayerName]){
ViewTimeTotal = ViewTime[PlayerName];
_gaq.push(['_trackEvent', gaCategory, 'ViewTime', PlayerName, ViewTimeTotal]); // 再生時間送信(ページ離脱時)
}
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>YouTube計測</title>
<!-- Googleアナリティクスのトラッキングコードは特にカスタマイズ不要 -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- swfobject.jsを読み込む swfobject.jsはgooglecodeでダウンロードしてください。 -->
<script type="text/javascript" src="swfobject.js"></script>
<!-- YouTube JavaScript API用JavaScriptファイル -->
<script type="text/javascript" src="youtube.gatracking.0.0.1"></script>
</head>
<body>
<!--
◆動画ごとに変更する箇所
・41行目 divタグのid(例ではembed、embed2) ※任意に設定してください
・45行目 var attsの値(例ではplayer01、player02) ※GAイベントのラベル値になります)
・46行目 動画URL内の動画識別ID(例ではqS0OLh8UrZk、oMHYT4yXK1A) ※埋め込みたい動画のIDを入れる
・46行目 動画URLの次の引数(例ではembed、embed2) ※上で設定したdivタグのidと一致させる
-->
<!-- YouTubeプレーヤー埋め込みの記述 ここから -->
<div id="embed"></div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "player01" };
swfobject.embedSWF("http://www.youtube.com/v/qS0OLh8UrZk?enablejsapi=1", "embed", "560", "315", "8", null, null, params, atts);
</script>
<!-- YouTubeプレーヤー埋め込みの記述 ここまで -->
<!-- YouTubeプレーヤー埋め込みの記述 ここから -->
<div id="embed2"></div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "player02" };
swfobject.embedSWF("http://www.youtube.com/v/oMHYT4yXK1A?enablejsapi=1", "embed2", "560", "315", "8", null, null, params, atts);
</script>
<!-- YouTubeプレーヤー埋め込みの記述 ここまで -->
</body>
</html>
ご自由に使っていただいて問題ありませんが、万が一トラブルなどあった場合は自己責任でお願いいたします。
YouTube JavaScript APIのタグ埋め込みについてお聞きしたいことがあります。
動画の再生状況を確認したくてこのサイトで掲載してあるとおりにコードを編集しました。
動画自体は読み込まれているのでjsは問題なく動いています。
しかし、GA側で計測ができていません。
もし、データが取れるまでに時間がかかるようでしたら少し時間を置いてから見たいとは思いますが、
すぐに取れるのであればGAに関するところで何かミスが出ているはずなので直したいです。
コチラ側で設定すべきところがイマイチ記事を読んでいてわからなかったので教えていただけるとありがたいです。
しょーちゃんさん
コメントありがとうございます。そして申し訳ございません。
YouTubeのAPIに仕様変更があったようで、この記述では計測ができなくなっておりました。
記事を放置してしまって申し訳ありませんでした。
新しいAPIに対応したコードは、近日中に記事にしてアップします。
meaningfreeさん
返信ありがとうございます。
APIの仕様が変更されていたのですね。
新しい記事楽しみにしています。
しょーちゃんさん
甚だ遅くなってしまいすいませんが、
ようやく記事をアップできました。
弊社サイトのブログにアップしましたので、
よろしければご覧ください。
https://www.rainbow.co.jp/wmc/2786/
meaningfreeさん
新しいAPIの記事拝見致しました。
無事にアナリティクス側で見ることができました。
お忙しい中記事の更新ありがとうございました。
とても参考になりました。