שכבת הנתונים

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

חשוב: אל תשתמשו בתגי 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 הוא תלוי אותיות רישיות (case-sensitive): אם מנסים להעביר משתנה או אירוע בלי האותיות הרישיות הנכונות, ההעברה לא תפעל.

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

מוסיפים לכתובת ה-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>

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