מדידת נתוני השדות בדוח Core Web Vitals באמצעות מדדי מודעות

1. לפני שמתחילים

בקודלאב הזה תלמדו איך למדוד את מדדי הליבה של חוויית השימוש באינטרנט באמצעות תבנית תג מובנית של Google Tag Manager‏ (GTM), ולשלוח את הנתונים לנכס Google Analytics 4‏ (GA4). נלמד גם איך לשלוף נתונים מ-Google Ad Manager ומ-Google AdSense ל-GA4, כדי לקשר בין נתוני השדות של Core Web Vitals לבין המדדים של ביצועי המודעות לבין לוח בקרה מוכן מראש של Looker Studio.

הפעולות שתבצעו:

• ייבוא והגדרה של תג למאגר התגים של Google Tag Manager.
• למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר ב-GA4.
• מגדירים תג מעקב אירועים של GA4 ב-Google Tag Manager.
• אפשר לבחון את הנתונים של מדדי חוויית המשתמש הבסיסיים בדוח dataLayer ובדוחות של GA4.
• מקשרים את נכס GA4 ל-Google Ad Manager ול-Google AdSense.
• לבדוק את הקשר בין מדדי הליבה של חוויית המשתמש (Core Web Vitals) לבין ההכנסות מפרסום באמצעות לוח בקרה ב-Looker Studio.

מה נדרש

• חשבון Google Analytics ונכס אינטרנט ב-GA4 עם הרשאת עריכה.
• חשבון Google Tag Manager ומאגר תגים לאינטרנט עם הרשאות פרסום.
• רשת Google Ad Manager ו/או חשבון Google AdSense עם הרשאת אדמין.
• חשבון Looker Studio.

2. הוספת תבנית התג מ-GitHub ל-GTM

המדידה של Core Web Vitals באמצעות תבנית של תג GTM מבוססת על הספרייה של web-vitals. קודם כול, נוריד את התבנית של תגי GTM.

1. פותחים את הקובץ template.tpl.
2. מורידים את הקובץ למחשב

עכשיו נכנסים לחשבון Google Tag Manager.

1. פותחים את מאגר התגים באתר.
2. יוצרים סביבת עבודה חדשה ומזינים שם (למשל 'מדידת Core Web Vitals').
3. עוברים אל 'תבניות'.
4. בקטע Tag Templates (תבניות תגים) לוחצים על הלחצן 'חדש'. לחצן.

5. לוחצים על תפריט הפעולות הנוספות ובוחרים באפשרות 'ייבוא'.

6. בוחרים את קובץ ה-TPL שהורדתם קודם מהמחשב.
7. לחץ על הלחצן "שמור".

הוספתם את תבנית התג למאגר התגים של Google Tag Manager.

3. הגדרה של תג Web Vitals

1. בסביבת העבודה ב-Google Tag Manager, עוברים אל Tags (תגים).
2. מוסיפים את התג של Web Vitals בלחיצה על 'חדש', ואז על 'הגדרת תג' ובוחרים את התג 'Web Vitals' מהקטע 'בהתאמה אישית'.
3. השלב הבא הוא לקבוע את ההגדרות השונות. כל ההגדרות מפורטות במאגר GitHub. כדי שה-Codelab הזה ולוח הבקרה הסופי יפעלו, ההגדרות הבאות מספיקות.

4. מחילים אחד מהטריגרים של צפייה בדף, למשל הטריגר 'כל הדפים'.
5. אם צריך, מוסיפים גם החרגות של טריגרים.
6. נותנים לתג את השם 'Core Web Vitals – All Pages' (מדדי הליבה של חוויית המשתמש – כל הדפים) ושומרים אותו.

4. ניתוח נתוני Web Vitals בשכבת הנתונים (dataLayer)

כדי לראות את התג בפעולה, עוברים למצב תצוגה מקדימה ב-Google Tag Manager. Tag Assistant ייפתח ויבקש כתובת URL כדי להציג תצוגה מקדימה של ההגדרה ולנפות באגים. מציינים כתובת URL לדף שבו מאגר התגים של Google Tag Manager מוטמע ולוחצים על 'קישור'. תיפתח כרטיסייה נפרדת עם כתובת ה-URL שצוינה.

