平衡点

_ AMP HTML ページでの Google Analytics 4 (GA4)

はじめに

少し前に, この日記も含めて AMP 対応(AMP ページのみを提供)する様にしています. アクセス解析に Google Analytics を利用しているのですが, AMP HTML では外部 Javascript の読み込みができず, そのままでは GA4 へ移行できません.

• Support App + Web properties on Google Analytics (gtag) · Issue #24621 · ampproject/amphtml · GitHub

…こういうの見てると, Google は AMP 止めるんだろうなぁ, とか思ったりするわけですが.

• 本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io

そのうち AMP は止めるとは思うけど, まあそれはそれとして.

AMP HTML での GA4

amphtml 本体がいまだに対応していない中, <amp-analytics> を使って AMP Valid かつ GA4 に対応する方法が開発されている.

• How to track AMP Pages with Google Analytics 4 - David Vallejo

これは現状では「非公式」なので, ある時に動かなくなる可能性もあるわけだが, それでもありがたいことではある.

というわけで

1. ga4.json を取得し, 適宜設置する:

   wget https://amp.analytics-debugger.com/ga4.json \
     -O path/to/public_html/
       

2. <amp-analytics> を適宜.

   <amp-analytics data-block-on-consent
                  type="googleanalytics"
                  config="url_of_your_ga4.json"
                  data-credentials="include"
   		             data-block-on-consent>
     <script type="application/json">
       {
           "vars": {
               "GA4_MEASUREMENT_ID": "G-XXXXXXXXXX",
               "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
               "DEFAULT_PAGEVIEW_ENABLED": true,
               "GOOGLE_CONSENT_ENABLED": true,
               "WEBVITALS_TRACKING": false,
               "PERFORMANCE_TIMING_TRACKING": false
           }
       }
     </script>
   </amp-analytics>
   

   とりあえずはこんな塩梅で良いかな, とか.

GA4 への移行

とりあえず この日記も AMP Valid だし データ取得はできている模様.

AMP HTML を止めるかどうかは思案中. あまり派手な事をする気のない自分にとって 「下手な事ができないフレームワーク」(ギブス?)として結構有用だった気もするんだよなぁ.

うーん.