2023.05.30

ブックに設定したYouTube動画をGA4で計測してみる

Googleアナリティクスのプロパティ「ユニバーサルアナリティクス」のサポートが2023年7月1日で終了となりますが、GA4への移行はお済みでしょうか。

GA4でのデジタルブックのアクセス状況の確認方法については過去にご紹介しましたが、今回はGA4で新たに計測が可能になった動画の計測機能について設定方法などをご紹介したいと思います。

※以前の記事をご覧いただいていない方は下記よりご覧ください。

2022年9月20日より、meclibで作成したデジタルブックのログ解析にGoogleアナリティクス4プロパティ(以下、GA4)が利用できるようになりました。従来のユニバーサルアナリティクス(以下、UA)と異なり、データの計測仕様が「セッション」から「イベント」に変更さ...

1.GA4でYouTube動画の計測を行なうための条件
 2.YouTube動画で計測されるタイミングとイベント名
 3.YouTube動画をデジタルブックに設定して計測する設定方法
　・YouTubeの「JavaScriot API サポート」の設定
　・GA4の拡張計測機能「動画エンゲージメント」の設定
　・GA4の「カスタム定義(カスタムディメンション)」の設定
 4.探索レポートの作成
 5.まとめ

GA4でYouTube動画の計測を行なうための条件

GA4ではWebサイトに埋め込まれたYouTube動画に対し視聴ログを計測することが可能※になりました。
計測を行なうには以下2つの条件を満たしている必要がありますのでまずはご確認ください。

※現在はYouTubeのみ対応となっており、それ以外の動画には対応しておりません。

YouTubeの「JavaScriot API サポート」が有効になっている

　「JavaScriot API サポート」についてはYouTube動画のパラメータ
　「enablejsapi」の値が”1″になっていれば有効となり、パラメータが
　指定されていないまたは、「enablejsapi」の値が”0″の場合は無効となります。

　◆YouTube動画のパラメータ例
　　https://www.youtube.com/embed/XXXXXXXXXX?enablejsapi=1

参考：YouTube IFame Player APIリファレンス

　デジタルブックにYouTube動画を設定する際には、上記パラメータを含めた
　URLを設定してください。

GA4の拡張計測機能「動画エンゲージメント」が有効になっている

　Googleアナリティクスの管理画面より拡張計測機能
　「動画エンゲージメント」の設定を有効にする必要があります。
　無効の場合は、設定を有効にご変更ください。
　

双方の条件について設定を有効にする方法については後述で解説します。

YouTube動画で計測されるタイミングとイベント名

拡張計測機能の「動画エンゲージメント」では、動画が視聴された状況によって以下のタイミングでイベントが発生します。

イベント

イベント名	計測されるタイミング
video_start	動画の再生が開始されたとき
video_progress	動画が再生時間の10%、25%、50%、75%以降まで進んだとき
video_complete	動画が終了したとき

また、各イベントでは共通で下記パラメータが送信される仕様となっています。

パラメータ

パラメータ名	パラメータの詳細説明
video_title	動画のタイトル
video_url	動画のURL
video_percent	動画再生の進捗率　※0%、10%、25%、50%、75%、100%の6段階
video_current_time	動画の再生時間(秒) 　※video_percentに合わせた秒数
video_duration	動画全体の時間(秒)
video_provider	動画のメディア元　※YouTube動画の場合は「youtube」
visible	動画がブラウザの表示領域内で再生されているかの判定　表示されている：”true”、表示されていない：”false” 　※再生中の動画がスクロールして領域外にある場合や、　　別タブで非アクティブの場合、”false”となります。

参照：[GA4]自動収集イベント

では、実際にYouTube動画をデジタルブックに設定して計測する設定方法ついて解説します。

その前に、YouTube動画の作成について

デジタルブックに設定するYouTube動画については、以前お役立ち情報で紹介した「動画やスライド画像のダウンロードを禁止する方法」と同様に、コンテンツジェネレータで作成したコンテンツを利用します。

ご覧になっていない方は、まずはこちらをお読みください。

動画やスライド画像のダウンロードを禁止する方法

通常Webページから画像を保存するには、画像の上にカーソルをあわせて右クリックし、「名前を付けて画像を保存」を選択すれば可能になりますが、meclibのポップアップで配置した動画やスライド画像も同様で、右クリックから保存が可能です。 meclibをご利用のお...

YouTube動画をデジタルブックに設定して計測する設定方法

YouTubeの「JavaScriot API サポート」の設定

コンテンツジェネレータで作成したYouTube動画コンテンツに対し、以下の手順でトラッキングコードとパラメータ「enablejsapi」の設定を行ないます。

1.YouTube動画コンテンツ(zipファイル)を解凍し、その中に含まれる
「index.html」をテキストエディタなどで開きます。

2.下記コードの赤字を例に<head></head>内にトラッキングコードを設定し、
　<iframe>タグ内のURL末尾にパラメータ「enablejsapi」を追加します。

<html style="height:100%;">
　<head>
　　<!-- Global site tag (gtag.js) - Google Analytics -->
　　<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
　　<script>
　　　window.dataLayer = window.dataLayer || [];
　　　function gtag(){dataLayer.push(arguments);}
　　　gtag('js', new Date());

　　　gtag('config', 'G-XXXXXXXXXX',{
　　　　'send_page_view': false
　　　});
　　</script>
　</head>    
　<body style="height:100%;padding:0;margin:0;overflow:hidden;">
　　<iframe width="100%" height="100%" frameborder="0" style="background-color:#000000" 
　　　allow="fullscreen;　accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
　　　src="https://www.youtube.com/embed/XXXXXXXXXXX?enablejsapi=1">
　　</iframe>
　</body>
</html>

※トラッキングコードは、Googleアナリティクス管理画面の
　該当データストリームより[タグの設定を行なう] > [”管理”タブ]
　> [このGoogleタグを設定] > [”手動でインストールする”タブ]で
　取得いただけます。