この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、大前です。
動画配信を行う際、再生回数を取得したい といった要望を受けた経験はありませんでしょうか。
今回は、動画プレイヤー製品である THEOplayer に Google Analytics を組み合わせて、動画の再生回数などを取得してみました。
再生回数などを取得する仕組みを自前で用意しようとするとそれなりに大変ですが、SaaS サービスなどを組み合わせる事により、簡単に実現する事が出来ます。
やってみた
THEOplayer で動画プレイヤーの作成
まずは THEOplayer を使用し、動画プレイヤー（SDK）を作成します。
動画プレイヤーの作成は以下ブログに従って行いますので、手順は省略します。
今回は最低限の再生機能のみをもつ、以下の HTML を生成しました。
ライセンスキーの部分だけ置き換えれば、そのままご利用いただけるはずです。
作成した HTML ファイルは S3 に配置しておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- THEOplayer library and css -->
<script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/THEOplayer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/ui.css" />
</head>
<body>
<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
<script>
var element = document.querySelector(".theoplayer-container");
var player = new THEOplayer.Player(element, {
libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
});
// Customized video player parameters
player.source = {
sources: [{
"src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
"type": "application/x-mpegurl"
}]
};
player.preload = 'auto';
</script>
</body>
</html>Google Analytics の設定
続いて、Google Analytics の設定を行なっていきます。
アカウント作成
アカウントを持っていなかったので、作成するところから始めます。
アカウント名を入力し、他はデフォルトで進みます。
今回はウェブサイトで検証するので、"ウェブ" を選択。
「ウェブサイトの URL」には作成した HTML ファイルの配置先を指定します。今回は S3 に配置しているため、S3 の URL を指定しました。
その他、レポートのタイムゾーンなどを設定したらアカウントの作成は完了です。
トラッキングタグの埋め込み
先ほど作成した HTML ファイルに Google Analytics のトラッキングタグを埋め込んでいきます。
まず、Google Analytics のアカウント作成後に表示される（表示されていない場合は管理画面 → トラッキング情報）トラッキング ID をメモします。
THEOplayer の公式ドキュメントに従い、コードを埋め込んで行きます。
まず、head タグ内に以下コードを記載します。UA-XXXXXX-X には先ほど確認した ID を記載してください。
これにより、サイトのビュー数などが Google Analytics で確認できる様になります。
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-X', 'auto');
ga('send', 'pageview');
</script>今回は動画の再生回数を取得したいので、動画プレイヤーに関するイベントが発生した際に Google Analytics にイベントを送信するスクリプトを追加します。
必要に応じて設定するイベントは調整してください。
player.addEventListener(['durationchange', 'stalled', 'ended', 'seeking', 'seeked', 'waiting', 'playing', 'pause', 'volumechange'],
function(event) {
ga('send', {
hitType: 'event',
eventCategory: 'video',
eventAction: event.type,
eventLabel: player.src,
eventValue: Math.floor(player.currentTime)
});
});最終的な HTML は以下になりました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- THEOplayer library and css -->
<script type="text/javascript" src="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/THEOplayer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx/ui.css" />
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-X', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
</head>
<body>
<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
<script>
var element = document.querySelector(".theoplayer-container");
var player = new THEOplayer.Player(element, {
libraryLocation: "https://cdn.myth.theoplayer.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx"
});
// Customized video player parameters
player.source = {
sources: [{
"src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
"type": "application/x-mpegurl"
}]
};
player.preload = 'auto';
player.addEventListener(['durationchange', 'stalled', 'ended', 'seeking', 'seeked', 'waiting', 'playing', 'pause', 'volumechange'],
function(event) {
ga('send', {
hitType: 'event',
eventCategory: 'video',
eventAction: event.type,
eventLabel: player.src,
eventValue: Math.floor(player.currentTime)
});
});
</script>
</body>
</html>確認してみる
実際に動画プレイヤーを配置した HTML を開き、動画を再生すると Google Analytics にてイベントがすぐに反映されました。
様々なイベントを設定したので複数のメトリクスが取得されていますが、"playing" が再生状態をカウントするイベントとなっているので、こちらを集計すれば再生回数が取得できそうです。
チームメンバーにも適当に動画プレイヤーを開いてもらいました。
すぐにイベントが反映されるのでみていて楽しいです。
おわりに
THEOplayer で作成した動画プレイヤーに Google Analytics を組み込んで、動画の再生回数など、動画配信に関するイベントを取得してみました。
自前で集計の仕組みを用意するより楽ですので、是非気軽に試してみてください。
以上、AWS 事業本部の大前でした。
21
