שכבת הנתונים

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

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

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