1. כדי לבצע פעולות בדף, גוללים ולוחצים על רכיבים או על מרחבים לבנים.
2. לאחר מכן חוזרים לכרטיסייה עם ה-Tag Assistant ומצב התצוגה המקדימה של Google Tag Manager.
3. בצד ימין יוצגו האירועים השונים שהועבר אל dataLayer.
4. קודם כול צריך לבדוק אם התג של Web Vitals הופעל בטריגר מסוג 'צפייה בדף' שבחרתם.

5. אמורים לראות גם שלושה פרמטרים מסוג web_vitals כאשר כל אחד מהם מייצג מדד ליבה לבדיקת חוויית המשתמש באתר, LCP, INP ו-CLS.

6. לוחצים על האירוע הראשון ובצד שמאל פותחים את הכרטיסייה 'קריאה ל-API'. כאן יופיעו הנתונים שהועברנו מתבנית התג אל dataLayer.

7. כדאי לבדוק גם את הערכים האחרים של הפרמטר web_vitals אירועים. במסמכי העזרה של web-vitals.js מפורט מידע על סוגי הנתונים השונים.

5. שליחת נתונים של Web Vitals אל GA4

כדי לשלוף את הנתונים של מדדי הליבה לבדיקת חוויית המשתמש באתר מ-dataLayer ולשלוח אותם ל-GA4, צריך לבצע את הפעולות הבאות:

• יצירת טריגר לתג GA4
• יצירת משתנים כדי למשוך נתונים מה-dataLayer
• יצירת תג מעקב אירועים ב-GA4

יצירת הטריגר

1. בסביבת העבודה של Google Tag Manager, עוברים אל 'טריגרים'.
2. כדי להוסיף טריגר חדש, לוחצים על New (חדש) ואז על Trigger Configuration (הגדרת הטריגר) ובוחרים באפשרות 'אירוע מותאם אישית' מתוך הרשימה "אחר" .
3. מגדירים את הערך 'web_vitals' בשדה 'שם האירוע', נותנים שם לטריגר ושומרים.

יוצרים את משתני ה-dataLayer

1. בסביבת העבודה ב-Google Tag Manager, עוברים אל 'משתנים'.
2. יוצרים משתנה חדש בהגדרת המשתמש מסוג "Data Layer Variable" (משתנה של שכבת נתונים).
3. מגדירים את webVitalsData.name בשדה 'שם משתנה של שכבת נתונים', נותנים שם למשתנה (למשל "DLV - webVitalsData.name") ושומרים.

4. חוזרים על השלבים האלה בשביל ארבעת המשתנים הנדרשים האחרים של שכבת הנתונים. יוצרים את 'webVitalsData.value'.

5. יוצרים משתנה נוסף עם שדה השם 'webVitalsData.id'.

6. יוצרים את הקובץ webVitalsData.rating.

7. יוצרים את הקובץ webVitalsData.delta.

8. בסוף אמורים להתקבל המשתנים הבאים של dataLayer בהגדרת המשתמש:

יצירת תג מעקב האירועים של GA4

לפני שיוצרים תג מעקב אירועים ב-GA4, צריך לוודא ש-Google Tag כבר מוגדר.

1. בסביבת העבודה ב-Google Tag Manager, עוברים אל Tags (תגים).
2. כדי להוסיף תג מעקב אירועים של GA4, לוחצים על 'חדש' ואז על 'הגדרת תג' ובוחרים את התג 'Google Analytics: אירוע GA4' מהקטע 'Google Analytics'.
3. מזינים את מזהה המדידה בשדה המתאים.

4. בשדה הקלט 'שם האירוע', בוחרים את המשתנה dataLayer 'DLV - webVitalsData.name' מהשלב שנוצר קודם.

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

6. לרשום את הפרמטרים האלה של האירועים כמאפיינים מותאמים אישית בממשק המשתמש של GA4.
7. להחיל הגדרות נוספות על סמך דרישות ההגדרה של GA4.
8. מגדירים את הפרמטר web_vitals אירוע בהתאמה אישית שמוגדר כטריגר של תג GA4.
9. אם צריך, מוסיפים גם החרגות של טריגרים.

6. בדיקת הנתונים ב-GA4

כדי לאמת את זרימת הנתונים אל GA4, עוברים שוב למצב התצוגה המקדימה של Google Tag Manager. מזינים כתובת URL ב-Tag Assistant ולוחצים על 'התחברות'.

