Geekly articles weekly

Cara mengatur analitik web pada halaman AMP

Hai, Habr. Saya seorang analis data di Wrike Marketing: Saya mengumpulkan dan menganalisis semua data iklan, pemodelan LTV, dan tugas teknis lainnya yang membantu tim membuat iklan paling efektif di semua sumber. Baru-baru ini, saya mengalami masalah dalam menyiapkan pengumpulan data pada halaman AMP dan menemukan sangat sedikit informasi tentang topik tersebut, jadi saya memutuskan untuk memberi tahu Anda cara mengatasi tugas ini.



Di Wrike, kami membangun sistem analisis web yang melayani sejumlah besar pemangku kepentingan yang berbeda: tim situs web, generasi pemimpin, operasi pemasaran, manajer konten, manajemen pemasaran, dan tingkat-C. Sangat penting bagi tim analitik untuk menjaga kelengkapan, konsistensi, dan ketepatan waktu dari data yang dikumpulkan di situs, karena sejumlah besar laporan dibuat atas dasar mereka dan pendapatan yang diharapkan dihitung untuk mengevaluasi efektivitas kampanye iklan secara real time.

Di sisi klien, analytics kami berjalan di Google Tag Manager (GTM) - solusi semacam itu memungkinkan tim untuk dengan mudah menambahkan dan memodifikasi skrip analitik tanpa partisipasi spesialis situs web. Skrip yang diinstal dapat dibagi menjadi tiga grup dengan titik akhir untuk data:

  1. Google Analytics
  2. Log internal kami, dari mana data kemudian diunggah ke PostgreSQL;
  3. Pelacak untuk situs periklanan dan sistem analisis lainnya (LinkedIn, Twitter, dan situs lainnya menghitung tampilan halaman dan konversi untuk menampilkan laporan iklan di antarmuka mereka).

Basis data internal berkomunikasi dengan Google Analytics dan situs pihak ketiga. Selama pertukaran, kami biasanya mengidentifikasi pengguna dengan ID klien yang diberikan oleh analytics: itu disimpan baik di database kami dan di Google Analytics sebagai parameter pengguna. Bagi kami sendiri, kami mengambil nilai dari _ga cookies.



Baru-baru ini, tim di situs web kami mengadaptasi halaman blog perusahaan dengan standar AMP . Singkatnya, AMP (Accelerated Mobile Pages) adalah standar khusus untuk membuat halaman untuk perangkat seluler, yang secara signifikan dapat mempercepat pekerjaan mereka. Jika halaman sesuai dengan standar, maka Proyek AMP cache halaman pada CDN-nya, dan halaman akan tertanam dalam pencarian Google pada perangkat mobile.



Halaman blog kami di hasil pencarian. Ikon AMP di sebelah kiri tautan berarti bahwa halaman akan terbuka dalam bingkai (iframe) langsung di halaman pencarian.

Secara khusus, kecepatan pemuatan tinggi halaman AMP dicapai dengan tidak adanya JS yang dapat dieksekusi pengguna dalam kode halaman (tag script dilarang jika bukan dari jenis application/ld+json atau text/plain ), dan halaman itu sendiri dibangun dari serangkaian tag pra-optimisasi yang terbatas. Untuk analisis web, ini adalah tes yang berhasil kami lewati.

Ada dua masalah saat menambahkan halaman AMP ke ekosistem kita:

  1. Metode pengumpulan data berbasis JS konvensional berhenti bekerja;
  2. AMP menggunakan penyimpanan lokal alih-alih cookie, dan id klien dibuat oleh mask yang sama sekali berbeda:



Kami mempertimbangkan masalah secara terpisah.

Pengumpulan informasi


Di GTM, Anda dapat membuat wadah terpisah yang cocok untuk halaman AMP, tetapi yang terakhir telah sangat mengurangi variasi jenis tag yang dapat ditambahkan. Masalah terbesarnya adalah, tentu saja, kurangnya jenis HTML Khusus tempat kami menempatkan skrip kami. Mari kita lihat bagaimana menyelesaikan ini dan masalah lain untuk setiap titik akhir data.

