Google Analytics 4 (GA4) を利用すると、お持ちのサイトへのアクセスを解析することが可能になります。このページではGA4でmillvi動画の視聴を含めたアクセス解析を行う方法を説明します。
目次
- 動画再生イベントの作成
- ディメンション設定
動画再生イベントの作成
プレイヤーAPIを利用することでJavaScriptからプレイヤーの現在の再生状態を取得可能です。これを使うと、再生状況に応じてGA4のイベントを発生させることができます。このようにして、動画の再生開始、再生完了、途中経過(何%地点まで視聴したか)などをGA4上で確認できます。
millviプレイヤーからGA4のイベントを発生させる例を示します。この例ではmillviプレイヤーの生成でmillvi_play
、millvi_complete
、millvi_progress
という3つのイベントを発生させています。この例におけるイベントの発生条件、パラメータについては以下の通りとなっております。
イベント名 | 発生条件 | パラメータ |
millvi_play |
動画が再生されたとき |
|
millvi_complete |
動画の再生が完了したとき | |
millvi_progress |
動画の再生時間が50%まで進行したとき |
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXX');
</script>
</head>
<body>
<h1>以下埋め込みコード</h1>
<script type="text/javascript">var Eviry=Eviry||{};Eviry.Player||(Eviry.Player={});Eviry.Player.embedkey=埋め込みコード;
Eviry.Player.eventListeners = {
"played":function(){
gtag('event', 'millvi_play',{'millvi_percent': 0, 'millvi_contentid': 13});
},
"ended":function(){
gtag('event', 'millvi_complete',{'millvi_percent': 100, 'millvi_contentid': 13});
}
}
</script>
<script type="text/javascript" src="https://d1euehvbqdc1n9.cloudfront.net/001/eviry/js/eviry.player.min.js"></script>
<script>
var is50percent=false;
Eviry.Player.ready(function (millviplayer) {
if (millviplayer) {
function triggermillvi_progress() {
var currenttime = millviplayer.getCurrentPosition();
var totaltime = millviplayer.getDuration();
if ((currenttime / totaltime > 0.5) && (!is50percent)){
gtag('event', 'millvi_progress',{'millvi_percent': 50, 'millvi_contentid': 13});
is50percent=true;
}
}
setInterval(triggermillvi_progress,100);
} else {
alert("ミルビィプレイヤーが見つかりませんでした。");
}
});
</script>
</body>
</html>
この設定を行った後millvi動画を閲覧し、GA4上でmillvi_play
というイベントが確認されましたら、イベント設定は成功です
ディメンション設定
Google Analytics上でデータの解析等を行う場合はパラメータをディメンションとして設定する必要があります。手順としては、まずGoogle Analytics 4の画面から左のメニューの「設定」を選択します。開いた画面の左の一覧から「カスタム定義」を選び、下図の画面を表示させ、「カスタム ディメンションを作成」をクリックします。
「新しいカスタム ディメンション」メニューでディメンション名などを設定し、イベントパラメータにはイベントから発生するパラメータ名を指定します。