Matomo Analyticsのトラッキングコード(Javascript)はAMPページでは使えない
Matomo Analyticsのトラッキングコードは、Javascriptで動くように設定されています。
あなたのウェブサイトとウェブアプリケーションを複数のPiwikに追跡させる方法と、簡単かつ効率的に行う方法に関する完全なガイド
一方で、AMPページはJavascriptの実行を許可していないので、通常のMatomo Analyticsのトラッキングコードが利用できません。
解決方法
amp-analyticsを使う
現状で、この問題を解決する方法は「amp-analytics」モジュールを使う方法です。
HTMLヘッダで、ライブラリを読んで、
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
下記のフォーマットで、ページの最下部、bodyの閉めタグよりも前に記述します。
<amp-analytics><script type="application/json">
{
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
},
"requests": {
"base": "https://Matomo Analyticsのサーバードメイン/matomo.php?idsite=Matomo AnalyticsのサイトID&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>
- Matomo Analyticsのサーバードメイン
- Matomo AnalyticsのサイトID
の2箇所だけ変更すれば、その他の部分は変更せず、そのまま使えるコードになっています。
amp-scriptを使う -> 使えません
AMPフレームワークには、最近独自スクリプトを実行できる「amp-script」が実装されました。一見、このamp-scriptを使えばMatomo Analylticsのトラッキングコードを実行できそうですが、amp-scriptのJavascript実行環境は、通常のブラウザのJavascript環境から特定のメソッドなどを制限したものなので、Matomo Analyticsのトラッキングコードが実行できません。
イメージトラッキングをamp-imgで読み込む
これも一見大丈夫そうに見えますが、amp-imgが読み込むURLが画像になっていないから、しっかりとロードしてくれません。
AMPページにMatomo Analyticsのトラッキングタグを埋め込む方法を見てきました。
GoogleなどのAMPキャッシュからだとトラッキングがされないという声もあるため、完璧ではないかもしれませんが、きちんと動作はするので、AMPページでMatomo Analyticsのトラッキングを使いたい方は参考にしてみてください。