本記事で触れているGoogleアナリティクスは、ユニバーサルアナリティクス（UA）を前提としています。
GA4を対象とした記事ではございませんので、ご注意ください。
目次
AMPとは？
AMPページにおける動画の貼り付け方
Youtubeにホスティングされている動画を読み込む場合
自身のサーバー上に動画をホスティングしている場合
amp-analyticsでの動画計測の方法
対応している動画サイト
トラッキングコード(JSON版)
イベント計測コードのフォーマット
video-seconds-playedで指定するオプション
実際にやってみよう
テストに使用したAMP HTML
テストに使用したAMP Analyticsの計測コード
Tips
計測されたレポート画面サンプル
他にもできるAMPでの計測カスタマイズ
まとめ
AMPとは？
AMP（Accelerated Mobile Pages）とは、モバイル端末を中心にWebページを高速表示させるためのプロジェクト（またはそのフレームワーク）を指します。AMPを使って実装されたページは、高速に画面表示が行える反面、ページ内で自由にJavaScriptを使うことができなかったり、HTMLとして利用できるタグの種類が限られている、などの制限があります。
一方で、AMPのユーザー・インターフェースとなる仕様は、GitHub上の公開された場で開発が行われています。そのため、AMPに取り入れて欲しい機能については、GitHubのIssueを立てて議論することで、プロダクトに反映される可能性があります。また場合によっては、自身が要望する機能を自分自身で開発することも可能です（開発した結果、その機能が製品に取り込まれることもあれば、却下されることもあります）。実際、自分自身も機能要望をいくつか出したり、サンプルサイトのバグフィックスを行なったりしています。
AMPページにおける動画の貼り付け方
AMPページに動画を埋め込むには、<amp-video>タグや<amp-youtube>タグなどを用います。埋め込む動画がYoutube上にホスティングされている時は<amp-youtube>タグを用い、自身のサーバー上などに動画をホスティングしている場合は<amp-video>タグを用います(実際には、他にもbird-playerやdailymotion, ima-videoなど海外の動画サービスにホスティングされている動画を埋め込む時に用いることができるタグも存在します)。
Youtubeにホスティングされている動画を読み込む場合
まず、Youtube動画用のJavaScriptライブラリを読み込む必要があります。このライブラリは、<head></head>内に下記のコードを追加することで読み込むことができます。
次に、HTML上の動画を読み込みたい場所に<amp-youtube>タグを設置します。<amp-youtube>タグ内では、Youtubeの動画IDを指定する必要があります。Youtubeの動画IDは、動画ページのURL「https://www.youtube.com/watch?v=xxxxxxx」の中のxxxxxxxの部分が該当します。事前に埋め込みたいYoutube動画の動画IDを確認しておきましょう。
設置する<amp-youtube>タグは、
<amp-youtube data-videoid=”xxxxxxx” layout=”responsive” width=”480″ height=”270″></amp-youtube>
などのように指定します。「data-videoid」属性の値には、先ほど確認した動画IDを指定してください。
自身のサーバー上に動画をホスティングしている場合
自身のサーバー上などに動画をホスティングしている場合は、<amp-video>タグ用のライブラリを読み込む必要があります。このライブラリは、<head></head>内に下記のコードを追加することで読み込むことができます。
次に、HTML上の動画を読み込みたい場所に<amp-video>タグを設置します。
<amp-video width=”480″ height=”270″ src=”動画ファイルのURL” layout=”responsive” controls>
<source src=”動画ファイルのURL”></source>
</amp-video>
動画設置時に指定できる属性は多数あるので、AMP by Exampleなどを適宜参照すると良いと思います。
amp-analyticsでの動画計測の方法</h2自身のサーバー上に動画をホスティングしている場合>
対応している動画サイト
AMPプロジェクトのGithub内のVideo Analyticsに関する仕様のページによると、<amp-video>タグを使った埋め込み動画については全ての機能をサポートしているものの、<amp-youtube>タグを始めとする外部ベンダーが提供するタグを使った埋め込み動画については部分的なサポートに留まっているようです。しかしながら、サポートしていない機能は、「currentTime」「duration」「playedRangesJson」「playedTotal」の4つの変数のみなので、大きな影響はないと思います(これらの機能を計測に用いたい場合は、<amp-video>タグを利用する必要があります)。
トラッキングコード(JSON版)
AMP版のGoogleタグマネージャはまだ動画トラッキングに対応していません。そのため、動画トラッキングを行いたい場合は、AMP版Googleタグマネージャを用いるのではなく、amp-analytics標準のJSONを用いるトラッキングコードを利用する必要があります。また、動画トラッキングに限らず、AMP版Googleタグマネージャは現時点では制限が多くできないことが多いため、様々な計測を行いたい場合はタグマネージャを利用するのではなく、標準のJSONを用いるトラッキングコードを利用するのが得策です。
イベント計測コードのフォーマット
イベント計測のための基本フォーマットは下記のようになります。
“on”の値として設定している「video-play」は計測対象のタイミングが再生開始時であることを意味しています。”selector”の箇所は対象の動画を指定するためのCSSセレクタを入れます。これをamp-youtubeとすることで、<amp-youtube>タグ全てが計測対象となります。”vars”の中では「イベントカテゴリ」「イベントアクション」「イベントラベル」の値をそれぞれ指定します。この例では、イベントカテゴリ「Youtube」、イベントアクション「playing_manual」(AMP変数「state」はvideo-playイベントに対しては、playing_manualまたはplaying_autoが設定されます)、イベントラベル「該当DOM要素に設定されているID属性の値」のパラメーターでイベントが送信されます。
また、”on”の箇所を変更することで、イベントを送信するタイミングを変えることができます。「”on”の箇所に指定できる属性名」と「その時に”state”で返される値」「そのイベントタイミング」をまとめると下記の表のようになります。stateの値が少し一貫性がないのが気になります。
video-sessionなし動画の閲覧を終了したタイミングvideo-seconds-playedなし指定された秒数ごとにイベントを送信
| “on”に指定できる属性名 | stateで返される値 | タイミングについて |
|---|---|---|
| video-play | playing_autoまたはplaying_manual | 再生開始のタイミング |
| video-pause | paused | 再生が一時停止されたタイミング |
| video-ended | なし | 動画の再生が完了したタイミング |
video-sessionイベントは、動画の再生を開始した後「一時停止を行う」「最後まで再生する」「動画がスクリーンアウトする(ページ遷移も含めて)」のタイミングで実行されます。
<amp-video>タグを使うケースでは、duration変数と組み合わせることで、動画の再生時間を取得できそうです。
※注意： <amp-youtube>タグにおける「video-ended」については、2018年1月18日現在不具合により計測できていないようです。
video-seconds-playedで指定するオプション
video-seconds-playedでは、イベント送信する間隔をvideoSpec機能のinterval属性で指定します。下記は、10秒ごとにイベントを送信する時の実装例です。
実際にやってみよう</h2video-seconds-playedで指定するオプション>
テストに使用したAMP HTML
今回は、Githubのampstartプロジェクトのソースコードをローカルに取得し、ページ内に下記のHTMLコードを追加してテストしてみました(xxxxxxの箇所には動画IDを指定しています)。
テストに使用したAMP Analyticsの計測コード
今回は、下記のような計測コードとしました。
Tips
今回のサンプルコードには、いくつかのTipsが散りばめられています。ここでは、3つを紹介します。
再生継続時間の計測
今回、再生継続時間の計測には、video-seconds-playedイベントを用いました。このイベントでは、一定時間ごとにイベントが送信されます。
ただ、この機能だけでは「再生時間を取得することができない」という欠点があり、<amp-youtube>タグではこの「再生時間」を取得する方法はありません。
そこで、amp-analyticsの標準機能である「counter」変数を用いています。この「counter」変数は、呼び出されるごとにインクリメントされて行きます。
結果、video-seconds-playedイベントを10秒ごとに実行するようにし、イベントアクションを”Playing ${counter}0 Seconds”とすることで、結果的に”Playing 10 Seconds”, “Playing 20 Seconds”, “Playing 30 Seconds”のように10秒ごとに経過時間をアクション名に含めてイベントを実行することができます。
イベントアクションの値
イベントアクションの値にはAMP変数「state」を今回は使いませんでした。
理由としては「サポートしているイベントが僅かである」「非AMP版における動画計測の命名ルールと揃えたい(今回は、GoogleタグマネージャのYoutubeトリガーの命名規則にできるだけ揃えています)」の2点です。
イベントラベルに動画を特定するためのIDを指定
どのイベントでもイベントラベルには、「どの動画に対するイベントか？」を特定するための動画IDを指定しています。動画IDは、<amp-youtube>タグのID属性を取得しています。これを行うことで、標準のGoogleアナリティクスレポートでも、表示方法をピポットテーブル形式にし、縦軸に「イベントラベル」、横軸に「イベントアクション」を置くだけで、通常より見やすいレポートになります。実際のレポート画面は、下記のレポート画面サンプルでご確認ください。
計測されたレポート画面サンプル
まとめ
AMPサイトにおけるアクセス解析は、Cookieの問題だけが大きく取り上げられています。しかしながら、GithubにおけるamphtmlのIssueなどを追っていくと、他にもたくさんの落とし穴があったり、制約の中でも思いがけない計測ができたりします。例えば直近では、「現状、AdwordsのAMP広告を利用すると、iOS SafariにおいてITPの影響でコンバージョンが計測できない問題」がありますが、この問題をクリアするための修正も着々と進められています。
とはいえ、AMPのリポジトリを追っていくのは思いの外手間がかかりますので、AMP関連の解析に関わる方は私が以前に執筆した記事「AMP Analyticsのソースコードを読んで分かった最新事情」も参考にすると良いと思います。
