הוספת analytics.js לאתר

ספריית analytics.js (שנקראת גם 'התג של Google Analytics') היא ספריית JavaScript שמודדת את האינטראקציות של המשתמשים עם האתר. כאן מוסבר איך להוסיף את תג Google Analytics לאתר.

תג Google Analytics

יש להוסיף את התג של Google Analytics בחלק העליון של התג <head> ולפני כל סקריפט או תגי CSS אחרים, ולהוסיף את מזהה הנכס של נכס Google Analytics שאיתו רוצים לעבוד.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

הקוד שלמעלה מבצע ארבע מטרות עיקריות:

  1. יוצר רכיב <script> שמתחיל בהורדה אסינכרונית של ספריית analytics.js JavaScript מ-https://www.google-analytics.com/analytics.js
  2. מפעיל פונקציית ga גלובלית (שנקראת תור הפקודות ga()) שמאפשרת לתזמן פקודות להפעלה לאחר שספריית analytics.js נטענת ומוכנה לפעולה.
  3. מוסיף פקודה לתור הפקודות של ga() כדי ליצור אובייקט מעקב חדש עבור המאפיין שצוין באמצעות הפרמטר 'GA_MEASUREMENT_ID'.
  4. מוסיף פקודה נוספת לתור הפקודות ga() כדי לשלוח צפייה בדף אל Google Analytics של הדף הנוכחי.

כדי לבצע הטמעות מותאמות אישית, ייתכן שיהיה צורך לשנות את שתי השורות האחרונות של התג של Google Analytics (הפקודות create ו-send) או להוסיף קוד כדי לתעד יותר אינטראקציות. עם זאת, אין לשנות את הקוד שטוען את ספריית analytics.js או מפעיל את פונקציית תור הפקודות ga().

תג אסינכרוני חלופי

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

התג האסינכרוני החלופי שמופיע בהמשך מוסיף תמיכה בטעינה מראש שתעניק שיפור קטן בביצועים בדפדפנים מודרניים, אבל יכול לפגוע בטעינה ובהפעלה סינכרוניות ב-IE 9 ובדפדפנים ישנים יותר לנייד שלא מזהים את מאפיין הסקריפט async. יש להשתמש בהגדרת התג הזו רק אם המבקרים משתמשים בעיקר בדפדפנים מודרניים כדי לגשת לאתר.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

אילו נתונים תיעוד של התג של Google Analytics?

כשמוסיפים אחד מהתגים האלה לאתר, המערכת שולחת צפייה בדף בכל דף שהמשתמשים נכנסים אליו. Google Analytics מעבד את הנתונים האלה ויכול להסיק מידע רב, כולל:

  • משך הזמן הכולל שמשתמש שוהה באתר שלכם.
  • משך הזמן שמשתמש שהה בכל דף ובאיזה סדר ביקרו בדפים.
  • אילו קישורים פנימיים לחצו (על סמך כתובת ה-URL של הצפייה הבאה בדף).

בנוסף: המערכת משתמשת בכתובת ה-IP, במחרוזת של סוכן המשתמש ובבדיקה הראשונית של הדף שמתבצעת ב-analytics.js כשיוצרים אובייקט מעקב חדש, כדי לקבוע דברים כמו:

  • המיקום הגיאוגרפי של המשתמש.
  • הדפדפן ומערכת ההפעלה שמשתמשים בהם.
  • גודל המסך והאם מותקנים Flash או Java.
  • האתר המפנה.

השלבים הבאים

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

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

המדריך הבא בסדרה הזו מסביר איך פועל analytics.js.