שכבת הנתונים

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

לדוגמה, אם אתם מפעילים תג רימרקטינג כשהערך של purchase_total גבוה מ-400 ש"ח, או על סמך אירועים ספציפיים, למשל כשמקישים על לחצן, תוכלו להגדיר את שכבת הנתונים כך שהנתונים האלה יהיו זמינים לתגים שלכם. האובייקט של שכבת הנתונים מובנה כ-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. המשתנה הזה משמש את מאזיני האירועים ב-JavaScript כדי להפעיל תגים כשמשתמש מבצע אינטראקציה עם רכיבי האתר. לדוגמה, יכול להיות שתרצו להפעיל תג למעקב המרות כשמשתמש לוחץ על לחצן לאישור רכישה. אפשר להפעיל אירועים בכל פעם שמשתמש מבצע אינטראקציה עם רכיבים באתר, כמו קישורים, לחצנים, גלילה וכו'.

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

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

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

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

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

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

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

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 Manager או של Tag Manager, עם השם שבחרתם.

gtag.js

מוסיפים פרמטר של שאילתה בשם 'l' לכתובת ה-URL כדי להגדיר את השם החדש של שכבת הנתונים, למשל l=myNewName. מעדכנים את השם החדש בכל המופעים של 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();
})