takkaaaaaの日記

趣味について書いている個人ブログです

WordPressのAMPプラグイン×GoogleAnalyticsの設定が上手くいってなかったので再設定した


公開日:
カテゴリ: Wordpress
タグ:
※本ブログには広告が含まれます

こんばんは。たまにはブログとWordpressの技術的に真面目なことも書いておきますね。アクセス解析をしているGoogle Analyticsを見ていて、最近ブログのアクセス数が減ったなぁとか、謎のリファラスパムが多いなあとか思っていたところだったんですが、その中に、参照元が「cdn.ampproject.org」のアクセスも紛れていました。

うちは雑記ブログだけどAMPページが読まれるようになったか、と思ったんですけど、よく考えると「参照元」だからAMPページからうちのブログ本体に遷移してきたことを示しているわけで、AMPページそのものへのアクセスは捕捉し逃しているんじゃないか?と疑問になりました。

そこで、ちゃんと調べて、AMPプラグインとGoogle Analyticsの設定をやりなおしましたよ。その方法をブログに書いておきますね。

AMPプラグインとGoogle Analyticsの設定

なお、この記事を書いている時点で自分の使っているAMPプラグインのバージョンは0.4.2になります。AMPプラグインの設定はWordPress管理画面でできないし、ググってもピンとくる解説ページがすぐには見つからなかったのですが、AMPプラグインとGoogle Analyticsの設定方法がAMPプラグインのreadme.txtに書いてありました。

readme.txtファイルのパスはここだと思います。
[WordPressのインストールディレクトリ]/wp-content/plugins/amp/readme.txt

readme.txtの中に以下の記述があります。

= What about analytics? =
Many plugins are adding AMP support already. If you handling analytics yourself, please see https://github.com/Automattic/amp-wp/blob/master/readme.md#analytics

言われたとおりに、https://github.com/Automattic/amp-wp/blob/master/readme.md#analyticsにアクセスしてみると設定方法が確かに書いてありました(英語)。(後でわかったのですが、同じ内容がreadme.txtと同じディレクトリのreadme.mdにも書いてあります)

上記サイトは英語なので日本語で私の行った設定を書いておくと、自分のWordPressテーマディレクトリにあるfunctions.phpに以下のコードを追記しました。

add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
  if ( ! is_array( $analytics ) ) {
    $analytics = array();
  }
  // https://developers.google.com/analytics/devguides/collection/amp-analytics/
  $analytics['xyz-googleanalytics'] = array(
    'type' => 'googleanalytics',
    'attributes' => array(
      // 'data-credentials' => 'include',
    ),
    'config_data' => array(
      'vars' => array(
        'account' => "自分のGoogle AnalyticsのIDみたいなやつ(UA-XXXXXXXX-Y)"
      ),
      'triggers' => array(
        'trackPageview' => array(
          'on' => 'visible',
          'request' => 'pageview',
        ),
      ),
    ),
  );
  return $analytics;
}

※上記はWeb上で見やすくするためにインデントを全角スペースにしているので、実際にfunctions.phpに記載する時は半角スペースかタブにしてくださいね。

で、上記を追記したfunctions.phpをサーバにアップロードして、再び自分のサイトの適当なページのampページ(URLの最後に/amp/をつける)にアクセスしてみると、Google Analyticsのリアルタイム-サマリにタイミング的に自分っぽいアクセスが表示されました。また、AMPページのソースを見ると、以下のようにAMPページにGoogle Analyticsのコードが出力されているのを確認できました。

head部・・・<script custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js” async></script>

</body>の直前・・・<amp-analytics id=”xyz-googleanalytics” type=”googleanalytics”><script type=”application/json”>{“vars”:{“account”:”UA-XXXXXXXX-Y”},”triggers”:{“trackPageview”:{“on”:”visible”,”request”:”pageview”}}}</script></amp-analytics>

GoogleAnalytics上ではAMPページへのアクセスの場合、ページのタイトルは通常のページと同じなんですが、URLが末尾に/amp/が付いて記録されていました。なので、AMPページと通常のページのアクセス数などを別々に見たい場合はページのURLで見たほうがいいですね。(もっといい方法ありそうですが)

終わりに

以前に一度GoogleAnalyticsの設定をしたと思っていたのですが、もしかしたら、AMPプラグインディレクトリ内のテンプレートに直接書いていた設定だったため、AMPプラグインをアップデートしたときに消えたりしたのかもしれません。もう何か月も前のことだから忘れちゃった・・・笑。

とりあえず、最近アクセス数が減ってると思ってたけど、そうでもなかったのかもしれないということがわかって、少しホッとしました。また、うちのブログのような雑記ブログでもAMPページでアクセスされていることがわかって驚いてます。何となく技術的に面白そうだからAMP対応してたんですけど、ニュースサイトとかしか恩恵がないと思ってました。でも、このブログは芸能エンタメネタの記事が多いからかもしれないし、ジャンルによってどうなんだろう?というのはあるかもしれませんね。

takkaaaaaの日記トップページへ

私のブログを読んで頂き、ありがとうございます。管理人のtakkaaaaaです。

2013年から書き始めて、読んでくれた方に少しでもお役に立てればいいなと思って発信しています。よろしくお願いいたしますm(_ _)m

  • Location : 北海道の十勝地方出身、横浜市在住
  • Work : システムエンジニア・プログラマー(10年以上)
  • Interest :
    • ・音楽鑑賞(aikoのファンクラブに入ってます)
    • ・園芸・ガーデニング(観葉植物やイチゴやバジルなど)
    • ・投資・税金・節約(FP3級と日商簿記3級を保有)

詳しいプロフィールを見る
メッセージを送ろう