Minggu lalu, tim Adobe Dynamic Tag Management all-star menambahkan beberapa fitur baru yang menarik ke aturan berbasis acara DTM. Ada 2 jenis acara baru untuk aturan berbasis acara yang dapat Anda gunakan.

1. Kebiasaan
2. pushState atau hashchange

Baca bagian di bawah ini untuk informasi selengkapnya tentang setiap jenis acara.

Aturan Berbasis Acara: Kustom

Pertama, mari kita tentukan peristiwa khusus. Mari kita lihat beberapa contoh aturan berbasis kejadian lainnya di DTM. Di bawah ini adalah daftar jenis peristiwa untuk aturan berbasis peristiwa.

Saat membuat aturan berbasis peristiwa, Anda dapat menyiapkannya untuk peristiwa default tertentu. Setiap browser (bahkan Internet Explorer) memiliki kejadian default yang dapat dipicu untuk tindakan tertentu. Beberapa yang mudah adalah:

• klik mouse
• mouse overs (melayang di atas sesuatu di halaman)
• fokus bidang formulir (kursor masuk ke dalam bidang formulir)
• bidang formulir kabur (kursor meninggalkan bidang formulir)
• formulir dikirimkan
• dll.

Ini semua masuk akal; itu adalah hal-hal yang kami lakukan setiap hari di web. Terkadang Anda perlu melacak sesuatu dan hampir tidak mungkin melakukannya dengan benar. Inilah mengapa saya suka menggunakan acara JavaScript. Pikirkan suatu peristiwa sebagai gelombang radio. Mereka disiarkan untuk didengar semua orang, tetapi Anda harus menyetel ke frekuensi yang tepat untuk mendengarnya. Jika Anda menyiarkan dan tidak ada yang mendengarkan, bukan masalah besar (jangan beri tahu pengiklan radio). Sama dengan acara: Anda dapat memicu suatu acara dan itu tidak akan menyebabkan masalah atau menimbulkan kesalahan apa pun jika tidak ada sesuatu yang mendengarkannya. Dan jika Anda mendengarkan peristiwa yang tidak pernah terjadi, itu juga tidak akan menimbulkan masalah atau menimbulkan kesalahan.

Mengapa ini penting? Salah satu cara lama untuk melacak tindakan adalah dengan membuat fungsi JavaScript khusus dan kemudian memanggilnya, atau menerapkan kumpulan kode yang sangat spesifik yang dikhususkan untuk sistem manajemen tag atau basis kode lainnya. Tetapi bagaimana jika fungsi itu entah bagaimana dihapus atau diganti namanya? Anda akan mendapatkan kesalahan JavaScript yang terkadang dapat merusak situs. Acara memecahkan masalah itu.

Jika Anda terbiasa dengan aturan panggilan langsung DTM, Anda mungkin bertanya pada diri sendiri “Mengapa tidak menggunakan aturan panggilan langsung saja?” Pertanyaan yang valid. Masalahnya adalah aturan panggilan langsung membangun ketergantungan pada DTM. Jika saya seorang pengembang dan seseorang mengatakan kepada saya untuk memasukkan banyak kode referensi _satellite.track dalam kode saya, saya akan mempertanyakannya dan kemungkinan besar mengatakan tidak! Sebagai gantinya, Anda dapat menggunakan acara yang tidak memiliki ketergantungan.

Untuk dapat mendengarkan suatu acara, Anda harus memicunya terlebih dahulu. Acara harus ditentukan dalam kode situs oleh pengembang Anda. Mengidentifikasi kapan dan di mana menggunakannya mungkin sedikit rumit, tetapi aturan praktis yang sederhana adalah jika itu adalah sesuatu yang ingin Anda lacak, dan Anda tidak dapat melacaknya dengan jenis peristiwa DTM yang telah ditentukan sebelumnya, gunakan peristiwa khusus. Kami dapat menemukan beberapa informasi bagus tentang cara melakukan ini dari Mozilla. Ada 2 jenis peristiwa dasar:

• Acara – memicu sesuatu terjadi tanpa mengirimkan data tambahan apa pun tentang acara tersebut
• CustomEvent – ​​tambahkan beberapa data ke acara tersebut

Saya akan menggunakan contoh dengan acara khusus, karena memungkinkan Anda untuk menambahkan data. Katakanlah kita memiliki keranjang belanja, dan ketika Anda menambahkan sesuatu ke keranjang itu menggunakan AJAX. Ini berarti halaman baru tidak dimuat, tetapi mungkin ada munculan atau pesan yang memberi tahu Anda bahwa item telah ditambahkan ke keranjang. Saat ini terjadi, saya dapat membuat acara khusus yang memberi tahu saya dengan tepat apa yang telah ditambahkan:

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

