Menguji piksel kustom

Setelah Anda membuat piksel kustom, Anda perlu mengujinya untuk memastikan piksel Anda mengirimkan data dengan benar saat peristiwa terjadi di situs Anda.

Anda dapat menggunakan Shopify Pixel Helper, untuk menguji apakah peristiwa piksel Anda dimuat dan apakah Anda telah berlangganan peristiwa Shopify dengan benar. Shopify Pixel Helper memungkinkan Anda menguji piksel kustom di toko online Anda untuk melihat peristiwa yang diterima secara real-time, beserta data untuk peristiwa tersebut.

Jika piksel kustom Anda terintegrasi dengan platform pihak ketiga yang memiliki alat pixel helper-nya sendiri, Anda dapat menggunakan pixel helper pihak ketiga selain Shopify Pixel Helper untuk menguji apakah peristiwa piksel Anda diproses dan diterima oleh platform pihak ketiga. Misalnya, jika Anda menambahkan piksel TikTok kustom di toko Anda, Anda dapat menggunakan Shopify Pixel Helper dan TikTok pixel helper untuk menguji piksel Anda.

Anda dapat menggunakan Shopify Pixel Helper dalam sesi browser yang sama dengan pixel helper pihak ketiga untuk menguji peristiwa bagi kedua platform pada saat yang bersamaan.

Berikut adalah skrip piksel kustom yang akan memicu semua peristiwa standar ke sandbox dan mencatat data peristiwa ke konsol. Peristiwa standar akan terlihat di Shopify Pixel Helper. Selain itu, Anda dapat berlangganan ke langganan massal lainnya, all_events, all_custom_events, dan all_dom_events, untuk menemukan semua yang dapat disediakan oleh web pixel. Kunjungi web pixels API untuk informasi selengkapnya.

analytics.subscribe("all_standard_events", event => {
   console.log("Event data ", event?.data);
});

Pastikan piksel kustom terhubung

Sebelum menguji piksel kustom Anda, pastikan piksel kustom tersebut terhubung.

Langkah-langkah:

1. Dari admin Shopify Anda, buka Pengaturan > Peristiwa pelanggan.

2. Di samping piksel yang ingin Anda uji, verifikasikan bahwa piksel Anda menampilkan status Terhubung di kolom Status.

3. Jika piksel tidak terhubung, klik ..., lalu klik Hubungkan.

Menguji piksel kustom menggunakan Shopify Pixel Helper

Setelah Anda memverifikasi bahwa piksel kustom Anda terhubung, Anda dapat menggunakan Shopify Pixel Helper untuk menguji apakah piksel kustom Anda mengirim data dan menerima data toko Anda. Anda dapat menguji satu piksel kustom pada satu waktu.

Langkah-langkah:

1. Dari admin Shopify Anda, buka Pengaturan > Peristiwa pelanggan.

2. Klik piksel kustom yang ingin Anda uji.

3. Klik Uji untuk membuka piksel kustom di situs web Anda untuk pengujian.

4. Opsional: Bergantung pada pengaturan persetujuan toko Anda dan pengaturan privasi pelanggan piksel kustom, dialog Pixel helper mungkin menampilkan Piksel sedang menunggu persetujuan. Lakukan salah satu tindakan berikut untuk melanjutkan pengujian:

   • Terima pelacakan di banner cookie atau preferensi toko Anda.
   • Klik Berikan persetujuan untuk melanjutkan pengujian.
   • Jika piksel Anda masih tidak dimuat, tinjau pengaturan privasi pelanggan Anda.

5. Untuk melihat peristiwa mana yang sedang dimuat, kunjungi setiap halaman yang ingin Anda uji pikselnya, dan tinjau dialog Pixel helper untuk memastikan bahwa langganan peristiwa berhasil dan fungsi callback berhasil di bagian Peristiwa yang diterima:

   • Buka halaman baru untuk menguji peristiwa page_viewed.
   • Klik produk untuk menguji peristiwa product_viewed.
   • Tambahkan produk ke keranjang untuk menguji peristiwa product_added_to_cart.
   • Buka checkout Anda untuk menguji peristiwa checkout_started.
   • Masukkan informasi pengiriman Anda di checkout untuk menguji bahwa peristiwa checkout_shipping_info_submitted menggantikan peristiwa checkout_started.
   • Selesaikan checkout untuk menguji bahwa peristiwa checkout_completed menggantikan peristiwa checkout_shipping_info_submitted. Pelajari selengkapnya tentang membuat pesanan percobaan.

6. Untuk melihat data peristiwa yang diterima, klik untuk memperluas dialog pixel helper.

Melihat bagian Peristiwa yang diterima

Saat Anda menguji peristiwa mana yang dimuat pada langkah 5, salah satu status berikut akan ditampilkan di bagian Peristiwa yang diterima pada dialog Pixel helper:

