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 ที่แซนด์บ็อกซ์ และฟังก์ชันไม่มีสิทธิ์เข้าถึงคีย์เวิร์ด this นอกจากนี้ระบบได้นําประเภทโฆษณาเนทีฟบางรายการออกด้วย โปรดดูไลบรารีมาตรฐานสําหรับรายการเมธอดประเภทเนทีฟที่รองรับโดยละเอียด

รูปแบบโค้ดเทมเพลตที่กําหนดเอง

โค้ดที่เขียนขึ้นเพื่อใช้เทมเพลตที่กําหนดเองแสดงถึงเนื้อความของฟังก์ชันที่จะใช้งานเมื่อแท็กเริ่มทํางานหรือเมื่อตัวแปรได้รับการประเมิน ฟังก์ชันนี้มีพารามิเตอร์ข้อมูลเดียว (data) ที่จัดเก็บค่าทั้งหมดใน UI สําหรับแท็กหรืออินสแตนซ์ตัวแปรนั้นๆ โดยมีคีย์ที่ตั้งค่าเป็นชื่อของพารามิเตอร์เทมเพลตที่ระบุในเทมเพลตที่กําหนดเอง

ตัวอย่างการติดตั้งใช้งานแท็กบีคอน

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']);