שכבת הנתונים

שכבת הנתונים היא אובייקט שמשמש את 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 בדפי אינטרנט, צריך ליצור שכבת נתונים. בדוגמת הקוד הבאה מוצג המיקום שבו שכבת הנתונים נוצרת, לפני ש-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 מעבד הודעות לפי שיטת "נכנס ראשון יוצא ראשון" (FIFO): כל הודעה מעובדת בנפרד, לפי הסדר שבו היא התקבלה. אם ההודעה היא אירוע, כל התגים עם תנאי טריגר שהתקיימו יופעלו לפני ש-Tag Manager יעבור להודעה הבאה.

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

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

האובייקט 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 כשהמאגר נטען, צריך להוסיף קריאה (call) של 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 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 -->

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

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

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

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

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

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();
});