טיפים לעבודה עם Google Tag Manager

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

לאור השימוש ההולך וגבר בגוגל תג מנג'ר, להלן GTM, החלטנו לחלוק כמה סקריפטים שעשויים להתברר כשימושיים עבור בעלי אתרים. בקצרה, GTM מאפשר לנו לעקוף את ה-pipeline של צוותי הפיתוח וליישם תגיות באופן מיידי בלי לחכות לגרסה חדשה של האתר (עבור ארגונים גדולים בעלי אתרים מורכבים שיודעים לדבר עם מערכות ERP או CRM פנימיות, העלאת גרסה חדשה של האתר היא בדרך כלל משימה מורכבת ביותר שעשויה לקחת חודשים ליישם, אם לא למעלה מזה).

למרות ש-GTM הוא כלי רב עוצמה, יישום של חלק מתגיות שאינן חלק מההתקנה הבסיסית עשוי להתברר כמשימה לא פשוטה בעליל אם האתר לא נבנה מראש עבור GTM – למשל מכיל תגית id ייעודית עבור כל אלמנט HTML אותו נרצה למדוד בנפרד. אלה הם מסוג הדברים שבכל נצטרך עזרה מצוות הפיתוח כדי לפתור אותם, אבל יש מספיק דוגמאות אחרות בהן נוכל להשתמש כדי לשדר נתונים נוספים חזרה לגוגל אנליטיקס.

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

כותרת העמוד

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

  • יצירת variable חדש מסוג custom javascript
  • יצירת trigger
  • יצירת תג אנליטיקס מסוג event

יצירת variable

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

function getTitle() {
var title = document.getElementsByTagName("title")[0].innerHTML;
  return title
}

get-page-title-script

הגדרת טריגר

כעת נעבור ליצירת הטריגר שלנו. עבור כל אתר יהיה מן הסתם טריגר שונה, אבל אם נצמד לדוגמה המקורית הרי שהגדרת הטריגר תהיה קבועה למעט ההגדרה של Fire on:

  • יצירת טריגר מסוג Click
  • תחת Configure trigger נבחר Just Links
  • תחת Enable When נבחר Page URL ולאחר מכן matches RegEx ובשדה האחרון נרשום .* לציון העובדה כי תגית זו תפעל בכל עמודי האתר ללא יוצא מהכלל:

trigger-for-external-links

הגדרות אלה קובעות כי הטריגר יופעל בכל לחיצה, על כל לינק באתר שאינו מכיל את כתובת האתר שלנו (example.com במקרה זה).

הגדרת התגית עצמה

כעת נשאר רק להגדיר את התגית כתגית אנליטיקס מסוג event. נבחר ערכים סטאטיים עבור category & action ועבור ערך label נבחר את ה-variable שבנינו בתחילת המאמר.

tag-capture-title

 

מעקב אחר טופס חיפוש

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

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

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

catch-input-text-value

כדי ללכוד את ערכי השדות האלה מתוך תג מנג'ר נשתמש בפונקציה פשוטה עבור כל שדה בנפרד. בקוד ניתן לראות כי כל שדה מקבל ערך id ייחודי משל עצמו. כך, למשל, שדה  הטקסט flying from מקבל מזהה id  בשם flight-origin ואילו ה-value שלו מכיל את הבחירה שביצענו.

באמצעות javascript נלכוד את ערך השדה הראשון על ידי בדיקת ה-id של השדה הרצוי (כאמור ה-id הרלבנטי במקרה שלנו נקרא בשם flight-origin), את הפונקציה הזו נכניס לתוך variable מסוג custom javascript בתוך GTM.

function flyingFrom() {
var From = document.getElementById("flight-origin ").value;
return From
}

 

יצירת הטריגר

למרות שמדובר בטופס, אין צורך להשתמש בפונקציונליות של GTM בנושא forms ואפשר ליצור טריגר המבוסס על לחיצה על הכפתור שלנו. מאחר ולכפתור יש מזהה id ייחודי משלו, נבחר טריגר המבוסס על Click כאשר ה- Targets שלו הם All Elements. הערכים של Fire On במקרה זה שווים ל: click id equals search

search-trigger

Search במקרה זה הוא ה-id של כפתור השליחה בטופס שלנו.

הגדרת התגית

הגדרת התגית פשוטה כרגיל. תגית אנליטיקס מסוג events שמכילה ערך אחד דינאמי בשדה label והוא ה-variable שיצרנו בהתחלה:

destination-search-tag

כעת נוכל לבצע בדיקה במצד preview ולראות בזמן אמת כי לאחר לחיצה נשלחים נתוני ה-event שלנו לאנליטיקס:

check-data-layer-flight

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