גוגל תג מנג'ר - המדריך המלא למתחילים

פתיחת חשבון, מבנה והטמעת התגיות הראשונות שלכם

כותב - אלעד שלו

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

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

אז איך מתחילים?

חלק ראשון – לפתוח חשבון:

החלק הראשון הוא, ניחשתם נכון, לפתוח חשבון. מחפשים Google tag manager בגוגל מתחברים עם המייל (כמו שמתחברים לגוגל אנליטיקס) ומגיעים למסך הזה:

 רושמים את שם החשבון. זה יכול להיות כל שם שבא לכם ויהיה קל לזהות אחר כך ועוברים לשלב הבא – Container name (בהמשך נסביר גם על המבנה של התג מנג'ר ככה שתדעו מה זה אומר) :

 בחלק הזה אנו מכניסים את כתובת האתר שלנו, בלי /, : וכו'. רק את הכתובת, כמו בדוגמא. מסמנים WEB, מקליקים על Create ומאשרים את תנאי השימוש.

מברוק! פתחתם את החשבון הראשון שלכם בגוגל תג מנג'ר!

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

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

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

 

חלק שני – להבין את גוגל תג מנג'ר:

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

גוגל תג מנג'ר מחולק ל:

Accounts

החשבון אותו פתחנו בתחילת התהליך. בעיקרון, אפשר לפתוח Account אחד ותחתיו לנהל את כל האתרים שלכם ברמת ה Container (נסביר גם מה זה container בהמשך) אבל לא כדאי לעשות את זה מ 2 סיבות מרכזיות:

1) זה פחות מסודר

2) הסיבה החשובה יותר – אם אתם חברה שמנהלת הרבה לקוחות לא תוכלו להעביר את החשבון לניהול של הלקוח במידה ויעזוב אתכם או מכל סיבה אחרת. תוכלו לתת לו גישה אבל לא להעביר את זה אליו ולנתק את החשבון לגמרי וזו בעיה. בקיצור, אל תעשו את זה.

 

Containers:

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

 


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

 

Tags:

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

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

כך זה נראה:

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

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

מה זה טריגר? איך הוא עובד? זה השלב הבא שלנו.

Triggers:

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

בהמשך אסביר איך פותחים תג ותבינו איך מגדירים גם טריגר. 

גם לטריגרים שלנו, כמו לתגיות, חשוב שניתן שמות ברורים שנוכל להבין בהמשך כדי לשמור על הסדר.

 

Variables:

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

בתפריט של גוגל תג מנג'ר הם נמצאים כאן:



יש Variables שכבר מוכנים לנו. אפשר גם ליצור בעצמנו במידה ואנחנו צריכים.

ה Pages יהיו מסומנים לנו כברירת מחדל. כדאי לסמן גם את Clicks ו Forms כבר בהתחלה. בהמשך נפתח את התגים שלנו ותבינו איך זה עובד.


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


חלק שלישי – איך פותחים ומגדירים תג

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


אז איך מגדירים את התג הראשון:

במסך הראשי של התג מנג'ר נכנסים לחלק של Tags (מצד שמאל) ומקליקים על New:



ברגע שנעשה את זה נגיע למסך הבא:



כפי שאתם רואים, הרבה מהתגיות הנפוצות כבר מוטמעות כאן ואנו רק צריכים להקליק עליהן. במידה ואנו רוצים להגדיר משהו שלא נמצא באופציות האלו נקליק על Custom html tag ונעדכן את הקוד שאנו רוצים (נדגים את זה בהמשך עם פייסבוק פיקסל).

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


למעלה נוכל להכניס את שם התגית. חשוב, כמו שאמרנו, לתת שם שנוכל לזהות אחר כך. נקרא לתגית שלנו Google analytics ID ונקליק על Universal analytics (אפשר להגדיר גם קלאסיק, בדוגמא הזו נשתמש ביוניברסל) ו Continue.

