GA4を非公式方法でAMPサイトに適用する方法

Google Analytics 4は未だ公式にAMPに非対応

Google Analytics 4(GA4)が登場して2023年7月1日でサポート終了が発表されているにも関わらず、は未だ公式にAMPに非対応の状態が続いています。

しかし、有志の方がAMPにてGA4に対応するコードを公開してくれています。

How to track AMP Pages with Google Analytics 4

今回は、この方法を使ってAMPページでGA4によるトラッキングを行ってみます。

設定方法

必要なファイルを自ドメイン配下に設定する

まず、設定をするにあたって、ga4.jsonという設定ファイルを自ドメイン配下におく必要があります。

Githubで公開されているので、そちらを使わせてもらいましょう。

analytics-debugger/google-analytics-4-for-amp

配置場所は自ドメイン下であればどこでもOKです。自ドメイン下でないとCORS問題でロードがされません。

配置場所は、amp-analyticsの設定記述で指定をします。

<amp-analytics type="googleanalytics" config="https://自分のAMPサイトのドメイン/ga4.json" data-credentials="include">

amp-analyticsのampコードを記述する

ここまで出来たら、あとはトラッキングのためのampコードを記述するだけです。amp-analyticsコンポーネントを使いますので、headでロードしておきます。

続いて、ページのbodyの閉めタグの上に下記のようにampコードを記述します。変更する点は、「GA4_MEASUREMENT_ID」だけでOKです。

<amp-analytics type="googleanalytics" config="https://自分のAMPサイトのドメイン/ga4.json" data-credentials="include">
<script type="application/json">
{
    "vars": {
                "GA4_MEASUREMENT_ID": "G-XXXXXXXX", // ここを書き換える
                "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>

下記の指標については、必要に応じてfalseをtrueにしましょう。

DEFAULT_PAGEVIEW_ENABLED
GOOGLE_CONSENT_ENABLED
WEBVITALS_TRACKING
PERFORMANCE_TIMING_TRACKING
SEND_DOUBLECLICK_BEACON

これでだけの設定で、ページビューやセッションスタートなど、基本的な指標がAMPページでも取得できます。

クリックなどのイベントを取得する方法

クリックイベントを追加する際は、かつてのGoogle Analytics（Universal Analytics = UA)と同様にonclickをトリガーとしたイベントを追加してあげればOKです。

なお、UAではクリックなどは「イベント」として別枠で取得していましたが、GA4はページビューやセッションも全てイベントです。

クリックイベントは、先程のAMPコードに「triggers」というデータを追加して設定します。

"triggers": {
    "CartAdd": {
        "selector": ".cart",
        "on": "click",
        "request": "ga4Event",
        "vars": {
            "ga4_event_name": "CartAdd"
        }
    }
}

注意したいのは、requestが「event」ではなく「ga4Event」という点です。JSONデータを複数書けば、複数のクリックイベントを設定出来ます。

先程の基本設定と組み合わせると下記のようになります。

<amp-analytics type="googleanalytics" config="https://自分のAMPサイトのドメイン/ga4.json" data-credentials="include">
<script type="application/json">
{
    "vars": {
                "GA4_MEASUREMENT_ID": "G-XXXXXXXX", // ここを書き換える
                "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
    },
    "triggers": {
        "CartAdd": {
            "selector": ".cart",
            "on": "click",
            "request": "ga4Event",
            "vars": {
                "ga4_event_name": "CartAdd"
            }
        }
    }
}
</script>
</amp-analytics>

基本的なデータ取得だけですが、これでAMPページでもGA4が使えるようになります。