はじめに

モバイルサイトを爆速にするためにGoogleが打ち出したプロジェクトであるAMP (Accelerated Mobile Pages)がウェブ開発者などで話題になり始めています。
日本でも、朝日新聞や毎日新聞のようなパブリッシャーが少しづつAMPに対応したページを作成しつついるとのことです。

そんなAMPですが、デフォルトではJavaScriptの利用に制限があり、Googleアナリティクスの導入には、iframeが必要だったのですが、2016年2月にAMP版のGoogleアナリティクスがリリースされ、iframeを使うことなく、AMPサイトでGoogleアナリティクスを設置できるようになりました。

ただ、AMP版Googleアナリティクスは今までのトラッキングコードと記述方法が全然違うので、簡易的にAMP版Googleアナリティクスを試せるようにしました。

AMP版Googleアナリティクスの導入方法

前提として、ページがAMPに対応している必要があります。ページのAMP対応を行う際は、公式: Accelerated Mobile Page Projectを参考にしながら実装するのが良いと思います。その上で、AMPページに対してGoogleアナリティクスを設置する際の手順は、

  1. AMP対応GoogleAnalyticsライブラリ(JavaScript)を読み込む
  2. >amp-analytics<タグを追加する
  3. >amp-analytics<タグの中に計測内容を記述する

という流れになります。3の実装方法は、今までのJavaScript版トラッキングコードとは全く異なる書き方なので、新しく学ぶ必要があります。例えば、単純にページビューを計測する場合の>amp-analytics<タグは、

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  },
  "triggers": {
    "trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

といった形になります。

通常のJavaScript版トラッキングコードと比較して、柔軟性は低い書き方である、というデメリットはあるものの、

  • 実装者間でトラッキングコードの書き方がバラつかなく、統一が取りやすい
  • JSON形式で書けるので、実装者からするとバリデーションが行いやすい
  • イベントトラッキングやカスタムディメンションなどにも一通り対応されている

という特徴があります。

簡易トライアルの利用方法

「AMP版Googleアナリティクスを使ってみたいけど、そんなサイト持ってない」という方向けに簡単にAMP版Googleアナリティクスを試すことができる特設サイトを作成しました。

この特設サイトは2ページという非常にシンプルな構成をしています。

  • AMP Analytics Config
    • http://amp.yama3.info/config.html
    • このページはAMPには対応していません。
    • このページのテキストエリアに設置したAMP版Google Analyticsトラッキングコードが実行されます。
    • デフォルトのトラッキングコードを記載しています。
  • Welcome to the mobile Web
    • http://amp.yama3.info/
    • このページがAMPで実装されたページになっています。
    • 「AMP Analytics Config」でトラッキングコードを設定し、リンククリックでこのページに遷移すると、設定した内容がトラッキングコードに設定されてページが表示されます。
    • ページは全く作り込んでいないですが、幾つかのclass/idなどは割り振っているので、開発者ツールなどで確認してみてください。

下記のキャプチャは、デフォルトのトラッキングコードで実行した時のページビューの送信ないようになります。
ちゃんと、必要なデータが送信されていることがわかります。

まとめ

モバイルウェブの重要性が加速する中、発表されたAccelerated Mobile Pagesプロジェクト。日本のGoogle検索エンジンに置いても早ければ2016年2月後半にはAMP対応を行う、ということなので、気になっている方はAMP対応を考えてみてはいかがでしょうか。