השלב הבא (Configure tag) יהיה להכניס את הטראקינג ID של האנליטיקס שלנו. פשוט מעתיקים את הID מחשבון האנליטיקס שלנו ומדביקים:



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

השלב הבא הוא מתי להפעיל את התג:


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

מקליקים על Create tag וזהו, יצרתם את התג הראשון שלכם!

כך זה נראה במערכת:



רגע, התג שלנו עדיין לא פעיל...

אחרי שיצרנו את התג אנחנו צריכים לבדוק אם הוא עובד. נלך לכפתור Publish בצד ימין למעלה, נקליק על החץ שצמוד אליו ואז על האופציה של Preview and debug כדי לבדוק האם התג שלנו עובד כמו שהגדרנו:


לאחר שהקלקנו על Debug נעבור לאתר שעליו אנו עובדים (אם הוא כבר פתוח נרענן את העמוד) ונראה בתחתית המסך את ה Preview and debug console:



(תתעלמו מהתגיות שאתם רואים בתמונה הזו, לא רלוונטי לדוגמא)

רק אנחנו יכולים לראות את החלק הזה כמובן. ב debug console נוכל לראות איזה תגיות פועלות כרגע (בחלק העליון של Tags fired on this page) ועוד מידע כמו Variables בעמוד שניתן להשתמש בהם ועוד.

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

זהו, התג הראשון שלנו בתג מנג'ר פעיל באתר!

כדאי לבדוק בReal time של אנליטיקס אם הכל עובד, אבל לא אמורות להיות בעיות מיוחדות.

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

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

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

חלק רביעי - הטמעות בסיסיות נוספות בתג מנג'ר

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

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



הטמעת פיקסל פייסבוק:

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

איך עושים את זה?

הולכים לעמודה של Tags בצד שמאל, מקליקים על New ומגיעים שוב למסך עם כל התגיות. במסך הזה נבחר הפעם את האופציה של Custom html tag:



ניתן לתג שם שנוכל לזכור, ממש כמו שעשינו עם התגית של גוגל אנליטיקס, ונדביק את הפיקסל של פייסבוק בתיבת ה html ככה:


לאחר שהדבקנו את הפיקסל נקליק על Continue להמשך.

בחלק של Fire on נבחר גם במקרה הזה את All pages (אלא אם כן אתם רוצים שהפיקסל של פייסבוק יפעל רק בתנאים ספציפיים) ואז נקליק על יצירת תג.

לאחר מכן, כמו בשלב הקודם, נקליק על Preview and debug ונעבור לאתר לראות אם התג עובד כמו שהגדרנו. במידה וכן, נחזור לתג מנג'ר, נקליק על Publish וסיימנו.


הטמעת אדוורדס רימרקטינג:

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


בשלב הבא נבחר Adwords remarketing (האופציה הימנית):


ניתן לתג שלנו שם ונעבור לשלב הבא בו נצטרך לעדכן את ה Conversion ID של תג הרימרקטינג.

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

נעתיק רק את המספר, בלי סימנים מיותרים, נדביק בחלק של Conversion ID ונקליק על Continue.

גם כאן, אלא אם כן יש לכם תנאים מיוחדים, נגדיר All pages בחלק של Fire on. נשמור את התגית ונחזור על האופציה של Preview and debug ואז פרסום במידה והכל עובד כמו שצריך.


הגדרת Event בגוגל אנליטיקס:

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

נעבור לחלק של Triggers בתפריט השמאלי ונקליק על New.

כמו בהגדרת תגית, גם כאן ניתן שם מספיק ברור לטריגר שלנו. בדוגמא הזו נקרא לו Click trigger ונבחר באפשרות של Click:


נקליק על המשך, בחלק של Configure trigger נשאיר את זה כרגע על All elements ובחלק של Fire on על All clicks וזהו, הטריגר שלנו מוגדר.

כדי לבדוק אם הטריגר פעיל נלך ל Preview and debug ונרענן את האתר.

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


אם כן, תוכלו לחזור לתג מנג'ר ולהקליק על Publish.


