2018年10月15日YouTube埋め込み動画の再生ボタンのクリックカウントを、YouTube IFrame APIで取得するには

Google AnalyticsはYouTube埋め込み動画を解析できるか

Webサイトのアクセス解析でいま最も広く使われているのはGoogle Analyticsで、国内企業サイトの約8割が使用しているそうです。(※)

Google Analyticsの特長は、何といっても無料の割に機能が充実していることです。ページ単位のアクセス数・アクセス経路解析はもちろん、ページ内の要素へのアクションも、個別の要素ごとに「イベントトラッキング」設定のコーディングを行うことで解析できます。対象はファイルのダウンロード、広告のクリック、動画の再生など多岐にわたります。

ところが、このGoogle Analyticsでの解析について、Web担当者が悩まされることもたびたびあります。その1つが、ページ内に埋め込んだYouTube動画です。

※参照：83％の企業がGoogleアナリティクスを利用！ 上場企業が利用しているWebサービスTOP100を公開|Web担当者Forum
　https://webtan.impress.co.jp/n/2017/09/01/26737

YouTube埋め込み動画を解析する方法

YouTubeの動画をWebサイトに埋め込む際は、通常再生ページから生成できるiframeタグをコピーしてHTML内に埋め込む手法が一般的です。が、インラインフレーム内はYouTubeの領域であり、再生ボタン等にイベントトラッキングのコーディングを自由に行うことはできません。 これについては、ある程度代替策がありますが、いずれも課題が残ります。

(1)YouTube Analyticsで解析

YouTube Analytics (YouTubeのアクセス解析画面)を使うと、動画の再生回数等が表示できます。また、参照先を見ることで、埋め込まれたサイト別の再生回数も取得できます。

・メリット……追加作業なしですぐに実行できます。

・デメリット…表示する画面が分かれ、管理が煩雑になります。また、Google Analytics・YouTube双方のアクセス権が必要になるため、複数の担当者や外部協力会社が絡む場合、この手段を取れないことがあります。

(2)Google Tag Managerを使用

Google Tag Manager内に、YouTubeの動画再生・停止に連動したJavaScriptをカスタムタグとして設定することで、Google Analyticsでの解析が可能になります。

・メリット……Google Tag Manager内の比較的少量のコーディングで解決でき、HTMLファイルを直接変更する手間が不要になります。

・デメリット…Google Tag Manager・Google Analytics双方へのアクセス・編集権が必要になるため、複数の担当者や外部協力会社が絡む場合、Google Tag Manager管理者にタグを渡して設定してもらったりと、やり取りが煩雑になります。

そこで、本記事では、もう一つの方法

(3)YouTube IFrame APIを使い、Javascriptでiframeタグを代替する

について解説します。

YouTube IFrame APIでYouTube動画のクリックイベントをGoogle Analyticsに送信

YouTube IFrame Player APIの概要

YouTube IFrame Player APIは、iframeタグの代わりに、自サイトからJavaScriptでYouTube動画のプレーヤーを呼び出し、表示・再生等を制御するためのAPIです。

以下のようなメリットとデメリットがあります。

・メリット……JavaScriptで表示イベントの細かな制御が可能です。

・デメリット…必要な処理をすべてJavaScriptで書く必要があり、タグを埋め込むだけの作業に比べて手間がかかります。が、逆に言えば、JavaScriptが書ければ何とでもなります。

手順

(1)HTML内にタグを設置

・動画を設置したい場所に、プレーヤーのタグをdiv等で配置します。このとき、動画ごとにプレーヤーの識別名をidに入れておきます。

・以下(2)～(4)の処理をJavaScriptで記載し、同じHTMLの内に埋め込みます。

(2)初期設定

・Google Analyticsに送信するイベントのカテゴリを、location.href(現在のURL)に指定します。

・YouTubeのAPIを読み込みます。

・変数・関数の初期設定を行います。

(3)動画読み込み

・プレーヤーを呼び出し、動画を読み込む処理を行います。ここではYouTubeの動画再生時の各種パラメータを指定できます。

・再生準備完了時、および再生開始時に行う処理を指定します。

(4)動画再生時

・動画読み込み時の設定を行います。

・再生開始時に、再生開始のイベントトラッキング情報をGoogle Analyticsに送信します。

※参照：
　iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google Developers
　https://developers.google.com/youtube/iframe_api_reference?hl=ja
　YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame Player API | Google Developers
　https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ja

まとめ

YouTube IFrame Player APIを活用することで、YouTube動画のアクセスをGoogle Analyticsで解析しやすくなります。ユーザーの行動をより深く追跡できるようになり、マーケティングにとってプラスになるので、サイト内にYouTube動画を埋め込んでいる方におすすめです。

マックスマウスからのお知らせ