Cara Track Halaman AMP, GA4, dan Tagmanager

Untuk menginstal dan melakukan pelacakan halaman website menggunakan Google Analytics 4 (GA4) di AMP dan mengaturnya di Google Tag Manager (GTM), kalian bisa lho mengikuti langkah-langkah berikut:

Membuat Properti GA4

Buka Google Analytics.
Buat properti baru untuk GA4.
Catat ID Pengukuran GA4 yang akan digunakan nanti (misalnya, G-XXXXXXXXXX).

Menambahkan GA4 di AMP

AMP (Accelerated Mobile Pages) membutuhkan konfigurasi khusus untuk mengirim data ke Google Analytics. kalian juga perlu nih, untuk mengedit kode HTML AMP kalian.

Tambahkan Skrip Google Analytics AMP di dalam <head>:

   <head>
       <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
   </head>

Tambahkan Konfigurasi GA4 di Dalam <body>:

   <body>
       <amp-analytics type="gtag" data-credentials="include">
           <script type="application/json">
           {
             "vars": {
               "gtag_id": "G-XXXXXXXXXX",
               "config": {
                 "G-XXXXXXXXXX": { "groups": "default" }
               }
             }
           }
           </script>
       </amp-analytics>
   </body>

Gantilah G-XXXXXXXXXX dengan ID Pengukuran GA4 kalian ya~

Menambahkan GA4 di Google Tag Manager untuk AMP

Buka Google Tag Manager.
Buat kontainer baru atau buka kontainer yang sudah ada.
Pilih Tag Baru.
Pilih Tag Configuration dan pilih GA4 Configuration.
Masukkan ID Pengukuran GA4.
Di bagian Triggering, pilih All Pages.
Simpan tag dan publikasikan perubahan.

Menghubungkan Tag GTM ke Halaman AMP

Untuk memastikan Tag Manager bekerja dengan halaman AMP kalian, tambahkan kode berikut di dalam <head> dari halaman AMP kalian:

<head>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>
    <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXXX');
    </script>
</head>

Gantilah GTM-XXXXXX dengan ID kontainer GTM kalian.

Advertisement. Scroll to continue reading.

Mengatur Konfigurasi GA4 di GTM AMP Container

Masuk ke kontainer GTM kalian.
Buat tag baru dengan memilih Tag Configuration.
Pilih GA4 Event.
Pilih GA4 Configuration Tag yang telah kalian buat sebelumnya.
Masukkan nama event yang ingin kalian lacak.
Atur Trigger untuk tag ini (misalnya, klik tombol, scroll, dll.).
Simpan dan publikasikan kontainer.

Memverifikasi Implementasi

Buka halaman AMP kalian di browser.
Gunakan alat DebugView di Google Analytics untuk memastikan event sedang dikirimkan dengan benar.
Pastikan data mulai muncul di laporan GA4.

Dengan mengikuti langkah-langkah di atas, kalian seharusnya dapat menginstal GA4 di AMP dan mengaturnya di Google Tag Manager.