1. כדי לבצע פעולות בדף, גוללים ולוחצים על רכיבים או על מרחבים לבנים.
2. לאחר מכן, חוזרים לכרטיסייה עם Tag Assistant ומצב התצוגה המקדימה של Google Tag Manager.
3. בצד ימין, לוחצים על כל אחת מהרשומות של 'web_vitals' ומאשרים שתג הנתונים הבסיסיים על החוויה באינטרנט ב-GA4 מופעל.

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

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

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

7. פרסום ההגדרה

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

1. פותחים את סביבת העבודה ב-Google Tag Manager.
2. בפינה השמאלית העליונה בממשק המשתמש, לוחצים על 'שליחה'.
3. נותנים שם ותיאור לגרסה ולוחצים על 'פרסום' כדי להפעיל את ההגדרה.

8. קישור GA4 ל-Google Ad Manager או ל-Google AdSense

אחרי שאוספים נתונים של מדדי הליבה של חוויית המשתמש (Core Web Vitals) ב-GA4, צריך גם שהמדדים הקשורים למודעות יהיו זמינים ב-GA4 כדי שהמרכז הבקרה יפעל. מקשרים את Google Ad Manager ו-Google AdSense ל-GA4 או רק אחד מפתרונות הפרסום האלה. לתשומת ליבכם: כדי לבצע את הקישור, צריכה להיות לכם הרשאת עריכה (או הרשאה גבוהה יותר) ב-GA4 והרשאת אדמין ב-Google Ad Manager וב-Google AdSense.

קישור GA4 ל-Google Ad Manager

1. עוברים לרשת ב-Google Ad Manager.
2. לוחצים על 'ניהול' -> הגדרות גלובליות -> 'הגדרות רשת'.
3. בקטע 'הגדרות דוחות' מפעילים את האפשרות 'דוחות נכסי Google Analytics 4 בדוחות של Ad Manager'.

4. קוראים את התנאים וההגבלות ולוחצים על 'אישור'.
5. שומרים את העדכון.
6. מעבר לקטע 'אדמין' -> חשבונות מקושרים -> Google Analytics 4.
7. לוחצים על 'קישור חדש לנכס Google Analytics 4'.
8. מאתרים את נכס GA4 שרוצים לקשר ובוחרים בו.
9. לוחצים על 'שמירה' וזהו.

קישור GA4 ל-Google AdSense

1. נכנסים לחשבון Google AdSense.
2. לוחצים על 'חשבון' -> 'גישה והרשאה' -> 'שילוב של Google Analytics'.
3. לוחצים על '+קישור חדש'.

4. מחפשים את נכס GA4 שרוצים לקשר ובוחרים בו.
5. לוחצים על 'יצירת קישור'.

9. המחשה חזותית של נתונים באמצעות Looker Studio

כדי להציג באופן חזותי את נתוני Core Web Vitals יחד עם מדדי מודעות, צריך להגדיר מרכז בקרה של Looker Studio. יש לפעול לפי השלבים הבאים כדי להתאים בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין ההכנסות מפרסום.

1. פותחים את התבנית הזו של מרכז הבקרה ב-Looker Studio
2. מעתיקים את מרכז הבקרה.
3. כדי לעדכן את מקור הנתונים, בוחרים את נכס GA4 מהרשימה הנפתחת.
4. סיום

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

בדף הראשון של לוח הבקרה תוכלו לראות היסטוריה של ביצועי מדדי הליבה לבדיקת חוויית המשתמש:

בדף השני, ניתן להשוות בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין ההכנסות מפרסום מ-Google Ad Manager או מ-Google AdSense:

בדף השלישי אפשר לנתח את הביצועים של מדדי Core Web Vitals ברמת נתיב הדף, יחד עם מדדים שקשורים למודעות:

10. סיכום

מעולה! למדנו איך למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר ולדווח עליהם ב-GA4 ובמדדים של ביצועי המודעות מ-Google Ad Manager ומ-Google AdSense.

מידע נוסף

• יצירת מתאם בין מדדי הליבה לבדיקת חוויית המשתמש באתר (Core Web Vitals) לבין ההכנסות מפרסום באמצעות הכלים של Google
• טעינה יעילה של מודעות בלי להשפיע על מהירות הדף
• אופטימיזציה של Largest Contentful Paint (LCP)
• אופטימיזציה של שינוי הפריסה המצטברת
• אופטימיזציה של זמן האינטראקציה עד התוכן הבא (INP)