השלב הבא הוא הגדרת ה Event. כדי להגדיר Event של גוגל אנליטיקס נלך למסך Tags ונבחר שוב בתגית של גוגל אנליטיקס.

ניתן שם ברור לתגית ונבחר באופציה הימנית של יוניברסל אנליטיקס (נסביר כאן רק על יוניברסל). בחלק של Configure tag נכניס שוב את ה ID של האנליטיקס שלנו (יש דרך לייצר Variable קבוע של אנליטיקס בו תוכלו להשתמש בלי להדביק את הID כל פעם מחדש, כאן תוכלו לראות איך עושים את זה).

בחלק הבא של Track type נבחר הפעם ב Event, נגדיר את ה Event שלנו כרגיל ונקליק על Continue:



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

אמרנו שבדוגמא הזו נגדיר Event של הקלקה על כפתור מסוים באתר. כדי לעשות את זה נבחר באופציה של Click תחת Fire on ואז יעלה המסך הבא:



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

נקליק על New, ניתן לטריגר שלנו שם, Click כבר מוגדר כי זו האופציה שבחרנו, נשאיר על All elements ובחלק השלישי של Fire on, נבחר הפעם באופציה של Some clicks. נקבל את המסך הזה:


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

דרך אחת לראות מהם הפרמטרים בהם נוכל להשתמש היא דרך הקונסולה באתר. נחזור לאתר, נקליק על הכפתור שאותו אנו רוצים להגדיר כ Event, נעבור לחלק של gtm.click שהכרנו מקודם בצד שמאל ואז למעלה לחלק של Variables (מסומנים באדום בתמונה):



תחת Variables נוכל לראות את הערכים אותם התג מנג'ר מזהה ולפי זה להגדיר את הטריגר שלנו. כך זה נראה:



לצורך הדוגמא נבחר את האופציה של Click text "הקליקו להצגת קוד קופון" ונחזור לתג מנג'ר.

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

נחזור לתג מנג'ר, נבחר באופציה של Click text, בתפריט האמצעי נבחר לצורך הדוגמא באפשרות Contains ובתיבה השלישית נכניס את הטקסט שמייחד את הקליק שלנו והוא "הקליקו להצגת קוד קופון" :


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

(מומלץ לבדוק בריל טיים של אנליטיקס אם הוא מזהה את הEvent שהגדרנו לאחר הפאבליש).


הגדרת המרה – גוגל אדוורדס:

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



ניתן לתגית שם ונבחר הפעם באופציה השמאלית של Adwords conversion:



בחלק השלישי, Configure tag נכניס את ה Conversion ID ואת ה Conversion label (ברימרקטינג עדכנו רק את הID). תוכלו למצוא אותן בחלק הזה של קוד ההמרה:



נעתיק, נדביק בעמודות הרלוונטיות בתג מנג'ר ונמשיך לשלב הבא.

בשלב של Fire on נצטרך להגדיר לתג מנג'ר מתי להפעיל את ההמרה. לצורך העניין אתם צריכים להגדיר טריגר מסוים שיפעיל את התג. בדוגמא הקודמת (הגדרת Event) ראיתם איך מגדירים טריגר של Click. תוכלו באותה דרך להגדיר טריגר של Click נוסף שאתם רוצים שיפעיל את ההמרה, URL מסוים שההמרה תשוגר רק בו (לדוגמא דף תודה) ועוד המון אפשרויות.

הנה דוגמא של הגדרת המרה בדף תודה בלבד:



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





לסיכום:

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


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

הבלוג של Simo ahava

הערוץ Measureschool

והאתר של אותו בחור (ג'וליאן)

הבלוג של Lunametrics

הבלוג של שוקי מן על תג מנג'ר


יש עוד המון, מניח שזה יספיק לכם בשלב הזה :)

אתם מוזמנים גם לשתף, לספר לחברים ו / או לדבר איתנו בכל שאלה או בקשה שיש לכם! 

תגיות - גוגל תג מנג'ראלעד שלו