Pada kode di atas Anda dapat melihat bahwa saya mereferensikan data dari objek bernama "data". Saya mendefinisikan data "detail" khusus sebagai objek, yang kemudian dapat saya rujuk saat mendengarkan acara tersebut. Setelah membangun acara, saya kemudian memicunya pada elemen tertentu, dalam hal ini elemen di halaman dengan id "minicart". Sekarang saya memiliki acara khusus yang disiarkan untuk siapa saja yang ingin mendengarkan.

Selanjutnya saya akan mengonfigurasi aturan untuk mendengarkan di DTM:

1. Tambahkan aturan berbasis peristiwa baru
2. Beri nama
3. Pilih jenis acara "khusus" dan masukkan nama acara, yang kami tetapkan sebagai "addToCart"
   
4. Tentukan tag atau elemen yang akan memiliki acara ini. Menggunakan pemilih CSS, ini akan menjadi "#minicart"
   
5. Konfigurasi aturan. Di sinilah menjadi keren. Anda dapat menggunakan "detail" yang disediakan di acara tersebut dan bahkan dapat menggunakannya sebagai objek. TERIMA KASIH ADOBE! Di sini saya mengirimkan acara Google Analytics dengan data yang saya inginkan. Anda dapat mereferensikan data dengan menggunakan %event.detail%, atau jika Anda memiliki objek, Anda dapat mereferensikannya sebagai %event.detail.<<name>>%. Lihat contoh di bawah ini.
   
   Saya mungkin tidak akan pernah mengirim acara seperti ini, tetapi Anda mendapatkan inti bagaimana itu dapat digunakan. Dan jika Anda perlu menggunakannya dalam kode khusus, katakanlah untuk alat Adobe Analytics, Anda dapat mereferensikannya sebagai _satellite.getVar(“%event.detail.product_id%”). SAUS LUAR BIASA!!!

Ini tidak dimaksudkan untuk menjadi novel, tetapi saya ingin menunjukkan betapa hebatnya fitur ini. Seperti halnya saya menyukai aturan panggilan langsung, mereka mengambil kursi belakang dalam implementasi saya, dan acara khusus duduk senapan.

pushState atau hashchange

pushState

Sekarang mari kita lihat pushState. Ini pada dasarnya memungkinkan Anda untuk memperbarui URL halaman/situs tanpa harus benar-benar memuat halaman baru. Itu sendiri tidak melakukan apa-apa, tetapi memungkinkan aplikasi satu halaman untuk digunakan. Ada beberapa framework yang memanfaatkan fitur ini. Jadi, jika situs Anda dibuat seperti ini, fitur pushState bisa sangat berguna!

Saat menyiapkan aturan, tentu saja Anda akan memilih jenis acara baru.

Tidak diperlukan pemilih CSS untuk mendefinisikannya lebih lanjut. Namun, Anda akan ingin melihat beberapa kondisi. Yang utama yang akan Anda gunakan, jika Anda hanya melihat URL baru, adalah path. Itu dia!

hashchange

Berkat Twitter kita semua tahu apa itu hash (hash tag), jadi hashchange harus mengacu pada perubahan hash! Hal keren tentang hash adalah Anda dapat mengubahnya semau Anda dan tidak menyebabkan halaman dimuat. Hash dapat digunakan untuk banyak tujuan, jadi kami tidak akan membahas alasan mengapa seseorang memilikinya. Sebelum pushState ada, tidak jarang memperbarui hash dengan konten baru untuk AJAXy atau situs satu halaman.

Untuk mengonfigurasi aturan baru, pilih jenis peristiwa yang sama dengan pushState. Satu-satunya perbedaan adalah Anda sekarang dapat melihat hash sebagai kriteria Anda. Misalnya:

Kesimpulan

Adobe DTM adalah sistem manajemen tag teratas di luar sana, dan beruntung bagi Anda klien Adobe, gratis! Gunakan tips bermanfaat ini untuk membantu Anda memanfaatkan kekuatan dan potensinya, dan sering-seringlah memeriksa kembali untuk mengetahui lebih lanjut! Jika Anda mencari bantuan untuk analitik situs web Anda, Hubungi Kami dan kami akan mengirimkan proposal gratis tentang bagaimana kami dapat membantu Anda!