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.
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.