שכבת הנתונים

שכבת הנתונים היא אובייקט שמשמש את Google Tag Manager ואת gtag.js כדי להעביר מידע לתגים. אפשר להעביר אירועים או משתנים דרך שכבת הנתונים, ולהגדיר טריגרים בהתאם לערכים של המשתנים.

לדוגמה, אם מפעילים תג רימרקטינג כשהערך של purchase_total גדול מ-100 $או על סמך האירועים הספציפיים, למשל כשלוחצים על לחצן, אפשר להגדיר את שכבת הנתונים כך שהנתונים יהיו זמינים לתגים. אובייקט שכבת הנתונים מובנה כ-JSON. למשל:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

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

התקנה

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

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

בהטמעות רגילות של gtag.js שבהן התג הועתק מתוך המוצר ונוסף לדף אינטרנט, מסופק הקוד שיוצר את שכבת הנתונים. בהטמעות מותאמות אישית של Google Tag, מוסיפים את הקוד של שכבת הנתונים בתחילת הסקריפט, כפי שמוצג בדוגמה המודגשת:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

איך מעובד המידע של שכבת הנתונים

לאחר טעינת מאגר התגים, Tag Manager יתחיל לעבד את כל הודעות ה-push של שכבת הנתונים שבתור. מערכת Tag Manager מעבדת את ההודעות על בסיס ראשון בשליחה: כל הודעה מעובדת בנפרד, לפי הסדר שבו היא התקבלה. אם ההודעה היא אירוע, כל התגים עם תנאי הטריגר שמתקיימים יופעלו לפני ש-Tag Manager יעבור להודעה הבאה.

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

חשוב: אל תשתמשו בתגי HTML בהתאמה אישית כדי לפרוס קוד שמבוסס על gtag.js. במקום זאת, השתמשו בתבניות התגים המקוריות של Tag Manager עבור Google Ads, Analytics ו-Floodlight.

חשוב: אל תשתמשו בתגי HTML בהתאמה אישית כדי לקבוע הגדרות הסכמה ב-Tag Manager. מכיוון שצריך להחיל את הגדרות ההסכמה לפני הפעלת התגים הרלוונטיים במאגר התגים של Tag Manager, צריך להחיל ממשקי Consent API של Tag Manager כדי להגדיר את ברירת המחדל ולעדכן את אופן הפעולה. שימוש בממשקי Consent API של Tag Manager מבטיח שעדכוני ההסכמה יעובדו לפני פריטים שנמצאים בתור בשכבת הנתונים, כך שכל התגים שהופעלו על ידי אותו אירוע יראו את אותו מצב הסכמה.

נקודה חשובה: אפשר להשתמש ב-Google Tag Assistant כדי לבדוק את הסטטוס של שכבת הנתונים בכל שלב בשרשרת אירועים.

שימוש בשכבת נתונים עם גורמים מטפלים באירועים

האובייקט dataLayer משתמש בפקודת event כדי להתחיל שליחה של אירועים.

Google Tag ו-Tag Manager משתמשים במשתנה מיוחד של שכבת נתונים שנקרא event, שמשמש את פונקציות event listener ב-JavaScript כדי להפעיל תגים כשמשתמש יוצר אינטראקציה עם רכיבי אתר. לדוגמה, יכול להיות שתרצו להפעיל תג מעקב המרות כשמשתמש לוחץ על לחצן אישור רכישה. ניתן לקרוא לאירועים בכל פעם שמשתמש יוצר אינטראקציה עם רכיבים באתר כמו קישורים, לחצנים, גלילות וכו'.

כדי לעשות את זה, קוראים לפונקציה dataLayer.push() כשמתרחש אירוע. התחביר לשליחת אירוע עם dataLayer.push() הוא:

dataLayer.push({'event': 'event_name'});

כאשר event_name הוא מחרוזת שמתארת את האירוע, כמו 'login', purchase או search.

אפשר להשתמש בפונקציה dataLayer.push() כדי לשלוח נתוני אירועים כשמתרחשת פעולה שאתם רוצים למדוד. לדוגמה, כדי לשלוח אירוע כשמשתמש לוחץ על לחצן, משנים את ה-handler onclick של הלחצן כך שיקרא ל-dataLayer.push():

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

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

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

