Mendalami analisis AMP
Panduan ini menjelaskan lebih jauh tentang
amp-analytics
,
dengan memecah sampel konfigurasi amp-analytics
ke dalam elemen-elemen penyusun berikut:
Bagian lain dalam panduan ini menggunakan sampel konfigurasi ini, yang melacak jumlah kunjungan halaman dan klik pengguna pada link serta mengirim data analisis ke penyedia pihak ketiga, Google Analytics:
<amp-analytics type="googleanalytics" config="https://example.com/analytics.account.config.json"> <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}", "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }, "vars": { "account": "ABC123" }, "extraUrlParams": { "cd1": "AMP" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" }, "trackAnchorClicks": { "on": "click", "selector": "a", "request": "event", "vars": { "eventId": "42", "eventLabel": "clicked on a link" } } }, 'transport': { 'beacon': false, 'xhrpost': false, 'image': true } } </script> </amp-analytics>
Contoh kode di atas hanya digunakan untuk membantu Anda belajar, bukan sampel kode sebenarnya. Jika Anda bekerja dengan penyedia analisis, sampel di atas kemungkinan tidak akan digunakan; konfigurasi penyedia menghilangkan kerumitan. Lihat dokumentasi penyedia analisis untuk mengetahui sampel konfigurasi.
Ke mana data analisis dikirim: atribut type
AMP dirancang untuk mendukung dua pola pengumpulan data yang umum:
- Penyerapan data oleh endpoint milik penayang untuk sistem analisis internal.
- Penyerapan data oleh endpoint milik vendor untuk interoperabilitas dengan solusi vendor (misalnya, Adobe Analytics, Chartbeat, Google Analytics).
Untuk mengirim data analisis ke penyedia analisis,
sertakan atribut type
ke dalam tag amp-analytics
dan tetapkan nilainya
ke vendor yang sesuai, seperti dijelaskan pada
daftar Vendor Analisis.
Misalnya: <amp-analytics type="googleanalytics">
mengirim data analisis
ke penyedia analisis pihak ketiga, Google Analytics.
Untuk mengirim data ke endpoint milik penayang,
jangan sertakan atribut type
;
data analisis dikirim ke endpoint yang ditentukan untuk masing-masing
permintaan.
Konfigurasi vendor analisis adalah cara cepat
untuk mulai menggunakan amp-analytics
.
Sebaiknya Anda pelajari dokumentasi vendor dan
referensi bantuan untuk mendapatkan panduan lebih lanjut.
Seperti disebutkan sebelumnya,
daftar vendor yang telah berintegrasi dengan AMP, serta link
ke dokumentasi spesifik mereka, dapat ditemukan di
daftar Vendor Analisis.
Jika Anda adalah vendor analisis, pelajari lebih lanjut cara mengintegrasikan konfigurasi analisis Anda ke AMP HTML.
Memuat konfigurasi jarak jauh: atribut config
Anda tidak perlu menyertakan semua konfigurasi
untuk amp-analytics
seluruhnya di halaman AMP.
Sebagai gantinya, Anda dapat memanggil URL jarak jauh
untuk semua atau sebagian konfigurasi tersebut.
Dengan begitu Anda dapat melakukan beberapa hal seperti memvariasikan konfigurasi berdasarkan permintaan spesifik. Jika Anda sebagai penayang memiliki kontrol atas file jarak jauh, Anda dapat melakukan semua pemrosesan sisi server yang diperlukan untuk menyusun konfigurasi data.
Langkah pertama untuk memuat konfigurasi jarak jauh adalah
dengan menyertakan atribut config ke dalam tag amp-analytics
:
<amp-analytics config="https://example.com/analytics.account.config.json">
Langkah selanjutnya adalah membuat konten JSON yang berada di URL jarak jauh. Dalam contoh sederhana ini, konfigurasi yang berada dalam objek JSON hanya berupa nilai variabel untuk akun analisis.
Contoh konten di https://example.com/analytics.account.config.json
:
{ "vars": { "account": "UA-XXXXX-Y" // Ganti dengan ID properti Anda. } }
Langkah terakhir adalah memastikan data apa dalam file jarak jauh yang ditarik
ke tempat yang sesuai dalam konfigurasi amp-analytics
.
Dalam kedua permintaan pageview
dan event
di sini,
nilai variabel account
otomatis ditetapkan
ke nilai akun pada URL jarak jauh ("account": "UA-XXXXX-Y"
):
"requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}", "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }
AMP tidak memvalidasi penggunaan ganda dari variabel yang sama. Nilai diisikan sesuai urutan preferensi substitusi variabel, dan nilai dalam URL jarak jauh menempati urutan teratas (lihat Pengurutan substitusi variabel).
Atribut requests, triggers & transport
Atribut requests
menetapkan ‘data apa yang dikirim’
(misalnya, pageviews
, events
),
dan ke mana data tersebut dikirim (URL yang digunakan untuk mengirim data).
Atribut triggers
menjelaskan kapan data analisis harus dikirim,
misalnya, saat pengguna melihat halaman, saat pengguna mengklik link.
Atribut transport
menentukan cara mengirim permintaan,
lebih tepatnya, protokol pengirimannya.
Baca terus untuk mempelajari lebih lanjut tentang konfigurasi ini.
(Anda juga bisa membaca tentang konfigurasi ini di
amp-analytics
Data apa yang dikirim: atribut requests
Atribut request-name
digunakan dalam konfigurasi pemicu untuk menentukan
permintaan apa yang harus dikirim sebagai respons atas peristiwa tertentu.
Atribut request-value
berupa URL https
.
Nilai ini dapat mencakup token placeholder
yang dapat merujuk ke permintaan atau variabel lain.
"requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}", "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}" }
Beberapa penyedia analisis (termasuk Google Analytics)
telah menyediakan konfigurasi,
yang Anda gunakan melalui atribut type
.
Jika menggunakan penyedia analisis,
Anda mungkin tidak perlu menyertakan informasi requests
.
Lihat dokumentasi vendor Anda untuk mencari tahu
perlu tidaknya mengonfigurasi atribut requests
dan cara melakukannya.
Menambahkan URL permintaan: Parameter URL Tambahan
Atribut extraUrlParams menentukan parameter tambahan yang akan ditambahkan ke akhir string kueri URL permintaan melalui konvensi "&foo=baz" biasa.
Contoh amp-analytics
menambahkan parameter tambahan cd1
ke permintaan dan menetapkan nilai parameter ke "AMP":
"extraUrlParams": { "cd1": "AMP" }
Kapan data dikirim: atribut triggers
Atribut triggers
menjelaskan kapan permintaan analisis harus dikirim.
Atribut ini berisi key-value pair yaitu nama pemicu dan konfigurasi pemicu.
Nama pemicu dapat berupa string apa saja yang terdiri
dari karakter alfanumerik (a-zA-Z0-9).
Misalnya,
elemen amp-analytics
berikut dikonfigurasi untuk mengirim permintaan ke
https://example.com/analytics
saat dokumen pertama kali dimuat,
dan setiap kali tag a
diklik:
"triggers": { "trackPageview": { "on": "visible", "request": "pageview" }, "trackAnchorClicks": { "on": "click", "selector": "a", "request": "event", "vars": { "eventId": "42", "eventLabel": "clicked on a link" } } }
Pendekatan di atas hanya direkomendasikan untuk halaman AMP dan bukan untuk iklan AMPHTML. Karena prioritas analisis lebih rendah dibandingkan konten pada halaman, direkomendasikan untuk melacak klik menggunakan pengalihan browser untuk menghindari kehilangan klik.
AMP mendukung konfigurasi pemicu berikut:
Konfigurasi Pemicu | Deskripsi |
---|---|
on (wajib) |
Peristiwa yang perlu dideteksi. Nilai yang valid meliputi click , scroll , timer , dan visible . |
request (wajib) |
Nama permintaan yang akan dikirim (seperti ditentukan dalam permintaan). |
vars |
Objek yang berisi key-value pair yang digunakan untuk menggantikan vars yang ditetapkan dalam konfigurasi level teratas, atau untuk menentukan vars yang unik bagi pemicu ini (lihat juga Pengurutan substitusi variabel). |
selector (wajib jika on ditetapkan ke click ) |
Selektor CSS yang digunakan untuk menyaring elemen mana yang harus dilacak. Gunakan nilai * untuk melacak semua elemen. Konfigurasi ini digunakan bersamaan dengan pemicu click . Pelajari cara menggunakan selektor untuk melacak klik halaman dan interaksi sosial. |
scrollSpec (wajib jika on ditetapkan ke scroll ) |
Mengontrol dalam kondisi apa peristiwa scroll akan diaktifkan saat halaman di-scroll. Objek ini dapat berisi verticalBoundaries dan horizontalBoundaries . Setidaknya satu dari dua properti tersebut diperlukan untuk mengaktifkan peristiwa scroll . Nilai untuk kedua properti harus berupa array angka yang berisi batasan kapan peristiwa scroll akan dibuat. Lihat contoh ini di melacak scroll. |
timerSpec (wajib jika on ditetapkan ke timer ) |
Mengontrol kapan peristiwa timer diaktifkan. Timer akan segera dipicu, dan dipicu lagi pada interval tertentu setelahnya. Konfigurasi ini digunakan bersamaan dengan pemicu timer . |
Pemicu dari konfigurasi yang prioritasnya lebih rendah akan digantikan oleh pemicu dengan nama yang sama dari konfigurasi yang prioritasnya lebih tinggi (lihat Pengurutan substitusi variabel).
Bagaimana data dikirim: atribut transport
Atribut transport
menentukan cara mengirim permintaan.
Tiga metode berikut diaktifkan secara default:
Metode Transport | Deskripsi |
---|---|
beacon |
Menunjukkan bahwa navigator.sendBeacon dapat digunakan untuk mengirim permintaan. Ini akan mengirimkan permintaan POST , beserta kredensial, dan bagian utama halaman yang kosong. |
xhrpost |
Menunjukkan bahwa XMLHttpRequest dapat digunakan untuk mengirim permintaan. Ini akan mengirimkan permintaan POST , beserta kredensial, dan bagian utama halaman yang kosong. |
image |
Menunjukkan bahwa permintaan dapat dikirim dengan membuat tag Image . Ini akan mengirim permintaan GET . |
Hanya satu metode transport yang digunakan,
yaitu metode dengan prioritas paling tinggi
yang diaktifkan, diizinkan, dan tersedia.
Urutan prioritasnya adalah beacon
> xhrpost
> image
.
Jika agen pengguna klien tidak mendukung salah satu metode,
maka metode aktif dengan prioritas tertinggi berikutnya yang akan digunakan.
Sertakan atribut transport
dalam konfigurasi
hanya jika Anda ingin membatasi opsi transport;
jika tidak, Anda bisa menghentikan permintaan.
Pada contoh di bawah ini,
beacon
dan xhrpost
ditetapkan ke false,
sehingga keduanya tidak akan digunakan meskipun memiliki prioritas yang lebih tinggi daripada image
.
Jika agen pengguna klien mendukung metode image
,
maka metode tersebut akan digunakan; jika tidak, tidak ada permintaan yang dikirim.
'transport': { 'beacon': false, 'xhrpost': false, 'image': true }
Pengurutan substitusi variabel
AMP mengisi variabel dengan nilai dalam urutan prioritas:
- Konfigurasi jarak jauh (melalui
config
). vars
yang disarangkan di dalam pemicu dalamtriggers
.vars
di level teratas yang disarangkan dalamamp-analytics
.- Nilai yang disediakan platform.
Dalam contoh ini, terdapat konfigurasi jarak jauh, variabel yang ditentukan di level teratas, pada pemicu, dan di tingkat platform:
<amp-analytics config="http://example.com/config.json"> <script type="application/json"> { "requests": { "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}", }, "vars": { "account": "ABC123", "title": "Homepage" }, "triggers": { "some-event": { "on": "visible", "request": "pageview", "vars": { "title": "My homepage", "clientId": "my user" } } } </script> </amp-analytics>
Saat var
yang sama ditentukan di beberapa lokasi,
urutan prioritas variabel menetapkan nilainya satu kali.
Sehingga, jika konfigurasi jarak jauh menetapkan account
sebagai UA-XXXXX-Y pada contoh di atas,
maka nilai dari berbagai variabelnya adalah sebagai berikut:
var |
Nilai | Ditentukan Oleh |
---|---|---|
canonicalUrl |
http://example.com/path/to/the/page |
Platform |
title |
Halaman beranda saya | Pemicu |
account |
UA-XXXXX-Y |
Konfigurasi jarak jauh |
clientId |
pengguna saya | Pemicu |