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. 

Cara Memasang Google Analytics 4 (GA4) di AMP

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

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.
Cara Pasang GA4 di Blog AMP


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.



4 komentar

  1. Profil:https://www.blogger.com/profile/16053603420855032628
    Kalo hanya ditambahkan ID Analytics melalui Setelan blogger apakah sudah cukup mas?
    • Profil:https://www.blogger.com/profile/13162875744493565460
      kalau non-AMP boleh dengan cara itu
    • Profil:https://www.blogger.com/profile/16053603420855032628
      Baik mas, terima kasih info nya. Oiya mas boleh juga dibuat tutorial penggunaan Cloudflare Zaras untuk meringkan JS dari Analytics.
  2. Profil:https://www.blogger.com/profile/00414727641022337226
    hmmm..
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan diluar artikel silahkan buat topik baru di .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code