dataLayer.push({'variable_name': 'variable_value'});

כאשר 'variable_name' הוא מחרוזת שמציינת את השם של המשתנה של שכבת הנתונים שצריך להגדיר, ו-'variable_value' הוא מחרוזת שמציינת את הערך של המשתנה של שכבת הנתונים שצריך להגדיר או להחליף.

לדוגמה, כדי להגדיר משתנה של שכבת נתונים עם העדפת צבע כשמבקר יוצר אינטראקציה עם כלי להתאמה אישית של מוצרים, אפשר להעביר את המשתנה הבא של שכבת הנתונים הדינמית:

dataLayer.push({'color': 'red'});

דחיפה אחת, כמה משתנים

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

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

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

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

כדי לשמור את המשתנים של שכבת הנתונים בין דפי אינטרנט, צריך להפעיל את הפקודה dataLayer.push() אחרי יצירת שכבת הנתונים בכל טעינת דף, ולהעביר את המשתנים לשכבת הנתונים. אם רוצים שהמשתנים של שכבת הנתונים יהיו זמינים ל-Tag Manager כשמאגר התגים נטען, מוסיפים קריאה dataLayer.push() מעל לקוד מאגר התגים של Tag Manager, כמו שמוצג בהמשך.

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

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

פתרון בעיות

ריכזנו כאן כמה טיפים לפתרון בעיות בשכבות נתונים:

לא מחליפים את המשתנה window.dataLayer: כשמשתמשים בשכבת הנתונים באופן ישיר (למשל dataLayer = [{'item': 'value'}]), הוא יחליף את כל הערכים הקיימים ב-dataLayer. התקנות של Tag Manager צריכות ליצור את שכבת הנתונים במיקום גבוה ככל האפשר בקוד המקור, מעל קטע הקוד של מאגר התגים, באמצעות window.dataLayer = window.dataLayer || [];. אחרי ההצהרה על dataLayer, משתמשים ב-dataLayer.push({'item': 'value'}) כדי להוסיף לו ערכים נוספים. אם הערכים האלה צריכים להיות זמינים ל-Tag Manager כשהדף נטען, הקריאה dataLayer.push() צריכה להיות גם מעל לקוד מאגר התגים של Tag Manager.

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

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

הקריאה אל dataLayer.push חייבת להיות באובייקטים של JavaScript חוקיים. כל שמות המשתנים של שכבות הנתונים צריכים להיות מוקפים במירכאות.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

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

רע:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

טובה:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

שינוי השם של שכבת הנתונים

שם ברירת המחדל של אובייקט שכבת הנתונים שמופעל על ידי Google Tag או Tag Manager הוא dataLayer. אם אתם מעדיפים להשתמש בשם אחר לשכבת הנתונים, תוכלו לערוך את ערך הפרמטר של שכבת הנתונים ב-Google Tag או בקטע הקוד של מאגר התגים ב-Tag Manager עם השם שבחרתם.

gtag.js

כדי להגדיר את השם של שכבת הנתונים החדשה, למשל l=myNewName, מוסיפים לכתובת ה-URL פרמטר של שאילתה שנקרא l. מעדכנים את כל המופעים של dataLayer בקטע הקוד של Google Tag לשם החדש.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
</script>

Tag Manager

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

חשוב: לא להחליף את ערך הפרמטר הלא מודגש.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

אחרי שהשם השתנה, צריך להתאים את כל ההפניות לשכבת הנתונים (כלומר כשמצהירים על שכבת הנתונים מעל קטע הקוד, או כשדוחפים אירועים או משתנים דינמיים של שכבות נתונים לשכבת הנתונים באמצעות הפקודה .push()), כך שישקפו את השם של שכבת הנתונים המותאמת אישית:

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

הערה: רק אובייקט dataLayer אחד נתמך בכל דף.

שיטות של שכבת נתונים בהתאמה אישית

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

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

הוגדר

הפונקציה set במודל הנתונים המופשטים מאפשרת להגדיר ערכים לאחזור באמצעות get.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

הפונקציה get במודל הנתונים המופשטים מאפשרת לאחזר את הערכים שהוגדרו.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

אפס

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

window.dataLayer.push(function() {
  this.reset();
})