PAK86_seisakudb20140517_TP_V

前回の記事でWordpressのプラグインでAMPを導入してみました。そこで、作ったからにはアクセス解析もできるようにしたいと思い、Googleアナリティクスを導入してみました。

導入

AMPは基本的に高速でページを表示させるため、基本的にjavascriptは実行されません。

また、今回使用しているWordpressのAMPプラグインjavascriptも省略されてしまうためこのままではアクセス解析ができません。

そこで、プラグインを編集してアクセス解析ができるようにします。

  1. AMPプラグインの中の amp/templates/single.phpのhead要素の中にこちらを入れます。
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  2. body要素の中にこちらのスクリプトを入れます。私は今回、bodyの直下に記述しました。
    <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
    {
     "vars": {
     "account": "UA-XXXXX-Y"
     },
     "triggers": {
     "trackPageview": {
     "on": "visible",
     "request": "pageview"
     }
     }
    }
    </script>
    </amp-analytics>

    UA-XXXXX-Yの部分には、GoogleアナリティクスのトラッキングIDを記述してください。
    トラッキングIDはAMP用に別途用意したほうが良いようです。

確認

上記の設定が上手くいっていれば、googleアナリティクスのリアルタイム計測に表示されるようになるはずです。私は今回特定の記事が上手く取得できない状態になったのですが、新たに記事を追加したところ全ての記事で上手く取得できるようになりました。原因は分かっていませんがWordpress側のパーマリンクを保存し直したほうが良いかもしれません。

また、今回プラグインを直接編集しましたが、このプラグインは開発途中のためアップデートがあると思います。その際に今回の編集部分は上書きされて消えてしまうのでアップデート後は最後編集し直してください。

今回はこちら参考にさせていただきました。こちらにはイベントトラッキングの方法も記述されています。

 

このブログを書いた人

瀬高博文
プログラマです。言語はC,C++。現在はWebサイトやスマートフォンアプリ作成のためにPHP,JavaScript,Objective-C,MySQLを勉強中です。
この人のすべてのブログを見る