てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています


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 から の 確認だと 正しく計測されなかったので
スマホから アクセスして リアルタイムで 計測されているか 確認してみてください


Related Article

サイトヘルス から AMPの改善が必要 って 言われた

詳細へ »

Chrome リモート デスクトップ の Web版 が できてた

詳細へ »

WordPress の 公式ディレクトリ に プラグイン を 登録 してみた – No 1

詳細へ »