استخدم jQuery للاستماع وتمرير تتبع أحداث Google Analytics لأي نقرة

jQuery استمع للنقرات لتمرير تتبع أحداث Google Analytics

أنا مندهش من أن المزيد من عمليات الدمج والأنظمة لا تتضمن تلقائيًا Google Analytics تتبع الأحداث في منصاتهم. معظم وقتي في العمل على مواقع العملاء هو تطوير تتبع الأحداث لتزويد العميل بالمعلومات التي يحتاجها حول سلوكيات المستخدم التي تعمل أو لا تعمل على الموقع.

في الآونة الأخيرة ، كتبت عن كيفية التتبع نقرات mailto, نقرات الهاتفو عمليات إرسال نموذج العنصر. سأستمر في مشاركة الحلول التي أكتبها على أمل أن تساعدك على تحليل أداء موقعك أو تطبيق الويب بشكل أفضل.

يوفر هذا المثال وسيلة بسيطة للغاية لدمج تتبع أحداث Google Analytics في أي علامة ارتساء عن طريق إضافة عنصر بيانات يتضمن فئة حدث Google Analytics ، وإجراء حدث Google Analytics ، وتصنيف حدث Google Analytics. فيما يلي مثال على ارتباط يدمج عنصر البيانات المسمى ضعيف:

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

أحد المتطلبات الأساسية لموقعك هو تضمين jQuery فيه… الذي يتم تشغيل هذا النص البرمجي به. بمجرد تحميل صفحتك ، يضيف هذا البرنامج النصي مستمعًا إلى صفحتك لأي شخص ينقر على عنصر به ضعيف data… ثم يلتقط ويحلل الفئة ، والإجراء ، والتسمية التي تحددها داخل الحقل.

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

ملاحظة: لقد قمت بتضمين تنبيه (تم التعليق عليه) حتى تتمكن من اختبار ما تم اجتيازه بالفعل.

إذا كنت تقوم بتشغيل jQuery على WordPress ، فستحتاج إلى تعديل الكود قليلاً لأن WordPress لا يقدر الاختصار $:

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

إنه ليس البرنامج النصي الأكثر قوة وقد تحتاج إلى إجراء بعض التنقية الإضافية ، ولكن يجب أن تبدأ!