ใช้ jQuery เพื่อฟังและผ่านการติดตามเหตุการณ์ของ Google Analytics สำหรับการคลิกใด ๆ

jQuery ฟังการคลิกเพื่อผ่านการติดตามกิจกรรมของ Google Analytics

ฉันแปลกใจที่การผสานรวมและระบบจำนวนมากขึ้นไม่ได้รวมโดยอัตโนมัติ การติดตามกิจกรรม Google Analytics ในแพลตฟอร์มของพวกเขา เวลาส่วนใหญ่ของฉันที่ทำงานในเว็บไซต์ของลูกค้ากำลังพัฒนาการติดตามเหตุการณ์เพื่อให้ลูกค้าได้รับข้อมูลที่ต้องการเกี่ยวกับพฤติกรรมของผู้ใช้ที่ทำงานหรือไม่ทำงานบนไซต์

ล่าสุดฉันเขียนเกี่ยวกับวิธีการติดตาม mailto คลิก, คลิกโทรและ การส่งแบบฟอร์มองค์ประกอบ. ฉันจะแบ่งปันโซลูชันที่ฉันเขียนต่อไปด้วยความหวังว่าจะช่วยให้คุณวิเคราะห์ไซต์หรือประสิทธิภาพของแอปพลิเคชันเว็บได้ดียิ่งขึ้น

ตัวอย่างนี้แสดงวิธีการง่ายๆ ในการรวมการติดตามเหตุการณ์ของ Google Analytics เข้ากับแท็ก Anchor โดยการเพิ่มองค์ประกอบข้อมูลที่มีหมวดหมู่เหตุการณ์ของ Google Analytics, การดำเนินการกับเหตุการณ์ของ Google Analytics และป้ายกำกับเหตุการณ์ Google Analytics ต่อไปนี้คือตัวอย่างลิงก์ที่รวมองค์ประกอบข้อมูลที่เรียกว่า gaevent:

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

ข้อกำหนดเบื้องต้นสำหรับเว็บไซต์ของคุณคือการรวม jQuery ไว้ด้วย… ซึ่งสคริปต์นี้ขับเคลื่อนด้วย เมื่อโหลดหน้าของคุณแล้ว สคริปต์นี้จะเพิ่มฟังไปยังหน้าของคุณสำหรับทุกคนที่คลิกองค์ประกอบด้วย gaevent ข้อมูล... จากนั้นจะรวบรวมและแยกวิเคราะห์หมวดหมู่ การกระทำ และป้ายกำกับที่คุณระบุภายในฟิลด์

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

ไม่ใช่สคริปต์ที่แข็งแกร่งที่สุดและคุณอาจต้องทำความสะอาดเพิ่มเติม แต่ควรเริ่มต้นได้!