Gunakan jQuery untuk Mendengar Dan Lulus Penjejakan Acara Google Analitis Untuk Sebarang Klik

jQuery Dengar Klik untuk Lulus Penjejakan Acara Google Analitis

Saya terkejut bahawa lebih banyak penyepaduan dan sistem tidak disertakan secara automatik Penjejakan Acara Google Analitis dalam platform mereka. Kebanyakan masa saya bekerja di tapak pelanggan sedang membangunkan penjejakan untuk Acara untuk memberikan pelanggan maklumat yang mereka perlukan tentang tingkah laku pengguna yang berfungsi atau tidak berfungsi di tapak.

Terbaru, saya menulis tentang cara menjejak klik mailto, klik tel, dan Penyerahan borang Elementor. Saya akan terus berkongsi penyelesaian yang saya tulis dengan harapan ia membantu anda menganalisis prestasi tapak atau aplikasi web anda dengan lebih baik.

Contoh ini menyediakan cara yang sangat mudah untuk memasukkan Penjejakan Peristiwa Google Analitis ke dalam mana-mana teg utama dengan menambahkan elemen data yang merangkumi Kategori Acara Google Analitis, Tindakan Acara Google Analitis dan Label Acara Google Analitis. Berikut ialah contoh pautan yang menggabungkan elemen data, dipanggil gaevent:

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

Prasyarat untuk tapak anda ialah memasukkan jQuery di dalamnya... yang dikuasakan dengan skrip ini. Setelah halaman anda dimuatkan, skrip ini menambahkan pendengar ke halaman anda untuk sesiapa sahaja yang mengklik pada elemen dengannya gaevent data… kemudian ia menangkap dan menghuraikan kategori, tindakan dan label yang anda tentukan dalam medan.

<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>

Notis: Saya telah menyertakan makluman (mengulas keluar) supaya anda boleh menguji perkara yang sebenarnya telah diluluskan.

Jika anda menjalankan jQuery pada WordPress, anda perlu mengubah suai kod hanya sedikit kerana WordPress tidak menghargai 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>

Ia bukan skrip yang paling mantap dan anda mungkin perlu melakukan beberapa pembersihan tambahan, tetapi ia sepatutnya membantu anda bermula!