JavaScript בארגז חול

JavaScript בארגז חול הוא קבוצת משנה פשוטה של שפת JavaScript, המספקת דרך בטוחה ליישם לוגיקה שרירותית של JavaScript מתבניות מותאמות אישית של Google Tag Manager. כדי לספק סביבת הפעלה בטוחה, חלק מהתכונות של JavaScript מוגבלות או מוסרות. JavaScript בארגז חול מבוסס על ECMAScript 5.1. חלק מהתכונות של ECMAScript 6, כגון פונקציות חץ והצהרות const/let, זמינות.

סביבת ביצוע גלובלית

אי אפשר להשתמש ב-JavaScript בארגז חול בסביבה רגילה של ביצוע גלובלי, כמו JavaScript רגיל, לכן האובייקט של window והמאפיינים שלו לא זמינים. המדיניות כוללת שיטות שהוגדרו בהיקף הגלובלי, כמו encodeURI או setTimeout, ערכים גלובליים כמו location או document וערכים גלובליים שהוגדרו על ידי סקריפטים שנטענו. במקום זאת, פונקציית require גלובלית זמינה לכל JavaScript בארגז החול שמספק רבות מהפונקציות האלה. ניתן לקרוא את הערכים מהחלון באמצעות כלי השירות copyFromWindow.

הערה: copyFromWindow יוצר עותק עמוק של הערכים, וזו פעולה יקרה שצריך לבצע כדי להעביר את הערכים האלה אל מחוץ לארגז החול וממנו.

מערכת פשוטה

JavaScript בארגז חול תומך בסוגים הבאים: null, undefined, string, number, boolean, array, object ו-function. מערכים ואובייקטים נוצרים באמצעות התחביר המילולי ( [] {} ), ומאחר שאין גישה לסביבת הביצוע הגלובלית הסטנדרטית, ולכן אי אפשר להשתמש בבנאים גלובליים כמו String() ו-Number(). אין מילות מפתח ב-new ב-JavaScript שבארגז חול (sandbox), ולפונקציות אין גישה למילת המפתח this. בנוסף, הוסרו גם חלק מהשיטות המקומיות. בספרייה הרגילה מפורטת רשימה מקיפה של שיטות נתמכות של סוגים מותאמים.

תבנית קוד של תבנית מותאמת אישית

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

הטמעה של תג אלומה לדוגמה

const sendPixel = require('sendPixel');
const encodeUri = require('encodeUri');
const encodeUriComponent = require('encodeUriComponent');

let url = encodeUri(data['url']);

if (data['useCacheBuster']) {
  const encode = require('encodeUriComponent');
  const cacheBusterQueryParam = data['cacheBusterQueryParam'] || 'gtmcb';
  const last = url.charAt(url.length - 1);
  let delimiter = '&';
  if (url.indexOf('?') < 0) {
    delimiter = '?';
  } else if (last == '?' || last == '&') {
    delimiter = '';
  }
  url += delimiter +
      encodeUriComponent(cacheBusterQueryParam) + '=' + encodeUriComponent(data['randomNumber']);
}
sendPixel(url, data['gtmOnSuccess'], data['gtmOnFailure']);