AMPページにMatomo Analyticsのトラッキングタグを埋め込む方法

AMPフレームワークで構築したページに、オープンソースアクセス解析ツール・Matomo Analyticsのトラッキングタグを埋め込む方法をまとめました。使えない方法もまとめてあります。

Matomo Analyticsのトラッキングコード(Javascript)はAMPページでは使えない

Matomo Analyticsのトラッキングコードは、Javascriptで動くように設定されています。

あなたのウェブサイトとウェブアプリケーションを複数のPiwikに追跡させる方法と、簡単かつ効率的に行う方法に関する完全なガイド

一方で、AMPページはJavascriptの実行を許可していないので、通常のMatomo Analyticsのトラッキングコードが利用できません。

解決方法

amp-analyticsを使う

現状で、この問題を解決する方法は「amp-analytics」モジュールを使う方法です。

amp-analytics | amp.dev

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}&gt_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のトラッキングを使いたい方は参考にしてみてください。

参考:How to add piwik to amp pages?