מדריך: Google Analytics

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

דרישות

המדריך הזה מצפה שתהיה לכם כמה תוספים מוכרים לכתיבה ב-Google Chrome. למידע על כתיבת תוסף, קראו את המדריך לתחילת העבודה.

בנוסף, יש להגדיר חשבון Google Analytics כדי לעקוב אחר התוסף. שימו לב שבעת הגדרת החשבון, תוכלו להשתמש בכל ערך בשדה URL של האתר, כי לתוסף לא תהיה כתובת URL משלו.

הגדרת ניתוח הנתונים עם מידע על תוסף Chrome

התקנת קוד המעקב

אם הדף הנוכחי נטען באמצעות פרוטוקול https://, קטע קוד המעקב הרגיל של Google Analytics מאחזר קובץ בשם ga.js מכתובת URL שמוגנת באמצעות SSL. אפליקציות ותוספים של Chrome יכולים להשתמש רק בגרסה של ga.js שמוגנת באמצעות SSL. לפי הגדרת ברירת המחדל של מדיניות אבטחת התוכן של Chrome, הטעינה של ga.js באמצעות HTTP לא מאובטח אסורה. בנוסף לעובדה שתוספים ל-Chrome מתארחים לפי הסכימה chrome-extension://, צריך לשנות מעט את קטע הקוד הרגיל למעקב כך שישלוף ga.js ישירות מ-https://ssl.google-analytics.com/ga.js במקום מהמיקום שמוגדר כברירת מחדל.

בהמשך מופיע קטע קוד שהשתנה עבור ממשק ה-API למעקב האסינכרוני (השורה ששונתה מודגשת):

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

כמו כן, צריך לוודא שלתוסף יש גישה לטעינת המשאב על ידי הקלה במדיניות ברירת המחדל בנושא אבטחת תוכן. הגדרת המדיניות בmanifest.json עשויה להיראות כך:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

זהו דף קופץ (popup.html) שטוען את קוד המעקב האסינכרוני באמצעות קובץ JavaScript חיצוני (popup.js) ועוקב אחר תצוגת דף אחת:

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

חשוב לזכור שצריך להחליף את המחרוזת UA-XXXXXXXX-X במספר חשבון Google Analytics שלכם.

מעקב אחר צפיות בדף

הקוד _gaq.push(['_trackPageview']); יעקוב אחר צפייה יחידה בדף. ניתן להשתמש בקוד הזה בכל דף בתוסף שלכם. כאשר מציבים אותה בדף רקע, נרשמת צפייה פעם אחת בכל הפעלה בדפדפן. כשמציבים חלון קופץ, נספרת תצוגה בכל פעם שהוא נפתח.

עיון בנתוני הצפייה בדף של כל דף בתוסף שלך יאפשר לך לקבל מושג לגבי מספר הפעמים שמשתמשים מקיימים אינטראקציה עם התוסף בכל פעילות באתר:

תצוגת Analytics של התוכן המוביל באתר

מעקב אחרי בקשות לניתוח נתונים

כדי לוודא שנתוני המעקב מהתוסף שלכם נשלחים אל Google Analytics, תוכלו לבדוק את דפי התוסף בחלון 'כלים למפתחים' (למידע נוסף, קראו את המדריך לניפוי באגים). כפי שמוצג באיור הבא, אמורות להופיע בקשות לקובץ בשם __utm.gif אם כולן מוגדרות כראוי.

חלון של כלים למפתחים שמציג את הבקשה __utm.gif

מעקב אחר אירועים

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

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

כותבים פונקציה ששולחת אירועי קליקים אל Google Analytics:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

ויש להשתמש בו כ-handler של אירועים עבור כל לחיצת לחצן:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

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

תצוגת Analytics של נתוני המעקב אחר אירועים של אתר

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

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

קוד לדוגמה

תוסף לדוגמה שמשתמש בטכניקות האלה זמין במאגר הדוגמאות.