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

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

בשיעור ה-Codelab הזה מוסבר איך למדוד את מדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות תבנית מוגדרת מראש של התג 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.
• להתאים בין מדדי הליבה לבדיקת חוויית המשתמש באתר לבין ההכנסות מפרסום דרך מרכז הבקרה של 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. יוצרים סביבת עבודה חדשה ונותנים שם (למשל, 'מדדי ליבה לבדיקת חוויית המשתמש באתר').
3. עוברים אל Templates (תבניות).
4. בקטע Tag Templates (תבניות תגים) לוחצים על הלחצן 'חדש'. לחצן.

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

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

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

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

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

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

4. עיון בנתונים של מדדי Web Vitals ב-dataLayer

כדי לראות את התג בפעולה, יש לעבור למצב תצוגה מקדימה ב-Google Tag Manager. Tag Assistant ייפתח ויבקש כתובת URL כדי להציג תצוגה מקדימה של ההגדרה ולנפות באגים. מזינים כתובת URL של דף שבו הוטמע מאגר התגים של Google Tag Manager, ולוחצים על Connect (קישור). תיפתח כרטיסייה נפרדת עם כתובת ה-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, עוברים אל Triggers (טריגרים).
2. כדי להוסיף טריגר חדש, לוחצים על New (חדש) ואז על Trigger Configuration (הגדרת הטריגר) ובוחרים באפשרות 'אירוע מותאם אישית' מתוך הרשימה "אחר" .
3. מגדירים את web_vitals בשדה 'שם האירוע', נותנים שם לטריגר ושומרים.

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

1. בסביבת העבודה ב-Google Tag Manager, עוברים אל Variables (משתנים).
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' עם ערך כמו Web Vitals כדי לקבץ את אירועי הליבה לבדיקת חוויית המשתמש באתר.

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

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

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

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

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

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

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

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

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

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

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

אחרי שאוספים נתונים של מדדי ליבה לבדיקת חוויית המשתמש באתר ב-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. סיום

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

בדף הראשון של מרכז הבקרה מוצגת סקירה היסטורית של הביצועים ב-Core Web Vitals:

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

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

10. סיכום

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

מידע נוסף

• טעינה יעילה של מודעות בלי להשפיע על מהירות הדף
• אופטימיזציה של Largest Contentful Paint (LCP)
• אופטימיזציה של שינוי הפריסה המצטברת
• אופטימיזציה של האינטראקציה עד הצבע הבא