AMPページをGA4対応させるため非公式な方法を試してみる

AMP化したWebページでもGA4（GoogleAnalytics4）を使ってアクセス解析するための方法を試してみることにしました。

AMPページでGA4を導入する方法を探してみると、ほぼ手段は限られるようですがUA（ユニバーサルアナリティクス）の使用期限が迫ってきていることから非公式な方法にはなりますが暫定対応することにします。

GA4での計測状況について

当記事を公開後のGA4を使ったAMPページの計測状況については、設定後約1か月経った時点でもAMPページでのアクセス数（UAとの比較）が安定していません。

とくにCDNにキャッシュされている割と流入が多いページで計測されていない傾向があるようで、もともと非公式な方法ですので情報も少なくこれ以上の対応は難しいかと思われます。

GA4でAMPサイトの計測「その後の経過」

※その後当サイトではAMP化を解除することにしました。

目次非表示

WordPressのAMPでGA4対応
- 一般的な手順を参考に子テーマでプラグインを編集
- JSONファイルを適正に配置
静的ページでは
GA4は測定データの表示が遅延する？
AMPページの維持について

WordPressのAMPでGA4対応

当サイトではプラグインを使って投稿ページをAMP対応しています。

・https://ja.wordpress.org/plugins/amp/

プラグインは「リーダー」モードに設定していますが、先日のアップデートで設定ページでの黄色の非推奨マークが無くなり青く囲われた「推奨」に変更されていました。

このAMPプラグインが生成するAMPページにGA4に対応させた計測用コードを書き出すことができればAMP HTMLで表示する投稿ページでもGA4を使ったアクセス解析が可能になります。

参考
GA4でAMPページを計測してるけど快適すぎｗカグア！ Creator Economy News

ネットにある情報ではプラグインを作って手動でインストールするとても便利な方法がありますが、当サイトでは別な手段でGA4を使ってみることにします。

MEMO

この記事を投稿した時点でWordPressのプラグイン用リポジトリにAMPでGA4を使えそうなプラグインがありますが、詳細が不明なため試用に至っていません。
また、Cocoonテーマでは今月に入りフォーラムでAMPページへのGA4対応について言及されているのを確認できています。

※その後Cocoonはバージョン2.5.7（2023年2月）でAMPでのGA4情報取得が対応されました。

一般的な手順を参考に子テーマでプラグインを編集

GA4をAMP対応させる方法として一般的によく知られている方法は、GitHubにあるJSONファイルをサーバーへアップロードして専用の計測コードをAMPページ内に挿入するという単純なものです。

参考
analytics-debugger/google-analytics-4-for-ampGitHub

具体的には、AMPプラグインで使用するsingle.php（ファイルの場所：/wp-content/plugins/amp/templates/single.php）というファイルを子テーマ内に作成したampディレクトリにコピーし、そこへGA4の計測用コード（Google非公式）を埋め込むとう方法です。

固定ページもAMP化している場合はpage.phpにも計測コードを追加することになります。

ampディレクトリへファイルをアップロード

single.phpファイル内へのタグの挿入箇所はfooterの開始タグの手前部分に記述しています。

計測用にプラグインを作成するよりは簡単ですが、この先AMPプラグインがアップデートされたときに子テーマに作成したファイルを新しく作成しなおす（コピペ作業で可）手間がかかります。

配置するコードは次の内容のものです。

計測タグ

<amp-analytics type="googleanalytics" config="https://example.com/・・・/child-theme/amp/ga4.json" data-credentials="include">
<script type="application/json">
{
    "vars": {
                "GA4_MEASUREMENT_ID": "G-xxxxxxxxx",
                "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
                "DEFAULT_PAGEVIEW_ENABLED": true,    
                "GOOGLE_CONSENT_ENABLED": false,
                "WEBVITALS_TRACKING": false,
                "PERFORMANCE_TIMING_TRACKING": false,
                "SEND_DOUBLECLICK_BEACON": false
    }
}
</script>
</amp-analytics>

上の一行目に書くURLは自サイト内にアップロードしたJSONファイルを指定（赤のマーカー部分をファイルをアップロードした自サイトのURLに変更）。

"GA4_MEASUREMENT_ID": は、GA4で計測するWebサイトの測定IDに書き換えます。

当初、ほかの参考サイトにあるコードのみを記載して試してみましたが、別URLにあるJSONファイルを指定してもうまく動作しないようでした。

また、AMP関連のファイルを編集するときは相対パスではファイルを参照できないケースがあるのでhttpsから記述する絶対パスで記載したほうが良いでしょう。

AMPプラグイン（AMP Project Contributors）には、もともとアナリティクス用のJSONを編集できる項目がありますが、そこに記述できるのは{}波カッコで括る部分だけなので、今回のように開始タグと終了タグをセットで記載する必要があるトラフィックコードの挿入には使えません。