Cara Memasang Google Analytics 4 (GA4) di AMP

Seperti yang diketahui, bahwa properti lawas Google Analytics (universal analytics) benar-benar akan berhenti memproses data mulai 1 Juli 2023. Artinya, properti tersebut tidak dapat lagi digunakan untuk melihat page views, traffics, backlinks dan lainnya untuk blog atau website terkait. 

Pun hal sama berlaku untuk blog atau website pengguna AMP (Accelerated Mobile Pages). Untuk itu, semua pengguna properti lawas dari Google Analytics, dianjurkan untuk migrasi ke properti Google Analytics V4. Mula-mulai dianjurkan untuk mengikuti panduan di 'Asisten Penyiapan'.

Langkah ini penting dilakukan untuk berbagi berbagai data antar properti, baik properti Analytics yang lama maupun yang terbaru.

Namun demikian, di porperti teranyar ini kita tetap tidak diberikan script kode pelacakan khusus untuk AMP. Maka solusinya pergi ke Documentation amp-dev, pada tab pembahasan .

Cara Pasang GA4 di Blog AMP

Buka Asisten Penyiapan GA4

1. Periksa 'Open Connected Property', pastikan properti GA lama dan GA4 sudah terhubung atau connected.
2. Buka tab menu Setup Asistant di GA4
3. Pada opsi-opsi yang ada, silahkan pilih Mark as complete.

Ganti Kode Google Analytics AMP yang Lama

Untuk pemasangan Google Analytics (versi lama) di AMP biasanya diterapkan seperi berikut ini:

<amp-analytics  type="gtag" id="analytics1" data-credentials="include" >
<script type="application/json">
{"vars":{"gtag_id":"UA-XXXXXXXXX-1","config":{"UA-XXXXXXXXX-1":{"groups":"default"}},"anonymizeIP":"true"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}
</script>
</amp-analytics>

Kode Script Google Analytics 4 (GA4) di AMP

Nah, untuk cara memasang Google Analytics 4 (GA4) di website atau blog AMP, dapat menggunakan kode berikut ini.

<amp-analytics type="googleanalytics" config="https://amp.analytics-debugger.com/ga4.json" data-credentials="include" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px" i-amphtml-layout="fixed">
  <script type="application/json">
    {
      "vars": {
        "GA4_MEASUREMENT_ID": "G-XXXXXXXXXX",
        "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>

Ganti G-XXXXXXXXXX dengan ID GA4 Blog Masing-masing

Silahkan ganti GA4 id G-XXXXXXXXXX pada script di atas, dengan kode Google Analytics versi 4 untuk blog atau website Anda.

Simpan perubahan dan selesai.

Info Tambahan

Pastikan elemen amp-analytics seperti ini:

<script src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" async="" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script>

Atau yang seperti ini:

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

Sudah terpasang di blog, agar AMP Analytics dapat berjalan dengan baik.