🚧

【追記：AMPにも対応！】AMP対応のサイトでGA4はまだ使えません。従来のGoogle Analytics (UA) を使いましょう

2021/04/05に公開

追記その２：公式からAMPにもGA4対応したとのアナウンスがありました

UAでのデータ収集終了の数日前というギリギリのところで公式よりアナウンスがあったようです。
以下は日本語の記事で、AMPのGA4サポートに関する概要や設定方法へのリンクなどがわかりやすくまとめられていますので気になる方は読んでみてください。

追記終了。

本文ここから

ここ最近は自身で開発している Habanero Bee のことばかり書かせていただいていますが、今回はHabanero Beeを開発する上で分かった、AMP対応に関することを書いていこうと思います。

Habanero Beeについては以前zennに書いた、こちらの記事を参照いただけたらと思います。

AMP対応のサイトでGA4はまだ使えません。

追記：非公式のツールですが、AMP対応のサイトでGA4を動かせることを確認しました。
詳細はページ下部に記載した 追記:Google Analyticsの計測終了に伴い、AMPサイトのGA4はどうなるの？ をご参照ください。

Googleアナリティクス4(GA4)とは？

本題に入る前に、
そもそも、Googleアナリティクス4(GA4)とはなんぞや？というところですが、
これはざっくり説明してしまうと、Google Analyticsの進化版みたいなものです。
ウェブとアプリにまたがっているユーザーを分析できたり、イベント単位で計測できるようになっていたり、色々と便利になっています。

下記の記事の説明がわかりやすかったので貼らせていただきます。

zennもGoogle Analyticsを設定することができますが、私は現在このGA4を用いて設定しています。
たぶん、今Google Analyticsを設定しようとすると、Google側からこっちのほうが便利だよ！と推されるので、特に事情がない限り、GA4を使うことになっているはず。

【本題】AMP対応のサイトでGA4はまだ使えません。

上で『特に事情がない限り』と書きましたが、AMP対応のサイトを作成する場合、この『事情』がある、という悲しい状況に陥ります。
というのも、残念ながらAMPのサイトにはGA4は対応していないのです。

詳細については上のissueコメントを見ていただけたらと思います。
Googleが推奨しているAMPにて、同じくGoogleが推奨しているGA4が使えないのはなぜなの？という疑問が湧いてきますが、上のコメントを見るに色々と中の人も大変なのだろうなと推測します。
(AMPだと制限もきついので、そこらへんも大変なのかしらん？)

というわけで、AMP対応サイトでGoogle Analyticsを設定する場合は、おとなしく従来のGoogle Analyticsで設定します。
(ちなみに従来のGoogle Analyticsは、ユニバーサルアナリティクスとも表記されています)

従来のGoogle Analytics(ユニバーサルアナリティクス)の設定方法

具体的な設定方法についてですが、Google Analyticsの導入時に出てくるプロパティの設定画面で 詳細オプションを表示 を押して設定していくことになります。
(下のキャプチャ参照)

従来のGoogle Analyticsの設定方法その１

この表示させた詳細オプションの中にある Google アナリティクス4とユニバーサルアナリティクスのプロパティを両方作成する というところにチェックを入れておくと、従来のものとGA4版、２つのプロパティが作成されるので、作成された従来のもの(ユニバーサルアナリティクスの方)のトラッキングコードを設定することでAMP対応のサイトでもGoogle Analyticsを利用できます。

従来のGoogle Analyticsの設定方法その２

というわけで、AMP対応のサイトでGoogle Analyticsを設定する際はご注意を。
(自身が開発しているHabanero Beeでも、この従来版であるユニバーサルアナリティクスの方のトラッキングコードをGoogle スプレッドシートに設定することでトラッキングが開始できます【プチ宣伝】)

追記: AMPサイトでGA4を動かす(非公式)

2022年3月頃にGoogle Analytics(ユニバーサルアナリティクス)の計測終了が２０２３年7月1日になるとのニュースが発表されました。

ですが、GoogleではまだAMPサイトの公式サポートについては特にコメントがありません。

AMP界隈は「これから、どうなってしまうんだ...」とドヨドヨしているのですが、そんな中非公式ながらGA4をAMPサイトにも対応させる試みを見つけました。

WordPress版はこちら。

AMP対応しているWordPressサイトは運営していないのでWordPressの方は試せないですが、１つ目の方は試してみようと思います。

~~試したら追記します。~~

試したら無事に動きました！

Habanero Beeで構築して既に公開している、とあるAMPサイトのコードを修正して、READMEにも記載のある下記のコードを組み入れた形となります。

ちなみに上のコードはそのまま実行すると amp.analytics-debugger.com というドメインに対してアクセスします。そもそも他人のドメインにこういった用途でアクセスするのを躊躇う方は多いと思います。
そのため実際に利用する際は自身のドメインに ga4.json をホストして対応する形になるかと思います。

(Habanero Beeのソースコードに組み込むケースでは、実際に記述したコードは正確には下記とは異なるのですが、以下のような形式で表示されるように修正しています)

<amp-analytics type="googleanalytics" config="{ホストしているドメイン}/ga4.json" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
                "GA4_MEASUREMENT_ID": "ここにGA4用のトラッキングIDを入れる",
                "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
                "DEFAULT_PAGEVIEW_ENABLED": true,    
                "GOOGLE_CONSENT_ENABLED": false,
                "WEBVITALS_TRACKING": false,
                "PERFORMANCE_TIMING_TRACKING": false
      }
  }
  </script>
</amp-analytics>

ひとまず非公式ではありつつも、AMPサイトでGA4を動かせることも分かったので今のところは良しとします。

公式から今後アナウンスがあればよいのですが...どうなることやら。