אינטראקציות חברתיות – מעקב באינטרנט (ga.js)

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

מבוא

כברירת מחדל, Google Analytics מספק דיווח משולב עבור כפתור 1+. המשמעות היא שאם יישמת ga.js ולחצן 1+ באותו דף, כל האינטראקציות של 1+ החברתיות ידווחו באופן אוטומטי. למידע נוסף על +1 Analytics, כולל טיפים לפתרון בעיות, ראה מידע על Analytics חברתי במרכז העזרה.

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

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

הגדרת Analytics חברתי

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

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

הנה תיאור של השיטה _trackSocial:

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

שבהם הפרמטרים מייצגים:

  • network

    חובה. מחרוזת שמייצגת את הרשת החברתית שאחריה מתבצע מעקב (למשל, Facebook, Twitter, LinkedIn).

  • socialAction

    חובה. מחרוזת שמייצגת את הפעולה החברתית שאחריה מתבצע מעקב (למשל: סימון לייק, שיתוף, ציוץ).

  • opt_target

    זה שינוי אופציונלי. מחרוזת שמייצגת את כתובת ה-URL (או המשאב) שמקבל את הפעולה. לדוגמה, אם משתמש לוחץ על הלחצן לייק בדף באתר כלשהו, יכול להיות שה-opt_target מוגדר ככותרת הדף, או כמזהה שמשמש לזיהוי הדף במערכת ניהול תוכן. במקרים רבים, הדף שסימנתם בלייק הוא אותו הדף שבו אתם נמצאים. אם הפרמטר הזה הוא undefined או שהושמט, כברירת מחדל קוד המעקב הוא document.location.href.

  • opt_pagePath

    זה שינוי אופציונלי. מחרוזת שמייצגת את הדף לפי נתיב (כולל פרמטרים) שממנו התרחשה הפעולה. לדוגמה, אם לוחצים על לחצן לייק בכתובת https://developers.google.com/analytics/devguides/, צריך להגדיר את opt_pagePath כ-/analytics/devguides. כמעט תמיד, נתיב הדף הוא המקור לפעולה החברתית. לכן, אם הפרמטר הזה הוא undefined או שהושמט, קוד המעקב יוגדר כברירת מחדל באמצעות location.pathname עם location.search. בדרך כלל צריך להגדיר את המדד הזה רק אם מתבצע מעקב אחר צפיות וירטואליות בדף על ידי שינוי הפרמטר האופציונלי של נתיב הדף באמצעות השיטה _trackPageview של Google Analytics.

פעולות ב-Facebook

לפי Facebook JavaScript SDK, הדרך הפשוטה ביותר להגדיר לחצן לייק בדף היא באמצעות הקוד הבא:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

לייקים

כדי לתעד לייקים ב-Google Analytics, הירשמו לאירוע edge.create של Facebook וצרו פונקציית קריאה חוזרת להפעלת קוד המעקב של Google Analytics.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

כשמשתמש מסמן לייק לדף, פונקציית הקריאה החוזרת מופעלת ומקבלת את כתובת ה-URL של המשאב שסומן בלייק. לאחר מכן המשאב מועבר כערך ל-method _trackSocial, כדי שמערכת Google Analytics תוכל לדווח על הרשת, הפעולה וכתובת ה-URL שמסומנות בלייק.

ביטול לייק

ממשקי ה-API של Facebook גם מאפשרים להירשם לאירועים מעניינים אחרים, כמו סימוני 'לא אהבתי'.

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

שיתופים

אפשר גם להירשם לשיתופים.

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

ציוצים ב-Twitter

בהתאם למסמכי התיעוד בנושא לחצן הציוץ ול אירועי JavaScript של כוונות אינטרנט, כדי להטמיע לחצן twitter בדף שלך ולזהות אינטראקציות של משתמשים, יש להשתמש בקוד הבא :

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

כדי לעקוב אחר אירועים של לחצן הציוץ ב-Google Analytics, עליך להשתמש באירועי JavaScript של כוונות אינטרנט של Twitter ולשייך פונקציית קריאה חוזרת ל-Intent Event. חשוב לארוז את קישורי האירועים בפונקציית קריאה חוזרת, כדי לוודא שהכול נטען לפני האירועים המקושרים.

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

כשמשתמש מצייץ, פונקציית הקריאה החוזרת מקבלת אובייקט שבדרך כלל אפשר להשתמש בו כדי לקבל את כתובת ה-URL של המשאב שאליו הציוץ שלו. לאחר שקוד ה-JavaScript של Twitter נטען, הקישור של הציוץ עם ההערה הופך ל-iframe, וכתובת ה-URL שאליה מתבצע הציוץ מקודדת ומתווספת כפרמטר של שאילתה לכתובת ה-URL של ה-iframe. אובייקט האירוע שמועבר אל הקריאה החוזרת (callback) מכיל הפניה ל-iframe הזה, ואנחנו יכולים להשתמש בו כדי לקבל את כתובת ה-URL של המשאב שאליו מפנה הציוץ.

פונקציית הקריאה החוזרת שלמעלה מוודאת שהפניה ל-iframe היא אכן iframe, ולאחר מכן מנסה לחלץ את המשאב שהציוץ על ידי בדיקת הפרמטר של השאילתה url.

הנה פונקציה לדוגמה לחילוץ פרמטר שאילתה מ-URI:

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

הפרמטר מוחזר אם הוא ממוקם במחרוזת השאילתה. אם לא ממוקם פרמטר, הפונקציה מחזירה את הערך undefined, שמועבר ל-method _trackSocial והתוצאה היא התנהגות ברירת המחדל של השיטה.

שיטות עבודה מומלצות לשילוב

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

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

יצירת מופע ושימוש בתור _gaq

הגרסה האחרונה של קוד המעקב של Google Analytics תומכת בטעינה גם באופן סינכרוני וגם באופן אסינכרוני. כדי לאפשר למפתחים להפעיל שיטות קריאה שעדיין לא נטענו, מערכת Google Analytics מספקת תור של פקודות _gaq, שאליו ניתן לדחוף את שיטות המעקב _gaq.push();.

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

var _gaq = _gaq || [];

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

הגדרות משתמש

אם אתם מפתחים פלאגין שמשלב את הפלאגין החברתי של Analytics, מומלץ לספק את האפשרויות הבאות, כדי לאפשר למשתמשים להגדיר מתי הם משתמשים בפלאגין:

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

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

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

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

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

כלי מעקב מרובים

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

הדוגמה הבאה ממחישה איך לבצע איטרציה וקריאה לשיטה _trackSocial לכל אובייקט מעקב. היא משתמשת בשיטה _getTrackers שמחזירה מערך של כל אובייקטי המעקב בדף.

בדוגמה הזו, כשהאירוע של Facebook מופעל, השיטה _trackSocial עבור כל אובייקט מעקב מועברת לתור הפקודות של Google Analytics _gaq. 

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}