שכבת הנתונים

שכבת הנתונים היא אובייקט שמשמש את 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 Manager או של 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();
})