किसी भी क्लिक के लिए Google Analytics ईवेंट ट्रैकिंग सुनने और पास करने के लिए jQuery का उपयोग करें

Google Analytics ईवेंट ट्रैकिंग पास करने के लिए क्लिक के लिए jQuery सुनें

मुझे आश्चर्य है कि अधिक एकीकरण और सिस्टम स्वचालित रूप से शामिल नहीं होते हैं गूगल एनालिटिक्स इवेंट ट्रैकिंग उनके प्लेटफार्मों में। क्लाइंट की साइटों पर काम करने में मेरा अधिकांश समय ईवेंट के लिए ट्रैकिंग विकसित कर रहा है ताकि क्लाइंट को यह जानकारी प्रदान की जा सके कि साइट पर कौन से उपयोगकर्ता व्यवहार काम कर रहे हैं या नहीं।

हाल ही में, मैंने लिखा था कि कैसे ट्रैक करें मेलटो क्लिक, दूरभाष क्लिक, तथा एलिमेंट फॉर्म सबमिशन. मैं उन समाधानों को साझा करना जारी रखूंगा जो मैं इस उम्मीद के साथ लिख रहा हूं कि यह आपकी साइट या वेब एप्लिकेशन के प्रदर्शन का बेहतर विश्लेषण करने में आपकी मदद करेगा।

यह उदाहरण Google Analytics ईवेंट ट्रैकिंग को Google Analytics ईवेंट श्रेणी, Google Analytics ईवेंट एक्शन और Google Analytics ईवेंट लेबल सहित डेटा तत्व जोड़कर किसी भी एंकर टैग में शामिल करने का एक बहुत ही सरल माध्यम प्रदान करता है। यहां एक लिंक का उदाहरण दिया गया है जिसमें डेटा तत्व शामिल है, जिसे कहा जाता है गेवेंट:

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

आपकी साइट के लिए एक पूर्वापेक्षा इसमें jQuery शामिल है... जिसके साथ यह स्क्रिप्ट संचालित है। एक बार जब आपका पृष्ठ लोड हो जाता है, तो यह स्क्रिप्ट आपके पृष्ठ पर किसी भी व्यक्ति के लिए एक तत्व पर क्लिक करने के लिए एक श्रोता जोड़ देती है गेवेंट डेटा… फिर यह आपके द्वारा फ़ील्ड के भीतर निर्दिष्ट श्रेणी, क्रिया और लेबल को कैप्चर और पार्स करता है।

<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 चला रहे हैं, तो आप कोड को थोड़ा संशोधित करना चाहेंगे क्योंकि वर्डप्रेस $ शॉर्टकट की सराहना नहीं करता है:

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

यह सबसे मजबूत स्क्रिप्ट नहीं है और आपको कुछ अतिरिक्त सफाई करने की आवश्यकता हो सकती है, लेकिन यह आपको शुरू करना चाहिए!