Analitik: Dasar-Dasar
Mulailah dari sini untuk mempelajari dasar-dasar terkait analitik AMP.
Menggunakan amp-pixel atau amp-analytics?
AMP menyediakan dua komponen untuk memenuhi kebutuhan analitik dan pengukuran Anda: amp-pixel dan amp-analytics. Kedua opsi ini mengirimkan data analitik ke titik akhir (endpoint) yang ditentukan.
Jika Anda mencari perilaku seperti piksel pelacakan sederhana, komponen amp-pixel memberikan pelacakan tampilan halaman dasar; data tampilan halaman akan dikirimkan ke URL yang telah ditentukan. Sebagian integrasi dengan vendor mungkin memerlukan komponen ini, yang mana integrasi tersebut akan menetapkan titik akhir URL yang tepat.
Untuk sebagian besar solusi analitik, gunakan amp-analytics. Pelacakan tampilan halaman juga dapat berfungsi di amp-analytics. Namun, Anda juga dapat melacak keterlibatan pengguna dengan jenis konten halaman apa pun, termasuk klik pada tautan dan tombol. Anda juga dapat mengukur sejauh apa pengguna mengetuk pada cerita, dan apakah pengguna tersebut berinteraksi dengan elemen-elemen interaktif.
Sebagai bagian dari proses integrasi dengan platform AMP, penyedia telah menawarkan konfigurasi amp-analytics yang telah ditentukan sehingga mempermudah pengambilan dan pemrosesan data ke alat pelacakannya. Buka dokumentasi vendor dari daftar Vendor Analitik.
Anda dapat menggunakan amp-pixel dan amp-analytics di halaman Anda: amp-pixel untuk pelacakan tampilan halaman sederhana, dan amp-analytics untuk pelacakan lainnya. Anda juga dapat menambahkan beberapa tag dari setiap jenis. Jika bekerja dengan beberapa penyedia analitik, Anda memerlukan satu tag untuk setiap solusi. Perlu diperhatikan bahwa halaman AMP yang lebih sederhana lebih disarankan untuk pengguna, sehingga apabila Anda tidak memerlukan tag tambahan, jangan gunakan tag tersebut.
Membuat konfigurasi analitik sederhana
Pelajari cara membuat konfigurasi amp-pixel dan amp-analytics sederhana.
Konfigurasi amp-pixel sederhana
Untuk membuat konfigurasi amp-pixel sederhana, masukkan URL seperti contoh berikut ini ke dalam badan halaman AMP Anda:
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
Dalam contoh ini, data tampilan halaman dikirimkan ke URL yang telah ditentukan, bersama sebuah nomor acak: Variabel RANDOM adalah salah satu dari banyak variabel pengganti di platform AMP. Pelajari lebih lanjut tentang Penggantian variabel di sini.
Komponen amp-pixel bersifat standar, sehingga Anda tidak memerlukan deklarasi inklusi seperti saat membuat komponen AMP yang diperluas, termasuk amp-analytics. Namun, Anda harus menempatkan tag amp-pixel sedekat mungkin dengan permulaan <body> halaman AMP Anda. Piksel pelacakan hanya akan diproses jika tag terlihat dengan sendirinya. Jika amp-pixel diposisikan di dekat bagian bawah halaman, tag tersebut mungkin tidak akan berfungsi.
Konfigurasi amp-analytics sederhana
Untuk membuat konfigurasi amp-analytics sederhana, Anda harus menyertakan deklarasi custom-element ini terlebih dahulu di <head> dokumen AMP (kunjungi juga Deklarasi penyertaan komponen ):
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
Contoh berikut ini mirip dengan contoh amp-pixel. Setiap kali halaman terlihat, peristiwa pemicu akan diproses, dan mengirimkan data tampilan halaman (pageview) ke URL yang telah ditentukan bersama dengan sebuah ID acak:
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Pada contoh di atas, kita telah menentukan tampilan halaman yang dipanggil untuk menjadi https://foo.com/pixel?RANDOM. Seperti yang telah dijelaskan di awal, RANDOM diganti dengan nomor acak, sehingga permintaan akan terlihat seperti https://foo.com/pixel?0.23479283687235653498734.
Saat halaman terlihat (seperti yang telah ditetapkan dengan penggunaan kata kunci pemicu visible), sebuah peristiwa akan dipicu dan permintaan pageview akan dikirimkan. Atribut pemicu menentukan kapan permintaan tampilan halaman diproses. Pelajari lebih lanjut tentang permintaan dan pemicu.
Konfigurasi standar cerita AMP
Perjalanan atau penjelajahan pengguna yang khas untuk sebuah situs web sangat berbeda dengan cerita. Di situs web, pengguna dapat membaca judulnya, menggulir ke bagian bawah halaman, berinteraksi dengan formulir sebelum mengeklik tautan ke halaman berikutnya. Cerita menempati viewport sepenuhnya dan pengguna tidak menggulir, tetapi mengetuk untuk bergerak maju.
Banyak yang ingin mengukur setiap <amp-story-page> dalam cerita sebagai tampilan halaman baru karena konten dari layar ke layar sangat berbeda. Namun, halaman tersebut hanyalah satu elemen dalam sebuah cerita lengkap — dan pengguna biasanya perlu melihat banyak halaman cerita untuk memahami cerita sepenuhnya. Jadi, pertanyaan tentang bagaimana kita menghitung sesuatu sesederhana tampilan halaman memiliki implikasi yang sangat besar untuk pendekatan analitik kita.
Analytics AMP memudahkan penerapan di atas dengan menggunakan vendor analitik apa pun. Misalnya: dengan Tag Situs Global Google Analytics, akan terlihat seperti cuplikan di bawah ini.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "YOUR_GOOGLE_ANALYTICS_ID",
"config": {
"YOUR_GOOGLE_ANALYTICS_ID": {
"groups": "default"
}
}
},
"triggers": {
"storyProgress": {
"on": "story-page-visible",
"vars": {
"event_name": "custom",
"event_action": "story_progress",
"event_category": "${title}",
"event_label": "${storyPageId}",
"send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
}
},
"storyEnd": {
"on": "story-last-page-visible",
"vars": {
"event_name": "custom",
"event_action": "story_complete",
"event_category": "${title}",
"send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
}
}
}
}
</script>
</amp-analytics>
Konfigurasi default ini akan memberi Anda konfigurasi lengkap yang berfungsi untuk sebuah cerita AMP.
Jika Anda tertarik untuk mengetahui lebih dari apa yang dapat diberikan konfigurasi standar, kunjungi Analitik untuk Cerita AMP Anda guna menemukan contoh penggunaan lebih lanjut dengan Google Analytics.
Penggantian variabel
Baik komponen amp-pixel maupun amp-analytics mengizinkan semua penggantian variabel URL standar (kunjungi Penggantian Variabel HTML AMP ). Di dalam contoh berikut ini, permintaan tampilan halaman dikirimkan ke URL, bersama dengan URL kanonis dokumen AMP saat ini, judulnya, dan sebuah ID klien:
<amp-pixel
src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"
></amp-pixel>
Karena kesederhanaannya, tag amp-pixel hanya dapat menyertakan variabel yang ditentukan oleh platform atau yang dapat diuraikan runtime AMP dari halaman AMP. Dalam contoh di atas, platform mengisi nilai untuk canonicalURL dan clientId(site-user-id). Tag amp-analytics dapat menyertakan variabel yang sama seperti amp-pixel, serta variabel yang ditentukan secara unik di dalam konfigurasi tag.
Gunakan format ${varName} di dalam untai permintaan untuk halaman atau variabel yang ditentukan platform. Tag amp-analytics akan mengganti templat dengan nilai sebenarnya pada saat pembuatan permintaan analitik (kunjungi juga Variabel yang didukung dalam amp-analytics.
Di dalam contoh amp-analytics berikut ini, permintaan tampilan halaman dikirimkan ke URL, dengan data tambahan yang diekstrak dari penggantian variabel, beberapa disediakan oleh platform, beberapa ditentukan inline, dalam konfigurasi amp-analytics:
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage"
}
}
}
}
</script>
</amp-analytics>
Di dalam contoh di atas, variabel-variabel, account, dan title ditentukan dalam konfigurasi amp-analytics. Variabel canonicalUrl dan clientId tidak ditentukan dalam konfigurasi, sehingga nilainya diganti oleh platform.
Identifikasi pengguna
Situs web menggunakan cookie untuk menyimpan informasi tertentu terkait pengguna di browser. Cookie dapat digunakan untuk memberikan informasi bahwa seorang pengguna sebelumnya sudah pernah mengunjungi suatu situs. Di AMP, halaman dapat ditayangkan dari situs penayang atau cache (seperti Cache AMP Google). Situs web penayang dan cache kemungkinan besar memiliki domain yang berbeda. Demi keamanan, browser dapat (dan sering kali akan) membatasi akses cookie domain lain (kunjungi juga Melacak pengguna di berbagai domain asal).
Sebagai standar, AMP akan mengelola penyediaan ID klien, baik halaman diakses dari situs web asli penayang atau melalui cache. ID klien yang dibuat AMP memiliki nilai "amp-" yang diikuti oleh untai berkode base64 yang acak dan tetap sama bagi pengguna tersebut jika pengguna yang sama tersebut mengunjunginya lagi.
AMP mengelola pembacaan dan penulisan ID klien dalam semua kasus. Hal ini terutama terlihat saat halaman ditayangkan melalui cache atau ditampilkan di luar konteks penayangan dari situs asli penayang. Jika hal ini terjadi, cookie situs penayang tidak akan tersedia.
Saat halaman AMP disajikan dari situs penayang, kerangka kerja ID klien yang digunakan AMP dapat diberi tahu tentang cookie fallback yang harus dicari dan digunakan. Dalam kasus ini, argumen cid-scope-cookie-fallback-name dari variabel clientId ditafsirkan sebagai nama cookie. Pemformatan dapat muncul sebagai CLIENT_ID(cid-scope-cookie-fallback-name) atau ${clientId(cid-scope-cookie-fallback-name)}.
Contohnya:
<amp-pixel
src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"
></amp-pixel>
Jika AMP menemukan bahwa cookie ini telah ditempatkan, penggantian ID klien akan mengembalikan nilai cookie tersebut. Jika AMP menemukan bahwa cookie ini belum ditempatkan, AMP akan menghasilkan nilai dalam bentuk amp- yang diikuti oleh untai berkode base64 acak.
Pelajari lebih lanjut tentang penggantian ID klien, termasuk cara menambahkan ID notifikasi pengguna opsional, di Variabel yang didukung dalam analitik AMP.