Google analytics


Ini adalah kategori yang paling mudah. Wadah AMP menyediakan jenis tag Universal Analytics, di mana Anda dapat menginstal Google Analytics. Seiring dengan pengiriman tampilan halaman dan acara, hanya parameter dan indikator yang ditentukan pengguna yang masuk ke analitik. Grup konten, data e-commerce, dan bidang lain yang tersedia di GTM untuk halaman reguler tidak dapat dikonfigurasi di sini.

Jika Anda menggunakan Yandex.Metrica bersama dengan Google Analytics, itu juga dapat dikirimkan, tetapi itu tidak akan berfungsi melalui GTM: Anda harus menghubungkan pengembang. Di sini Anda dapat menemukan instruksi terperinci.


Contoh mengirimkan tampilan halaman ke Google Analytics melalui GTM untuk AMP

Log milik sendiri


Setiap permintaan dapat dikirim menggunakan tag Gambar Kustom. Di backend, penting untuk menyediakan piksel yang merekam data dari parameter permintaan GET. Untuk mengkonfigurasi pengiriman data, tambahkan variabel yang diperlukan ke alamat halaman yang diminta dan jangan lupa untuk menggunakan opsi Aktifkan Penghilang Tembolok sehingga piksel tidak di-cache.
Misalnya, Anda dapat mengirim data tentang melihat halaman dengan ID klien dan pengarah menggunakan piksel:

//www.your-site.com/log?event=pageview&page={{Page Path}}&ga={{Page Client ID}}&referrer={{Document Referrer}}

Dalam kurung kurawal, tautan ke variabel GTM ditunjukkan, mereka dapat dikonfigurasi di bagian yang sesuai dari antarmuka GTM. Set variabel bawaan, tentu saja, terbatas. Juga tidak mungkin untuk menghitung nilai eigen karena tidak adanya JS. Jika perlu, Anda dapat menghitung nilai yang diinginkan di sisi klien menggunakan variabel AMP - mereka dapat diakses dari GTM.

Karena AMP terutama menerima lalu lintas organik, tidak perlu memasang pelacak yang rumit untuk situs iklan. Karenanya, kami memiliki cukup variabel bawaan untuk mengonfigurasi pelacakan kami.

Pelacak lainnya


Mengadaptasi pelacak lain yang tidak terintegrasi dengan AMP cukup sulit. Untuk memahami apa yang bisa diadaptasi dan apa yang tidak bisa, Anda perlu melihat permintaan yang dikirim oleh pelacak ini. Jika parameter yang dikirim oleh pelacak tersedia di GTM, maka Anda dapat mengirim data yang diperlukan menggunakan Gambar Kustom yang sama. Jika penghitung memiliki bagian noscript, biasanya dapat ditransfer ke GTM.

Kami harus meninggalkan banyak pelacak, adaptasi yang bagi AMP tampak terlalu padat karya dibandingkan dengan manfaat yang dapat dihasilkannya.

Penyatuan ID Klien


Bersama dengan AMP, kami tidak mendapatkan satu, tetapi sebanyak tiga opsi yang memungkinkan untuk memuat halaman. Bersama dengan versi reguler, empat diperoleh:

  1. Versi normal (misalnya, www.your-site.com/blog/article-name/ )
  2. Unduh langsung di situs (di sini artikelnya diposting untuk caching, misalnya, www.your-site.com/blog/article-name/amp/ )
  3. Versi cache dalam AMP CDN (alamatnya akan seperti ini: www-your-site-com.cdn.ampproject.org/v/s/www.your-site.com/blog/article-name/amp/ )
  4. Unduh via iframe di hasil pencarian: iframe akan melihat alamat yang sama seperti pada paragraf 3, tetapi secara resmi pengguna menelusuri www.google.com .

Jika tim analitik tidak mengambil tindakan apa pun untuk mengintegrasikan AMP ke dalam sistem analitiknya, maka ID klien hanya akan ditransfer antara versi reguler dan AMP yang terletak di domain Anda.


Secara default, hanya halaman yang terletak di domain Anda yang akan bertukar data dan sesi klien.

