קבל דוח בחינם
כניסת לקוחות
Phone Link Icon 050-8127373
Lang Icon EN
יצירת איוונטים לפי סוג מכשיר בתג מנג'ר
משפך (פאנל) בגוגל אנליטיקס 4

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

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

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

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

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

הערה חשובה – מדריך זה מאפשר לעקוב אחר המתרחש במכשירים שונים, כל עוד מדובר באתרי אינטרנט. אפליקציות נייטיב וככל הנראה גם אפליקציות היברידיות אינן נכללות כאן, אלא אם מדובר באפליקציות Cross Platform שמתנהגות כמו אתר אינטרנט (לדוגמה אפליקציות PWA, אתרי Flutter וכן הלאה).

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

    • מינימום 2 תווים
    • שדה חובהנא להזין מינימום 10 ספרות

    שלב 1 – יצירת משתנה GTM

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

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

    function () {

      var width = window.innerWidth,

      screenType;

      if (width <= 520) {

        screenType = "mobile";

      } else if (width <= 820) {

        screenType = "tablet";

      } else {

        screenType = "desktop";

      }

      return screenType;

    }

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

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

    שלב 2 – בדיקת הקוד בתצוגה מקדימה

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

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

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

    שלב 3 – יצירת טריגר GTM

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

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

    נפתח טריגר חדש מסוג page view ותחת some page views נבחר במשתנה החדש שיצרנו (לצורך הדוגמה, קראנו לו Screen Resolution). לאחר מכן נוודא שהמשתנה יופעל כאשר הוא מכיל את סוג המכשיר הרלוונטי – במקרה זה desktop (או כל מכשיר אחר לבחירתנו). המשתנה יסרוק את הרזולוציה בה משתמשים, ויירה את האיוונט רק כאשר היא תהיה תואמת לדסקטופ.

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

    שלב 4 – יצירת תג/י GTM

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

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

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

    רגע לפני סיום

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

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

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

    בראש הקוד מוסיפים:

    function(){

    ובסיום הקוד מוסיפים:

    return isMobile;

     

    בהצלחה!

    אודות הכותב
    אייל רחמים
    אייל רחמים

    בעל ניסיון של 14 שנים בשיווק דיגיטלי ו11 שנים בקידום אתרים, יזם דיגיטלי, מנכ״ל דיגיטאץ׳ – חברה לקידום אתרים ושיווק באינטרנט, מרצה במכללה למנהל, והבעלים של הבלוג seolinks.

    קידום אתרים בגוגל למעלה

    רוצה להגדיל את הרווחים מהאתר שלך?

    מדריך ללימודי קידום אתרים
    רוצים שאבדוק לכם את האתר?