AMP対応ページでのMatomoアクセス解析 by Google Blogger
AMP Google Blogger
Published: 2018-06-17

Google アナリティクスに関しては以下の様にすれば、WordPressでもGoogleBloggerでも機能します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- Google Analytics -->
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  "vars": {
    "account": "UA-xxxxxxxxx-x"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

↑の様にアナリティクスIDを設定したタグを貼り付ければOKです。

(通常に生成されるアナリティクスコードとは異なるので注意が必要です)

 

WordPressならばプラグインの「AMPforWP 」を使えば、通常のjavascript解析(例えば、https://matomo.jp/)のタグも機能しています。

ですがGoogleBloggerの場合はWordPressの様な便利なプラグインは無いのでそのままでは機能しません。

調査したらここに答えがありました。

https://forum.matomo.org/t/how-to-add-piwik-to-amp-pages/18424/4

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

↑のコードをヘッダに貼り付けます。

<amp-analytics><script type="application/json">
{
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    },
    "requests": {
        "base": "https://piwik.example.org/piwik.php?idsite=1&rec=1&action_name=${title}&url=${sourceUrl}&rand=${random}&apiv=1&urlref=
        ${documentReferrer}&res=${screenWidth}x${screenHeight}&lang=${browserLanguage}
        >_ms=${serverResponseTime}&cs=${documentCharset}
        &_cvar={\"1\":[\"errorName\",\"${errorName}\"],\"2\":[\"errorMessage\",\"${errorMessage}\"]}",
        "pageview": "${base}"
    }
}
</script></amp-analytics>

↑のコードをbodyタグ直下付近に貼ります。

但し、↑の「https://piwik.example.org」の部分が自分でインストールしたMatomoの環境に合わせて書き換えが必要です。

コード内の&記号を&に書き換える必要がある場合もあります。

加えて、通常のMatomoのコードはheadタグの終わりに書くのですが、こちらはBodyタグ内なので注意が必要です。

Googleアナリティクスは凄いとは思いますがリアルタイム解析が苦手です、Matomoであればそのあたりも充実しているので大変便利に使わさせて頂いております。

 

今日から実践で使える!Google アナリティクス講座

 

関連記事