Dalam semua kasus lain, ID klien tidak dikirim. Jadi, pengguna yang membaca artikel di hasil pencarian dan kemudian pergi ke situs, dari sudut pandang otomatisasi, adalah dua orang yang berbeda. Akibatnya, dalam analitik Anda akan melihat peningkatan tajam pada pengguna "baru", data pada sumber tidak akan mencerminkan kenyataan, dan dalam sistem analisis internal Anda akan kehilangan kesempatan untuk menyusun jalur sejati pengguna dari kunjungan pertama ke konversi.

Solusi 1. API ID Klien


Google menyarankan menggunakan API ID Klien .

Implementasi solusi ini cukup sederhana: Anda perlu menambahkan meta tag ke dalam halaman AMP dan menambahkan konfigurasi ke kode Google Analytics pada halaman situs biasa. Namun, solusi ini memiliki banyak kelemahan:

  1. Ini hanya akan bekerja di sepasang pencarian Google - situs Anda;
  2. Ini hanya akan berfungsi dalam satu arah: jika pengguna pertama kali masuk ke AMP, maka di situs biasa mereka akan menggunakan pengidentifikasi AMP. Jika pengguna telah berada di situs Anda dan masuk ke AMP, maka pengenal baru akan dibuat untuknya;
  3. Ini menggunakan pengidentifikasi AMP. Jika basis data internal Anda dibangun di atas id klien reguler, maka ini dapat menyebabkan masalah yang tidak terduga.


API ID Klien memungkinkan Anda mentransfer data pengguna dari hasil pencarian ke domain Anda, tetapi ini hanya berfungsi dalam satu arah.

Solusi 2. Konfigurasi amp-analitik khusus


Berbeda dengan versi ukuran penuh, di AMP GTM terhubung tidak melalui JS, tetapi melalui file JSON. File konfigurasi berisi informasi tentang semua tag, pemicu, dan pengaturan GTM lainnya. Di tingkat atas, file tersebut terlihat seperti ini:

 { "requests":{...}, "triggers":{...}, "vars":{...}, "transport":{...}, "linkers":{...}, }

Level vars berisi informasi tentang ID klien:

  "vars":{ "clientId":"CLIENT_ID(AMP_ECID_GOOGLE,,_ga)", }

GTM akan menggunakan ID klien apa pun yang diberikan di bidang ini. Jadi, kita dapat mengunduh file ini, meletakkannya di domain utama kami dan mengganti ID klien dengan yang tersimpan di cookie (dan tersedia di domain utama). Untuk melakukan ini, buat generator file JSON di domain utama, yang:

  1. Pilih konfigurasi JSON dari GTM di https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX>m.url=SOURCE_URL (ganti GTM-XXXXXXX dengan pengenal wadah Anda dan SOURCE_URL dengan alamat halaman yang dibuka oleh pengguna;
  2. Membaca _ga cookie. Jika tidak ada di sana, Anda perlu membuat ID klien dalam format Google dalam bentuk: angka sembilan digit acak, periode, cap waktu (cap waktu). Jika Anda harus membuat nilai, ingatlah dalam _ga cookies. Kami mengembalikan file yang diperoleh dari GTM dengan spoofing ID klien:

  "vars":{ "clientId":"111111111.111111111", //      }


Kami mengganti instalasi JSON GTM dengan ID klien kustom Anda sendiri dan mentransfer ID klien yang sama untuk satu pengguna ke semua klien AMP yang mungkin.

Dalam konfigurasi ini, semua permintaan untuk analitik JSON, terlepas dari domain tampilan, akan melewati domain Anda, dan mereka akan diberi ID klien di atasnya. Dengan demikian, keempat cara yang mungkin untuk memuat halaman AMP akan menerima ID klien yang sama.


Menggunakan spoofing ID klien, semua domain dengan halaman AMP menggunakan data yang sama tentang pengunjung dan tidak membuat sesi yang tidak perlu.

Terima kasih, Simo Ahava , untuk ide spoofing ID klien dalam konfigurasi JSON.

Source: https://habr.com/ru/post/id451928/

More articles:


All Articles