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

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

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

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

  • מייבאים ומגדירים תג במאגר התגים של Google Tag Manager.
  • מדידת מדדי ה-Core Web Vitals של דף האינטרנט ב-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 (תבניות תגים), לוחצים על הלחצן New (חדש).

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

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

ייבוא של תבנית ליצירת תג Google Tag Manager.

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

שמירה של תבנית ליצירת תג ב-Google Tag Manager.

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

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

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

הגדרת התג.

  1. מחילים אחד מהטריגרים של צפיות בדף, למשל הטריגר All Pages (כל הדפים).
  2. במקרה הצורך, מוסיפים גם חריגים להפעלת הטריגר.
  3. נותנים לתג את השם Core Web Vitals - All Pages (מדדי ליבה של ביצועי אתרים – כל הדפים) ושומרים אותו.

טריגר בהתאמה אישית לתג Web Vitals.

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 הופעל בטריגר של הצגת הדף שבחרתם.

בודקים אם התג Web Vitals מופעל.

  1. אפשר לראות גם שלושה אירועים מסוג web_vitals, שכל אחד מהם מייצג מדד ליבה אחד של Web Vitals: ‏ LCP, ‏ INP ו-CLS.

שלושה אירועים של Web Vitals בשכבת הנתונים.

  1. לוחצים על הראשון ובצד שמאל פותחים את הכרטיסייה API Call (קריאה ל-API), שבה יופיעו הנתונים שנדחפו מתבנית ליצירת תג אל dataLayer.

הנתונים שנדחפים על ידי התג אל dataLayer.

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

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

כדי לשלוף את הנתונים של Core Web Vitals מ-dataLayer ולשלוח אותם ל-GA4, צריך:

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

יצירת הטריגר

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

הגדרת טריגר לתג GA4.

יצירת משתנים של dataLayer

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

הגדרות למשתנה הראשון בשכבת הנתונים.

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

ההגדרה של המשתנה השני בשכבת הנתונים.

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

הגדרות למשתנה השלישי בשכבת הנתונים.

  1. יוצרים את המאפיין webVitalsData.rating.

ההגדרה של המשתנה הרביעי בשכבת הנתונים.

  1. יצירת webVitalsData.delta.

ההגדרה של המשתנה החמישי בשכבת הנתונים.

  1. אחרי שתסיימו, יהיו לכם משתני dataLayer שהמשתמש הגדיר:

סקירה כללית של כל המשתנים ב-dataLayer.

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

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

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

שדה למזהה המדידה של GA4.

  1. בשדה להזנת קלט Event Name (שם האירוע), בוחרים את המשתנה dataLayer DLV - webVitalsData.name מהשלב הקודם שיצרתם.

השדה לשם האירוע ב-GA4.

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

הגדרת פרמטרים של אירועים בתג GA4.

  1. רושמים את הפרמטרים האלה של האירועים כמאפיינים מותאמים אישית בממשק המשתמש של GA4.
  2. מחילים הגדרות נוספות בהתאם לדרישות ההגדרה של GA4.
  3. מגדירים את האירוע המותאם אישית web_vitals כטריגר לתג GA4.
  4. במקרה הצורך, מוסיפים גם חריגים להפעלת הטריגר.

הגדרת הטריגר לתג GA4.

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

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

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

בודקים אם תג GA4 מופעל.

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

הנתונים נשלחו באמצעות תג GA4.

  1. עכשיו עוברים לנכס GA4 ופותחים את הדוח 'פעילות בזמן אמת'.
  2. בכרטיס 'מספר האירועים לפי שם האירוע' אפשר לוודא שהאירועים של Core Web Vitals נאספים בהצלחה.

בדיקת נתונים נכנסים בדוח 'זמן אמת' ב-GA4.

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

בודקים את הנתונים הנכנסים בדוח DebugView ב-GA4.

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'.

הפעלת הדוחות של נכס GA4 בדיווח של Ad Manager.

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

קישור נכס GA4 ל-Ad Manager.

קישור בין GA4 לבין Google AdSense

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

קישור נכס GA4 ל-AdSense.

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

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

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

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

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

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

דף 1 במרכז הבקרה של Core Web Vitals.

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

דף 2 במרכז הבקרה של Web Vitals.

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

דף 3 במרכז הבקרה של Core Web Vitals.

10. סיכום

מעולה! למדתם איך למדוד ולדווח על Core Web Vitals באמצעות GA4, ואיך למדוד ולדווח על ביצועי מודעות מ-Google Ad Manager ומ-Google AdSense.

מידע נוסף