היוש,
בעקבות מלא שאלות של אנשים על הדרך הנכונה ביותר להטמיע את הקוד של גוגל תג מנג’ר באתרי וורדפרס, החלטתי לכתוב מדריך מקיף על פלאגין בשם DuracellTomi’s Google Tag Manager for WordPress שמאפשר לעשות המון דברים מתקדמים עם התג מנג’ר בלי לגעת אפלו פעם אחת בקוד.
אבל לפני הכל – מהן האפשרויות הקיימות כיום להטמעת תג מנג’ר באתרי וורדפרס:
1. אפשרות אחת – לשים את הקוד ישירות בקוד המקור:
חסרונות: קודם כל אם אין לכם ידע בתכנות לא הייתי ממליץ לעשות את זה לבד, ודבר שני – כאשר תעדכנו את הגרסה של התבנית הקוד ידרס על ידי הקובץ המעודכן ותצטרכו להוסיף אותו שוב. כמובן שאפשר לפתור את זה בעזרת child theme אבל זה כבר מיועד לפאוור יוזרס.
יתרונות: כל פלאגין בוורדפרס מגיע עם המון תוספות שמכבידות על האתר, ואם אתם לא באמת צריכים את התוספות הללו (או שאתם סתם אובסיסיביים כמוני לגבי מה שמותקן אצלכם באתר) עדיף לעשות את זה בדרך המינימליסטית ביותר.
2. אפשרות שנייה – התקנת פלאגין שמאפשר להטמיע סקריפטים חיצוניים.
יתרונות: מונע את כל הבעיות שיש בשיטה הראשונה.
חסרונות: אין ממש, אבל גם אין יותר מדי יתרונות שיש בשיטה הבאה.
3. אפשרות שלישית – שימוש בפלאגין DuracellTomi’s Google Tag Manager for WordPress
יתרונות: מאפשר להטמיע את התג מנג’ר בעזרת הזנת המספר המזהה בלבד, ומגיע עם עוד הרבה פיצ’רים מתקדמים שתוכננו לשימוש ייעודי עם התג מנג’ר.
חסרונות: לא בדקתי אם אכן מאט את המהירות, אבל סביר להניח שהוא גם לא משפר אותה.
כאמור, הפוסט שלנו יתמקד באפשרות השלישית –
הטמעת גוגל תג מנג’ר באמצעות פלאגין ייעודי לוורדפרס.
איך עושים את זה בפועל?
המשיכו לקרוא ותראו:
השלב הראשון – התקנת הפלאגין
הכנסו למסך הוורדפרס שלכם, תחת תפריט Plugins > Add New חפשו Google Tag Manager ומצאו את הפלאגין של DuracellTomi. התקינו אותו ולחצו Activate Plugin.
סיימתם? יופי. עכשיו בואו נעבור על האפשרויות ונראה איך להשתמש בפלאגין.
השלב השני – התקנה בסיסית של הקונטיינר
בשלב הזה עליכם ללכת לממשק של התג מנג’ר בכתובת tagmanager.google.com ולפתוח חשבון (אם אין לכם אחד כזה), ואז להעתיק את המזהה שלו ולהדביק בשדה של הטאב General. המזהה מתחיל ב-GTM ונמצא בצד השמאלי-עליון של המסך:
שימו לב שיש לכם שתי אפשרויות בחירה לגבי מיקום הקונטיינר שלכם – האפשרות הראשונה היא בפוטר של האתר (מה שלא מומלץ, מכיוון שאז כל התגים שלכם יצטרכו לחכות עד שהעמוד יסיים להיטען ורק אז התג מנג’ר יפעיל אותם), והאפשרות השניה היא במקום אחר על פי בחירתכם, מה שכמובן מצריך מכם לבצע שינוי בקוד האתר.
מכיוון שאנחנו מנסים להמנע מלעשות שינויים בקוד אנחנו נסתפק באפשרות הראשונה, וזאת בהנחה שהאתר שלכם לא מקבל מיליוני גולשים ביום, ובהנחה נוספת שאין לכם בעיות טעינה מיוחדות שמעקבות את טעינת העמוד בצורה יוצאת דופן.
השלב השלישי – איסוף נתונים בסיסיים
לא אכנס פה להסבר יותר מדי מעמיק על התג מנג’ר כי זו לא המטרה של הפוסט, אבל חשוב לציין שאחד המרכיבים המהותיים של גוגל תג מנג’ר הוא ה-dataLayer.
דטאלייר הוא בעצם מערך JavaScript, שמאפשר לנו לדחוף לתוכו מידע ולהשתמש בו אחר כך לכל צורך שנרצה.
כך למשל, אם הכנסנו ל-dataLayer את השם של כותב המאמר, נוכל לשלוח את המידע הזה לגוגל אנליטיקס באמצעות content grouping, ואז ליצור דוח בגוגל אנליטיקס שלנו שיציג את התנהגות הגולשים עבור כל כותבי התוכן השונים שיש לנו באתר (במקום עבור פוסט בודד כמו שיש לנו בדיפולט).
דוגמא נוספת – נגיד שאנחנו רוצים לשלוח את מערכת ההפעלה של הגולש בתור איוונט לאנליטיקס בכל פעם שהוא מנסה לעשות פעולה חשובה באתר ונתקל בשגיאה.
מה שאנחנו רוצים לבדוק זה האם התקלה קשורה במערכת ההפעלה (או בדפדפן) של הגולש, ולכן נוכל לשלוח את המידע הזה ל-dataLayer ואז ברגע שהתקלה תתרחש אנחנו נשלוף את המידע מה-dataLayer ונשלח אותו בתור אחד הפרמטרים של האיוונט לגוגל אנליטיקס.
בכל אופן, הסיבה שאני מקדים את כל זה היא מכיוון שהיתרון המרכזי של הפלאגין Google Tag Manager for WordPress הוא בעובדה שבלחיצת כפתור אנחנו יכולים לשמור נתונים חשובים לתוך ה-dataLayer, ולאחר מכן להשתמש בהם בתגים שלנו.
במסך הזה תוכלו לראות חלק מהנתונים אותם ניתן לדחוף לתוך ה-dataLayer:
ניתן למצוא פה למשל את סוג הפוסט, תחת איזו קטגוריה הוא נמצא, אילו תגים יש לו, באיזה תאריך פורסם, מי הכותב שלו ועוד…
אם תכנסו לפוסט מסוים בבלוג של בועות, ואז תלכו לקונסולה ותרשמו dataLayerB אתם תוכלו לראות את כל הנתונים שהפלאגין דוחף לכם ל-dataLayer:
[הערה: הסיבה שזה נקרא dataLayerB ולא סתם dataLayer היא בגלל שזו דוגמא בלבד ולא רציתי שזה יתערבב עם התג מנג’ר האמיתי שלי באתר. תחת הלשונית Advanced שיניתי את השם של ה-dataLayer הדיפולטיבי ל-dataLayerB, אבל אל תגעו בזה אם לא הבנתם על מה אני מדבר.]
אבל רגע, איך הפלאגין יודע מי הכותב של הפוסט ובאיזה תאריך הוא נכתב?
נורא פשוט – יש פונקציות מובנות בוורדפרס שמאפשרות לדלות את המידע הזה, והפלאגין משתמש בהם ודוחף את המידע שחזר מהפונקציה לתוך ה-dataLayer שלנו.
הפונקציה the_author_meta() למשל יודעת להחזיר את שם הכותב, the_title() מחזירה את כותרת הפוסט, וכן הלאה.
בהמשך נלמד איך להשתמש במידע הזה, אבל בינתיים בואו נמשיך לכרטיסיות הבאות ונראה איזה עוד מידע אנחנו יכולים להוציא בעזרת הפלאגין:
כרטיסיית visitors – האם היוזר מחובר? מה ההרשאה שיש לו? (Admin במקרה שלי), מה המזהה הייחודי של היוזר (שימושי במקרה שרוצים להשתמש ב-user-id).
כרטיסיית אדוורדס – נראית פשוטה אבל מאפשרת לכם לדחוף את כל המידע שיש ב-dataLayer לתוך מערך בודד בשם google_tag_params שגוגל “מכירה” ויודעת איך להשתמש בו כדי ליצור רשימות רימרקטינג מתקדמות בחשבון האדוורדס שלכם:
ישנן עוד שתי כרטיסיות שנותנות לנו את מזג האוויר ואת המכשיר/דפדפן/מערכת ההפעלה אבל לא נתייחס אליהן כרגע.
טאב שלישי – איוונטים
הצ’קבוקס הראשון שולח לדטאלייר איוונטים ברגע שמישהו לוחץ על שדה בטופס (gtm4wp.formElementEnter) ומתי שהוא יוצא מאותו שדה (gtm4wp.formElementLeave), ומצרף לאותו פוש גם את ה-ID של השדה/טופס, הקלאס שלהם ועוד.
שימו לב לדוגמא הבאה שמציגה לכם את הערכים בדטאלייר לאחר לחיצה על שדה שם פרטי ויציאה ממנו, ולאחר מכן לחיצה על שדה האימייל:
הלאה:
הצ’ק בוקס Social Action דוחף לדטאלייר את האיוונט (gtm4wp.socialAction) בכל פעם שמישהו לוחץ על לייק, +1 וכו’, ומצרף לזה את השם של הרשת (google/facebook/etc.), את הפעולה (+1,like, share) ואת העמוד שבו התבצעה הפעולה.
הנה דוגמא של הערכים שנדחפו לדטאלייר לאחר שצייצתי את הפוסט:
למדריך מקיף על מעקב אחרי פעולות סושיאל באתר באמצעות גוגל תג מנג’ר הקליקו כאן
הצ’קבוקס השלישי מאפשר לכם לעקוב אחרי לחיצות על לינקים שמובילים אל מחוץ לאתר שלכם. הפלאגין מזהה לינקים שלא מכילים את הדומיין שלכם, וברגע שמישהו מקליק עליהם הוא שולח לדטאלייר איוונט בשם gtm4wp.outboundClick ואיתו את כתובת הלינק עליו לחצו:
לא נתעכב על הצ’קבוקסים הבאים, רק אציין בקצרה שהם מאפשרים לכם לשלוח מידע נוסף לדטאלייר על הורדת קבצים, קליקים על קישורי אימייל (<a href=”mailto:shuki@email.com”>) וכו’.
טאב רביעי – מעקב גלילה, או “איך לנתח התנהגות גולשים בבלוג בלי ליפול בפח”
אם אתם כותבים פוסטים לבלוג הטאב הזה יכול להיות עבורכם סופר שימושי:
דמיינו לעצמכם את המצב הבא – כתבתם פוסט איכותי עם 2500 מילים, הבאתם אלפי גולשים לפוסט הזה אבל כשאתם באים לנתח את ההתנהגות של אותם גולשים בגוגל אנליטיקס אתם רואים ש-88.89% מהם היו באונס!
אז בשביל מה הייתה כל ההשקעה אם כולם נטשו מיד?!
טעות.
גוגל אנליטיקס מודד זמני שהיה לפי חותמות זמן (time stamps), כלומר אם נכנסתם לפוסט בשעה 10:00, סיימתם לקרוא אותו ב-10:20 ועברתם לפוסט נוסף – זמן השהייה שלכם בעמוד הראשון יהיה 20 דקות.
אבל מה יקרה אם בסוף הפוסט יצאתם לגמרי מהאתר?
נכון מאוד – זמן השהייה שלכם יהיה 0 למרות שבפועל שהיתם 20 דקות שלמות.
אז מה עושים?
משנים את הבאונס רייט בהתאם להתנהגות האמיתית של הגולשים בפוסט.
[blockquote source=”גוגל אנליטיקס”]”ביקור יחשב כבאונס במידה והוא כלל hit אחד בלבד”[/blockquote]
כדי לבצע את מעקב הגלילה, הפלאגין עושה שימוש בסקריפט שכתב Justin Cutroni לפני הרבה זמן, עוד בימים שגוגל אנליטיקס היה בגרסה הקלאסית, ולאחר מכן שודרג ליוניברסל אנליטיקס.
כדי לקרוא על הלוגיקה שעומדת מאחורי הסקריפט הכנסו ללינק, אני רק אציין שבגדול הסקריפט שולח לגוגל אנליטיקס מספר איוונטים:
- מתי שהפוסט נטען.
- מתי שהיוזר גלל X פיקסלים (כמה בדיוק? נתון לבחירתכם) + הזמן שעבר מטעינת הפוסט.
- מתי שהיוזר הגיע לתחתית הפוסט + הזמן שעבר.
- מתי שהוא הגיע לתחתית העמוד + הזמן שעבר + האם הוא באמת קרא או רק ריפרף על התוכן.
כדי שהסקריפט יעבוד אתם צריכיך להפוף אותו ל-enabled כמובן, לאחר מכן להגדיר את ה-minimum distance (כמה פיקסלים נחשבים לכך שהגולש התחיל לקרוא), Content ID (זה ה-ID של התוכן שימדד) ו-Scroller Time שבו אתם מחליטים אחרי כמה זמן אתם מחשיבים את הגולש לאחד שבאמת קרא (ולא סתם רפרף על התוכן).
במידה ויש לכם בלוג עם פוסטים לימודיים (בניגוד לאתר חדשות שבו בד”כ הגולשים כן עוברים מעמוד לעמוד) – מדובר בפיצ’ר שיכול לשנות לחלוטין את כל צורת ההסתכלות שלכם על התנהגות הגולשים באתר.
החסרון שלו הוא בכך שהזמן שקובע אם הגולש הוא “קורא” או “סורק” נקבע באופן רוחבי עבור כל האתר, וזה לא יתאים ב-100% לכל הפוסטים אבל זה עדיף מכלום.
טאב אחרון – Integration
לא אכנס ליתר הטאבים, רק לטאב האינטגרציה שכרגע מאפשר לאנטגרצ רק עם Contact Form 7 אבל אני בטוח שזה יכול לעזור לכם מאוד:
מה שהוא עושה זה נורא פשוט – ברגע שטופס של הפלאגין Contact form 7 נשלח – הוא דוחף איוונט בשם gtm4wp.contactForm7Submitted לדטאלייר ואתם פשוט יכולים ליצור תג עם Trigger שישתמש באיוונט הזה.
אגב, גם אם אתם לא משתמשים בפלאגין של ה-GTM4WP אתם יכולים לעשות את המעקב הזה באמצעות הכנסת השורה הבאה בתיבת הטקסט שנמצאת בתחתית מסך ההגדרות של הטופס שלכם:
אחרון אחרון חביב – מעקב איקומרס ורימרקטינג דינמי!
זה עדיין לא פעיל ולכן לא נתעכב על זה, אבל לפי איך שזה נראה נוכל להתקין באופן אוטומטי מעקב איקומרס, Enhanced Ecommerce ואפילו רימרקטינג דינמי – והכל על ידי סימון של צ’קבוקס פשוט!
רגע, אז יש לנו את כל המידע הזה בתוך ה-dataLayer, מה עושים איתו עכשיו?
שאלה מצויינת. בואו ניקח את הדוגמא של Contact Form 7.
נניח שאנחנו רוצים לשלוח קוד המרות אחרי שמישהו שולח את הטופס.
אמרנו שאחרי שהטופס נשלח הפלאגין דוחף את הערך gtm4wp.contactForm7Submitted לתוך event בדטאלייר.
כל שעלינו לעשות עכשיו זה פשוט ליצור תג מסוג Adwords Conversion:
ואז לתת לו את הטריגר הבא:
וזהו 🙂
ברגע שהטופס יישלח הפלאגין ידחוף את הערך gtm4wp.contactform7Submitted לתוך איוונט בדטאלייר, וזה יתן הוראה לתג מנג’ר לשלוח את התג של קוד ההמרות.
עוד דוגמא – שימוש בפלאגין כדי לעקוב אחרי לחצני סושיאל
זוכרים איך נראה הדטאלייר שלנו אחרי לחיצה על טוויטר?
האיוונט במקרה הזה הוא gtm4wp.socialAction ולכן זה יהיה הטריגר שניצור:
לאחר מכן ניצור שלושה dataLayer Variables שיקחו את המידע על הרשת החברתית (פייסבוק, טוויטר, גוגל+), הפעולה שנעשתה (לייק, קומנט, שייר, טוויט) והלינק ששותף:
ולבסוף ניצור תג מסוג גוגל אנליטיקס סושיאל, ונכניס בו את 3 המשתנים שמשכנו מהדטאלייר:
וכמובן נגדיר לו לפעול בטריגר שיצרנו בהתחלה – כאשר האיוונט שווה ל-gtm4wp.socialAction.
סיכום
זה היה מדריך מפורט בתמונות איך להשתמש בפלאגין Google Tag Manager for WordPress. כמו שראיתם הפלאגין יכול לחסוך לכם המווון זמן אם אתם רוצים לעשות שימושים מורכבים בתג מנג’ר, וגם בדברים הפשוטים הוא יכול לפשט תהליכים ולעשות את הכל הרבה יותר נוח.
תאמינו לי שזה הרבה יותר פשוט ממש שזה נראה. פשוט צריך לדעת מי נגד מי ואז לחבר את הקצוות, ואם יש לכם שאלות אתם מוזמנים כמובן לרשום לי בתגובות למטה 🙂
צ’או