שכבת הנתונים

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

לדוגמה, אם אתם מפעילים רימרקטינג כשהערך של purchase_total גדול מ-100$, או מבוסס אירועים ספציפיים, למשל כשלוחצים על לחצן, שכבת הנתונים יכולה להיות כדי שהנתונים יהיו זמינים לתגים. אובייקט שכבת הנתונים מובנה כ-JSON. לדוגמה:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

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

התקנה

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

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

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