שכבת הנתונים

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

אם קריאה ל-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>

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

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

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

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