YouTubeの動画が再生されたイベントを取得し、Xdataにログを送信するサンプルのご紹介です。
動画再生時にonClickイベントを発生させるだけではログ通知できなかったため、調査したところ、YouTubeからAPIが提供されていましたので実際にテストしてみました。
このAPIを活用して動画再生イベントを取得し、XdataのJavaScriptタグが用意するイベント関数（__push_event）を利用してログ通知しています。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>YouTubeの動作再生時のクリックイベント取得テスト</title>
</head>
<body>
<!--[YouTube]-->
<div id="video-container"></div>
<!--[/YouTube]-->
<script type="text/javascript">
// YouTubeのAPIを読み込み、動画のクリック時のイベントを取り込む
(function() {
var __ytse = document.createElement("script");
__ytse.src = "https://www.youtube.com/iframe_api";
var __fse = document.getElementsByTagName('script')[0];
__fse.parentNode.insertBefore(__ytse, __fse);
var player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('video-container', {
height: '450',
width: '800',
videoId: 'Cf_0uqnYPsI',
events: {
'onStateChange': onPlayerStateChange
},
playerVars: {
'rel' : 0
}
});
};
var __sf = false;
function onPlayerStateChange(e) {
if( e.data == YT.PlayerState.PLAYING && !__sf ) {
// イベント関数を使ってログ送信
__push_event('[動画名]','[動画カテゴリ]');
__sf = true;
}
}
})();
</script>
<!-- 共通タグ -->
<script type="text/javascript">
var __site_id = "******";
var __call_domain = "log1.mobylog.jp";
// var __mobylog_internal_domain = ["導入するドメインを指定"];
// var __cookie_domain_name = "導入するドメインを指定(サブドメイン計測時のみ)";
// var __add_params = new Array("");
var __mobylog_send_params = ["utm_source", "utm_medium","utm_term", "utm_content","utm_campaign"];
var __no_init = 1;
var __ip_notify = 1;
var __get_title_tag = 1;
var __build_session = 1;
var __tracking_cookie_type = "ENGINE";
if( typeof(__mobylog_attribute_item) !== "object" ) { __mobylog_attribute_item = new Array(); }
(function() {
var se = document.createElement('script');
se.src = __protocol + __call_domain + "/_tag_mobylog.js";
se.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(se);
// 顧客を識別するユニークキーの設定
var __loadtrigger = function() {
// __mhtsc.set("cltId", "顧客を識別するユニークキー");
__push_beacon(__getURL());
};
if( typeof(addEventListener) === "function" ) {window.addEventListener("load", __loadtrigger);} else {window.attachEvent("onload",__loadtrigger);}
})();
</script>
</body>
</html>
上記サンプルでは、__push_event関数で、イベント名として[動画名]、イベントカテゴリとして[動画カテゴリ]を固定で格納していますが、任意の情報を格納して通知するようにすることで、イベントログとしてXdataに保存されます。
大分説明を省きましたので、詳しい情報が必要な方はsupport@xdata.jpまでお問い合わせください。
