Gunakan jQuery untuk Mendengarkan Dan Melewati Pelacakan Peristiwa Google Analytics Untuk Setiap Klik

jQuery Dengarkan Klik untuk Lulus Pelacakan Peristiwa Google Analytics

Saya terkejut bahwa lebih banyak integrasi dan sistem tidak secara otomatis menyertakan Pelacakan Peristiwa Google Analytics di platform mereka. Sebagian besar waktu saya bekerja di situs klien adalah mengembangkan pelacakan untuk Peristiwa guna memberikan informasi yang mereka butuhkan kepada klien tentang perilaku pengguna apa yang berfungsi atau tidak berfungsi di situs.

Baru-baru ini, saya menulis tentang cara melacak klik mailto, klik telp, dan Pengiriman formulir elemen. Saya akan terus membagikan solusi yang saya tulis dengan harapan dapat membantu Anda menganalisis kinerja situs atau aplikasi web Anda dengan lebih baik.

Contoh ini memberikan cara yang sangat sederhana untuk menggabungkan Pelacakan Peristiwa Google Analytics ke tag jangkar apa pun dengan menambahkan elemen data yang mencakup Kategori Peristiwa Google Analytics, Tindakan Peristiwa Google Analytics, dan Label Peristiwa Google Analytics. Berikut adalah contoh tautan yang menggabungkan elemen data, yang disebut acara:

<a href="#" data-gaevent="Category,Action,Label">Click Here</a>

Prasyarat untuk situs Anda adalah menyertakan jQuery di dalamnya… yang didukung oleh skrip ini. Setelah halaman Anda dimuat, skrip ini menambahkan pendengar ke halaman Anda untuk siapa saja yang mengklik elemen dengan acara data… kemudian menangkap dan mem-parsing kategori, tindakan, dan label yang Anda tentukan di dalam bidang.

<script>
  $(document).ready(function() {      
    $(document).on('click', '[data-gaevent]', function(e) {
      var $link = $(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Pemberitahuan: Saya telah menyertakan peringatan (dikomentari) sehingga Anda dapat menguji apa yang benar-benar lulus.

Jika Anda menjalankan jQuery di WordPress, Anda perlu mengubah kode sedikit saja karena WordPress tidak menyukai pintasan $:

<script>
  jQuery(document).ready(function() {      
    jQuery(document).on('click', '[data-gaevent]', function(e) {
      var $link = jQuery(this);
      var csvEventData = $link.data('gaevent');
      var eventParams = csvEventData.split(',');
      if (!eventParams) { return; }
        eventCategory = eventParams[0]
        eventAction = eventParams[1]
        eventLabel = eventParams[2]
        gtag('event',eventAction,{'event_category': eventCategory,'event_label': eventLabel})
        //alert("The Google Analytics Event passed is Action: " + eventAction + ", Category: " + eventCategory + ", Label: " + eventLabel);
    });
  });
</script>

Ini bukan skrip yang paling kuat dan Anda mungkin perlu melakukan pembersihan tambahan, tetapi ini akan membantu Anda memulai!