• Titik hijau menunjukkan bahwa langganan peristiwa berhasil dan fungsi callback berhasil.
• Titik merah menunjukkan bahwa langganan peristiwa berhasil, tetapi fungsi callback gagal. Pelajari cara menyelesaikan masalah piksel kustom Anda.
• Pixel helper menampilkan eror yang tidak tertangkap yang terjadi di level atas atau di dalam fungsi callback. Eror level atas ditampilkan saat pixel helper dimuat. Pesan eror callback ditampilkan saat Anda mengeklik untuk memperluas peristiwa dengan titik merah.
• Contoh kode berikut berisi error callback dan error tingkat atas. Bergantung pada lokasi error tingkat atas, piksel mungkin berfungsi sebagian.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Untuk mempelajari lebih lanjut tentang cara memperbaiki error JavaScript, kunjungi Penyelesaian Masalah JavaScript.

Menyelesaikan masalah piksel kustom Anda

Jika piksel tidak dimuat atau terpicu selama pengujian, dan Anda sudah meninjau data peristiwa serta kode piksel untuk mencari error, coba langkah-langkah penyelesaian masalah berikut.

Tinjau pengaturan privasi pelanggan Anda

Jika piksel Anda tidak dimuat atau terpicu selama pengujian, mungkin ada pengaturan privasi pelanggan yang mencegahnya dimuat.

Dari admin Shopify Anda, buka Pengaturan > Privasi pelanggan untuk memeriksa pengaturan privasi pelanggan di admin Shopify Anda yang mungkin berlaku untuk sesi Anda. Bergantung pada pengaturan privasi pelanggan, lakukan langkah-langkah berikut:

• Jika pengaturan privasi pelanggan di wilayah Anda memerlukan persetujuan, pastikan Anda telah memberikan persetujuan melalui banner cookier Anda.
• Jika Anda tidak memiliki pengaturan privasi pelanggan yang memblokir pemuatan piksel, hapus cookie browser Anda untuk mengatur ulang banner cookie dan memberikan persetujuan.

Jika Anda menggunakan alat pihak ketiga untuk mengelola persetujuan, hubungi penyedia pihak ketiga Anda untuk mendapatkan dukungan.

Penyelesaian masalah tambahan

Jika masih belum jelas apakah piksel kustom Anda berlangganan peristiwa pelanggan dengan benar, coba langkah-langkah penyelesaian masalah berikut:

• Hapus cookie browser Anda.
• Jika Anda menguji peristiwa standar, tinjau developer documentation Shopify tentang deskripsi peristiwa standar untuk memastikan Anda melakukan langkah-langkah yang diperlukan untuk memicu peristiwa tersebut.

Pengujian helper piksel pihak ketiga

SDK (software development kit) piksel berisi alat untuk piksel Anda guna mengumpulkan informasi tentang perilaku pelanggan. Anda dapat menggunakan helper piksel dari penyedia piksel pihak ketiga Anda untuk menguji perilaku piksel berikut dan memastikan SDK piksel berfungsi seperti yang diharapkan:

• Uji apakah SDK piksel pihak ketiga dimuat
• Uji apakah SDK piksel pihak ketiga diinisialisasi dan menerima peristiwa

Menguji apakah SDK piksel pihak ketiga dimuat

Langkah-langkah untuk memeriksa tab jaringan Anda bergantung pada browser web yang Anda gunakan. Misalnya, untuk mempelajari cara memeriksa tab jaringan di Google Chrome, lihat dokumentasi Chrome for Developers Memeriksa aktivitas jaringan.

Untuk menguji bahwa SDK piksel pihak ketiga dimuat, Anda harus mendapatkan kode penyedia pihak ketiga untuk URL SDK terlebih dahulu agar dapat menambahkannya ke kode piksel Anda. Untuk mendapatkan dukungan, hubungi penyedia piksel pihak ketiga Anda.

Langkah-langkah:

1. Dari admin Shopify Anda, buka Pengaturan > Peristiwa pelanggan.

2. Klik piksel kustom yang ingin Anda uji.

3. Di bagian Kode, masukkan SDK piksel yang diberikan oleh penyedia pihak ketiga Anda di akhir kode piksel Anda.

4. Klik Simpan.

5. Kunjungi toko online Anda, lalu periksa tab jaringan untuk memastikan bahwa URL SDK penyedia pihak ketiga sedang diunduh.

6. Opsional: Jika SDK piksel pihak ketiga tidak dimuat, periksa error runtime JavaScript di sandbox. Misalnya, di Chrome, Anda dapat memilih iFrame tertentu untuk meninjau log konsol, lalu persempit log ke piksel spesifik yang sedang Anda uji. Untuk mempelajari lebih lanjut tentang cara memeriksa error runtime JavaScript di Chrome, lihat dokumentasi Men-debug JavaScript Chrome.

Jika SDK piksel pihak ketiga tidak dimuat selama pengujian, hubungi penyedia piksel pihak ketiga Anda untuk mendapatkan dukungan.

Pengujian SDK piksel pihak ketiga lainnya

Untuk menguji apakah SDK piksel pihak ketiga diinisialisasi atau mengumpulkan peristiwa, lihat dokumentasi penyedia piksel pihak ketiga Anda.

Untuk menguji apakah SDK piksel mengumpulkan peristiwa, Anda mungkin diinstruksikan untuk memeriksa tab jaringan browser Anda. Langkah-langkah untuk memeriksa tab jaringan Anda bergantung pada browser web yang Anda gunakan. Misalnya, untuk mempelajari cara memeriksa tab jaringan di browser Google Chrome, lihat dokumentasi Chrome for Developers Memeriksa aktivitas jaringan.