אוקיי אז היום אני רוצה להתחיל עם פוסט ראשון מתוך סדרה של פוסטים שיהיו (בעזרת ה׳) על נושא מאוד לא מדובר בזירת הבלוגים הישראלית:
Google Tag Manager!
אני לא רוצה להכנס כרגע להסברים בסיסיים על גוגל תג מנג׳ר, איך מתקינים את הקוד באתר, איך מוסיפים תגי מעקב בסיסיים ועוד כל מיני דברים כאלו כי אני יוצא מתוך נקודת הנחה שאתם כבר יודעים את הדברים הללו.
וגם אם לא – זאת בדיוק הסיבה שכדאי לכם להרשם לעדכונים ולקרוא עוד פוסטים בנושא, חלקם יהיו בדיוק על הנושאים הללו 🙂
אבל בואו נתחיל:
באופן עקרוני בפוסט הזה אני רוצה להסביר איך אפשר לעקוב אחרי Social Actions ביוניברסל אנליטיקס. כלומר – אנחנו רוצים לדעת כמה לייקים/תגובות או +1ים קיבלנו וכמובן באיזה עמודים קיבלנו אותם.
בצורה כזו נוכל לדעת באיזה עמודים קיבלנו הכי הרבה (אולי נגלה שהקהל שלנו אוהב את החומר הזה ואז נרצה לפרסם עוד כאלו), האם קיבלנו יותר לייקים מאשר +1ים (ואז אולי נרצה לחזק את פעולת ה+1 או להביא עוד גולשים מפייסבוק) ואם נלך על content grouping כפי שכתבתי כאן בעבר אז בכלל נוכל לראות את המידע הזה לא רק ברמת העמוד הבודד – אלא גם באיזה קטגוריות או (אם יש לנו בלוג מרובה כותבים) אילו כותבים קיבלו את הכי הרבה social actions (ואז לצפ׳ר אותם בבונוס) ועוד ועוד…
אם עדיין לא יצא לכם להשתמש בדוח הזה, אז כל נתוני הסושיאל באנליטיקס נמצאים ב Aquisition>Social. אנחנו נתמקד בדוח הPlugin שבעצם נועד לתת לכם מידע על לחצני השיתוף ששמתם באתר.
[הערות]
1. כאן יש מדריך מעולה למעקב אחרי כל האירועים בגוגל אנליטיקס בגרסא הקלאסית. המדריך הוא דיי טכני ומתייחס רק לגרסא הקלאסית, אבל מכסה יותר אירועים מאשר הפוסט הזה. הפוסט הזה יעסוק רק ביוניברסל אנליטיקס, וידבר על מעקב עם גוגל טג מנג׳ר בלי צורך לגעת בקוד (כמעט).
2. קלאסיק אנליטיקס יודע לעקוב אחרי פעולות +1 באופן אוטומטי. היוניברסל עדיין לא יודע ולכן המידע בפוסט הזה רלוונטי עד שגוגל יחליטו להוסיף את המעקב האוטומטי גם ליוניברסל.
[/הערות]
בהנחה שכבר התקנתם את לחצני השיתוף באתר שלכם (ואם לא – הנה הסבר על התקנת לייקים, עוד הסבר על +1) – נתחיל מזה שפשוט תיצרו מקרו חדש בגוגל טג מנג׳ר ותקראו לו Social Network.
(מקרו זו פשוט ״קופסא״ שאליה נכניס נתונים על מנת להשתמש בהם בהמשך.)
ובכן המקרו הראשון שלנו יקבל את הנתונים של הרשת החברתית עליה הגולש לחץ – גוגל או פייסבוק.
שימו לב שלשדה Data Layer Variable Name הכנסתי את השם של הקופסא שלנו – theSocialNetwork, שאליה נכניס את השם של הרשת החברתית בה בוצעה הפעולה.
עכשיו בואו ניצור את הקופסא השניה שתקבל את הפעולה שאותה הגולש ביצע (לייק, תגובה או +1):
עכשיו נשארו לנו 2 פעולות: להכניס מידע לקופסאות ולשלוח את המידע לגוגל אנליטיקס באמצעות tag מתאים בגוגל טג מנג׳ר.
נתחיל דווקא מהפעולה השניה כי היא יותר פשוטה יחסית:
ניצור טג חדש של יוניברסל אנליטיקס, ובתפריט track type נבחר social.
נכניס את הtracking ID של החשבון שלנו כמובן, ובשדות Network, Action ו-Action Target נכניס את המקרו שיצרנו קודם – בהתאמה (שימו לב שקצת שיניתי את השמות של המקרו אצלי אז אל תתבלבלו. נטוורק לנטוורק, אקשן לאקשן וטרגט לטרגט).
עכשיו נכנס ל rules וניצור חוק חדש שישגר את הטג שלנו רק כאשר האירוע event = socialinteraction קורה:
האיוונט הזה הוא גם כן סוג של ״קופסא״ שאליה נכניס עוד מעט ערכים באמצעות קוד JS פשוט, וכאשר גוגל טג מנג׳ר יזהה שהערך בקופסא שווה ל-socialinteraction (וזה יהיה כאשר הגולש ילחץ על לחצן לייק או +1) – הוא יפעיל את הטג שהגדרנו עכשיו וישלח את הנתונים לגוגל אנליטיקס.
פשוט נכון?
אז בואו נתקדם!
עכשיו אנחנו צריכים להוסיף את הקוד שיכניס את הנתונים הנכונים לכל הקופסאות שיצרנו, ולשם כך ניצור טג HTML שיכיל את הטקסט הבא:
<script>
if (typeof FB !== ‘undefined’){
FB.Event.subscribe(‘edge.create’,
function(href) {
dataLayer.push({
‘event’: ‘socialinteraction’,
‘theSocialNetwork’: ‘Facebook’,
‘theSocialAction’: ‘Like’,
‘theSocialTarget’: href
});
}
);
}
</script>
[/code]
לטג הזה נצרף rule פשוט עם event}} equals gtm.dom}} שישגר אותו ברגע שהדף נטען במלואו (זה מקרו שמגיע בילדאין בגוגל טג מנג׳ר).
הסבר:
הקוד הזה הוא פשוט callback function, כלומר קוד שמופעל אחרי שהגולש עושה לייק לעמוד שלנו.
הפונקציה FB.Event.subscribe בודקת אם אירוע מסוים (שקשור לפייסבוק) התרחש, ומיד אחריו היא מריצה את הפונקציה שהגדרנו לה = callback function.
במקרה שלנו אנחנו מגדירים פונקציית callback שרצה מיד אחרי שהגולש עושה לייק לעמוד שלנו (‘edge.create’ בשפה של פייסבוק).
פונקצית הcallback שלנו פשוט מכניסה לקופסאות שיצרנו מקודם (=macro) את הנתונים הבאים:
לקופסא event היא מכניסה את הערך socialinteraction,
לקופסא theSocialNetwork היא מכניסה את הערך Facebook,
לקופסא theSocialAction היא מכניסה את הערך Like,
ולקופסא theSocialTarget היא מכניסה את הכתובת שמופיעה באותו הרגע בדפדפן.
אם אתם זוכרים מה שאמרתי קודם, אז ברגע שגוגל טג מנג׳ר מזהה שהערך socialintraction נכנס לקופסא event – הוא מיד מפעיל את קוד המעקב של הsocial ששולח לאנליטיקס את המידע שב-3 הקופסאות האחרות.
פשוט הא?
עכשיו נראה איך שמים מעקב אחרי Facebook comments באמצעות גוגל טג מנג׳ר
מכיוון שבFB.Event.subscribe אפשר להשתמש גם באירועים נוספים, תראו כמה פשוט לשגר באמצעות הגוגל טג מנג׳ר גם דיווח על תגובה שמישהו רשם. מה שצריך לעשות זה פשוט להוסיף את הקוד הבא באותו תג HTML שהכנסנו קודם:
<script>
if (typeof FB !== ‘undefined’){
FB.Event.subscribe(‘comments.create’,
function(href) {
dataLayer.push({
‘event’: ‘socialinteraction’,
‘theSocialNetwork’: ‘Facebook’,
‘theSocialAction’: ‘Comment’,
‘theSocialTarget’: href
});
}
);
}
</script>
[/code]שימו לב שחוץ מהשינוי של comments.create (במקום edge.create) והשינוי של הערך שהכנסנו לtheSocialAction – כל השאר נשאר בדיוק אותו הדבר!
comments.create מבטא בעצם את פעולת התגובה באמצעות פלאגין התגובות של פייסבוק באתר שלנו, מה שאומר לפונקציה שלנו לפעול מיד אחרי שמישהו ירשום תגובה.
(כאן תוכלו לראות עוד פעולות פייסבוקיות באתר שאפשר לשייך אליהם פונקציות.)
בסופו של דבר דוח הסושיאל שלכם יראה ככה:
אבל רגע רגע רגע!
אמרתי לכם בהתחלה שקלאסיק אנליטיקס עוקב אוטומטית אחרי לחיצות של +1, ועוד לא הראיתי לכם איך עושים את זה ביוניברסל אנליטיקס. אז אם עברתם את השלב של פייסבוק – השלב הזה יהיה עבורכם משחק ילדים.
מעקב אחרי לחיצות +1 עם גוגל טג מנג׳ר
קודם כל תטמיעו את הכפתור של גוגל+ כפי שמופיע בהוראות כאן, ולאחר מכן אתם תראו שכדי לרנדר את הכפתור אתם פשוט צריכים לרשום <g:plusone></g:plusone> עם אפשרות להכניס את אחד מה-attributes שנמצאים ברשימה שכאן.
הattribute שבו אנחנו נשתמש יהיה כמובן data-callback, ולכן אנחנו נכניס את הכפתור שלנו בצורה כזו:
<g:plusone data-callback=”plusOneAction”></g:plusone>
מה שיגרום לפונקציה plusOneAction לרוץ אחרי שהגולש יעשה לנו +1.
ומה הפונקציה הזאת תעשה? בואו נרשום אותה בתוך טג HTML חדש בגוגל טג מנג׳ר, עם rule של All Pages (את זה אתם כבר אמורים לדעת איך עושים):
[code lang=”js”]
<script>
function plusOneAction(param) {
dataLayer.push({
‘event’: ‘socialinteraction’,
‘theSocialNetwork’: ‘Google’,
‘theSocialAction’: ‘+1’,
‘theSocialTarget’: param.href
});
};
</script>
[/code]
אתם בטח שואלים את עצמכם מה זה הparam הזה בתוך הסוגריים, אז זה פשוט פרמטר שמקבל את הכתובת של הדפדפן (זה מאפיין מסוים של פונקצית callback בגוגל+. קבלו את זה ככה).
ואם זה לא הספיק, אז בואו ואראה לכם רק דבר אחד נוסף:
איך עוקבים אחרי לחיצות tweet בגוגל טג מנג׳ר
ובכן, גם זה נורא פשוט. אחרי שיצרתם את הקוד של הלחצן יש לכם אפשרות להוסיף גם פה callback function ובתוכה תשימו את אותו קוד ששמנו בפונקציות הcallback הקודמות.
את הקוד של פונקציית הcallback של טוויטר אתם יכולים לשים באותו טג HTML שבו שמתם את הקוד של גוגל+:
[code lang=”js”]
<script>
twttr.ready(function (twttr) {
twttr.events.bind(‘tweet’, function(event) {
dataLayer.push({
‘event’: ‘socialinteraction’,
‘theSocialNetwork’: ‘Twitter’,
‘theSocialAction’: ‘Tweet’,
‘theSocialTarget’: document.href
});
});
});
</script>
[/code]
ו…. זהו! סיימנו. נכון שזה היה פשוט?
כדי לבדוק אם האירועים אכן עובדים אתם יכולים לבדוק באמצעות הדיבגר את שליחת המידע לשרתים של אנליטיקס באמצעות הmeasurement protocol, ששם המידע שלכם יופיע על ידי sn,sa,ts (network,action,target בהתאמה).
עכשיו אני רוצה שתעזרו לי לבדוק אם עשיתי את הכל כמו שצריך – פשוט לחצו על כפתורי השיתוף פה למטה או בצד ימין ותעזרו לי לבדוק אם זה באמת עובד 😉