שכבת הנתונים

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

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

האובייקט 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 או בקטע הקוד של מאגר התגים ב-Tag Manager בשם שבחרתם.

<!-- 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>

<!-- 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>

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

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

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

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

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