שכבת הנתונים

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

התקנה

כדי להטמיע את 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 -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
</script>

איך המידע בשכבת הנתונים מעובד

כשהמאגר נטען, Tag Manager מתחיל לעבד את כל ההודעות בתור של שכבת הנתונים. ‫Tag Manager מעבד הודעות לפי שיטת "נכנס ראשון יוצא ראשון" (FIFO): כל הודעה מעובדת בנפרד, לפי הסדר שבו היא התקבלה. אם ההודעה היא אירוע, כל התגים עם תנאי טריגר שהתקיימו יופעלו לפני ש-Tag Manager יעבור להודעה הבאה.

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

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

האובייקט dataLayer משתמש בפקודה event כדי להתחיל את שליחת האירועים.

‫Google Tag ו-Tag Manager משתמשים במשתנה מיוחד של שכבת נתונים שנקרא event. רכיבי event listener של 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 עם השם שבחרתם.

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

gtag.js

מוסיפים לכתובת ה-URL פרמטר של שאילתה בשם "l" כדי להגדיר את השם החדש של שכבת הנתונים, לדוגמה, l=myNewName. מעדכנים את כל המופעים של dataLayer בקוד התג של Google לשם החדש.

<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());
</script>

אחרי שמשנים את השם, צריך להתאים את כל ההפניות לשכבת הנתונים (כלומר, כשמצהירים על שכבת הנתונים מעל קטע הקוד, או כשדוחפים אירועים או משתנים דינמיים של שכבת הנתונים לשכבת הנתונים באמצעות הפקודה .push()) כך שישקפו את השם המותאם אישית של שכבת הנתונים:

<script>
  window.myNewName = window.myNewName || [];
  window.myNewName.push({'variable_name': 'variable_value'});
</script>

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

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

הוגדר

הפונקציה 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();
});