שכבת הנתונים

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

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

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

בדומה לאירועים, הפונקציונליות הזו מתבצעת על ידי קריאה ל-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 או בקטע הקוד של מאגר התגים ב-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();
})