GA こと Google アナリティクス が AMP に対応したようだ

みんな大好き GA こと Google アナリティクス 。ブロガーから企業サイトまでほとんどの Web サイトで使われているであろう、現代の Web アナリティクスの(ほぼ)デファクトスタンダード。
ところが、昨年10月に同じく Google から AMP なるものが発表されて、GA はどうなるんだろうと思っていたら、ひっそり対応が発表されていたのでメモ。

GA こと Google アナリティクス が AMP に対応したようだ

そもそも AMP って?

このページに自力で辿り着く人で知らない人はいなそうだけど。
主にスマホでサイトを見るときに、高速でページが表示されるように最適化した、拡張した html の書き方。
例えば、画像は <amp-img> っていうタグで書き、AdSense などの広告は <amp-ad> で、動画なら <amp-video> で、という具合。
で、この最適化のために、画面の描画をブロックするような JavaScript などは使えない= Google アナリティクスも使えないんじゃないの?ということで、みんなヤキモキしてる(と思う)。

GA で AMP ページを計測するには?

そんな中、周囲のヤキモキを察したのか、AMP ページで GA を使ってやろうという気概を感じさせる投稿が海外のブログなどで報告される。
例えば、下記のサイトでは、amp-pixel タグでGAのデータ計測用の API 「Measurement Protocol」に計測データのリクエストを送る方法を紹介している。

<amp-pixel src="https://www.google-analytics.com/collect?v=1&t=pageview&z=$RANDOM&dt=$TITLE&dl=$CANONICAL_URL&tid=UA-XXXXXX-YY&cid=$CLIENT_ID('google-analytics')" /> パラメータの意味は、
$RANDOM : キャッシュ対策の乱数
$CANONICAL_URL : AMP じゃないページのURL
...(以下略、詳しくは下記原文ページ参照)...
How To Implement Google Analytics Using AMP | LunaMetrics(英語)より

そんな中 GA が公式対応を発表

周囲からの要請がよほど大きかったのか、GA公式も AMP 対応を公式ブログで発表
英語だけですが、開発者向けのドキュメントも公開され、AMP ようの GA利用方法が詳しく紹介されてます。

AMP 向けの GA ってどうやって実装するの?

手順としては、

  1. AMP対応GA 用のJSをロードする
  2. <amp-analytics> タグを書いて、
  3. その中に計測内容を記述する

という流れの模様。

1. AMP対応GA 用のJSをロード

AMP対応のためには、拡張用のライブラリを読み込まないといけないとかで、具体的には、タグのAMP JS ライブラリの「前に」、拡張用のJavaScript をロードするように記述する必要がある。

gist.github.com

2.<amp-analytics>タグを書く

そして、<amp-analytics>タグを以下のように書いて、 ... の部分に計測したいコードを書く。
gist.github.com

3.計測内容の記述

例えば、これまでのページビュー計測は、以下のようなタグを書いていたが、
gist.github.com
これが amp 対応のタグだとこうなる↓
gist.github.com
ざっくりと、
* トラッキングコードのIDを、vars -> account の引数に書く
* triggers の中が計測内容を表していて、
* trackPageview ってのがページビューを計測しますよ、という意味
* "on": "visible" ってのは、ページが表示された時に計測しますよ
* request の中に細かい計測内容を書いていく
ということらしい。クリックの計測は "on":"visible" が "on":"click" になる感じ。
gist.github.com

Googleアナリティクス 関係のその他のコンテンツ

datalove.hatenadiary.jp datalove.hatenadiary.jp

参考:
Analytics Blog: Announcing GA Support for Accelerated Mobile Pages (AMP) Analytics(英語)
Adding Analytics to your AMP pages  |  Analytics for AMP Pages  |  Google Developers(英語)
Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web(英語)
How To Implement Google Analytics Using AMP | LunaMetrics(英語)