Solusi bagaimana melakukan pelacakan performa penulis (author) berdasarkan (Views) yang diambil dari laman AMP, tentu tutorial kali ini diharapkan bisa menyelesaikan masalah kalian ya.
Tutorial melacak author berdasarkan jumlah PV yang dihasilkan oleh author adalah penting.
Konsep sistem ini bisa digunakan untuk mengukur ketertarikan pembaca, bisa juga digunakan untuk melakukan pembayaran kepada kontributor berdasarkan PageViews, dan masih banyak lagi.
Data tersebut dapat kalian lihat dilaporan custom Google Analytics 4.
Berikut ini tahap-tahap untuk melakukan pelacakan author berdasarkan views yang dihasilkan dari konten yang mereka di website kalian.
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 perlu 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.
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.
Melacak Author di AMP
Jika kalian ingin melacak informasi tambahan seperti “author” di halaman AMP menggunakan GA4, kalian perlu menyesuaikan konfigurasi amp-analytics dan mengirimkan parameter tambahan dengan setiap hit.
Berikut adalah langkah-langkahnya:
- Tambahkan Skrip Google Analytics AMP di dalam <head> (jika belum):
<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> dengan Parameter Tambahan: Misalnya, kalian ingin melacak author artikel. Pastikan kalian memiliki elemen di halaman AMP kalian yang memiliki informasi author.
<body>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXXXXXX",
"config": {
"G-XXXXXXXXXX": { "groups": "default" }
}
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
},
"extraUrlParams": {
"author": "John Doe" // Gantilah "John Doe" dengan data dinamis jika perlu
}
}
</script>
</amp-analytics>
</body>Jika nama author dinamis, kalian perlu menggunakan variabel atau teknik lain untuk menyisipkan nilai dinamis.
Menggunakan Variabel untuk Author
Jika kalian perlu mendapatkan nama author secara dinamis, kalian bisa menggunakan amp-bind atau cara lain untuk menyisipkan nilai dinamis.
Misalnya nih:
- Tambahkan elemen dengan nama author di halaman AMP:
<div id="author" data-author="John Doe"></div> <!-- Gantilah "John Doe" dengan nilai dinamis -->- Modifikasi amp-analytics untuk menggunakan variabel:
<body>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXXXXXX",
"config": {
"G-XXXXXXXXXX": { "groups": "default" }
}
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
},
"extraUrlParams": {
"author": "${author}" // Menggunakan variabel dinamis
}
}
</script>
</amp-analytics>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<amp-state id="authorState">
<script type="application/json">
{
"author": "John Doe" // Gantilah dengan data dinamis atau sumber lainnya
}
</script>
</amp-state>
<div [text]="authorState.author"></div> <!-- Tampilkan nama author di halaman -->
</body>Dalam contoh ini, amp-bind digunakan untuk menyisipkan nilai author dinamis ke dalam amp-analytics.
Mengatur di Google Tag Manager
- Masuk ke Google Tag Manager dan buka kontainer kalian.
- Buat atau modifikasi tag GA4 Event:
- Pilih GA4 Configuration Tag yang sudah kalian buat.
- Di bagian Event Parameters, tambahkan parameter baru:
- Parameter Name: author
- Value: {{author}} (diambil dari halaman AMP)
- Pastikan trigger kalian sesuai untuk melacak pageviews atau event lainnya.
Memverifikasi Implementasi
- Buka halaman AMP kalian di browser.
- Gunakan DebugView di Google Analytics untuk memastikan parameter author sedang dikirimkan dengan benar.
- Pastikan data mulai muncul di laporan GA4.
Dengan langkah-langkah ini, kalian dapat melacak informasi tambahan seperti author di halaman AMP menggunakan GA4 dan Google Tag Manager.
Discussion about this post