השתמש ב-jQuery כדי להאזין ולהעביר מעקב אחר אירועים של Google Analytics עבור כל קליק

jQuery האזינו לקליקים כדי לעבור מעקב אחר אירועים של Google Analytics

אני מופתע שיותר אינטגרציות ומערכות לא כוללות אוטומטית מעקב אחר אירועים בגוגל אנליטיקס בפלטפורמות שלהם. חלק גדול מהזמן שלי בעבודה באתרים של לקוחות הוא פיתוח מעקב לאירועים כדי לספק ללקוח את המידע הדרוש לו לגבי התנהגויות המשתמשים שעובדות או לא עובדות באתר.

לאחרונה, כתבתי על איך לעקוב לחיצות mailto, טל קליקים, ו הגשת טופס אלמנטור. אני אמשיך לשתף את הפתרונות שאני כותב בתקווה שזה יעזור לך לנתח טוב יותר את ביצועי האתר או יישום האינטרנט שלך.

דוגמה זו מספקת אמצעי פשוט מאוד לשילוב מעקב אחר אירועים של Google Analytics בכל תג עוגן על ידי הוספת רכיב נתונים הכולל את קטגוריית האירועים של 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, תרצה לשנות מעט את הקוד מאחר וורדפרס לא מעריכה את קיצור הדרך $:

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

זה לא הסקריפט הכי חזק וייתכן שתצטרך לבצע ניקוי נוסף, אבל זה אמור להתחיל!