AMP Plugin Ver 0.3.1 を 使ってみた
AMPページにアナリティクスを設定しよう!!
AMP Plugin を 使用している場合
こちらの方法で Analytics の 設定をした方が ミスが少ないかもしれません
こちらを 推奨します
AMP Plugin Ver 0.3 系 には アナリティクスを 設定するための フィルターがあった!!
https://tekuaru.jack-russell.jp/2016/03/14/781/
AMP では 様々な 制約があり JS 等 が使えなかったり
一部のタグが カスタムコンポーネントに 変わっていたりします
こちらの詳しいことが知りたかったら 検索してみてください
通常 の Google Analytics は JS ですので そのままでは使えないので 加工して使います
JS が 使えない代わりに
いくつか カスタムコンポーネント が 用意されています
その中の一つに amp-analytics というものが用意されていて
そんなに 難しいことをしなくても アナリティクス の 対応ができます
まずは single.php の head 内 に amp-analytics の コンポーネント を ロード します
head 内 に 追記するのは たった 1行 ここから ここまで の 間のヤツです
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> /* ここから */ <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> /* ここまで */ <?php do_action( 'amp_post_template_head', $this ); ?> <style amp-custom> <?php $this->load_parts( array( 'style' ) ); ?> <?php do_action( 'amp_post_template_css', $this ); ?> </style> </head>
次に body 内に JS の 代わりの コードを書いていきます
まずは 普段使っている アナリティクス です
ここで 重要なのが UA-XXXXXXXX-Y の 部分です
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
次に AMP の コード になります
<amp-analytics type="googleanalytics" id="analytics-amp">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
AMP の コード の UA-XXXXXXXX-Y の 部分を
普段使っているコードと 同じものと 差し替えて 使ってください
上の コードは 単純に ページビュー を 計測するもので
他に クリックイベント 等の 設定もできるみたいです
アナリティクス で 正しく計測されているか 確認してみましょう
PC から の 確認だと 正しく計測されなかったので
スマホから アクセスして リアルタイムで 計測されているか 確認してみてください
