JavaScript hộp cát

JavaScript hộp cát là một tập hợp con ngôn ngữ JavaScript đơn giản giúp cung cấp một cách an toàn để thực thi logic JavaScript tùy ý từ các mẫu tùy chỉnh của Trình quản lý thẻ của Google. Để cung cấp một môi trường thực thi an toàn, một số tính năng của JavaScript bị hạn chế hoặc xoá. JavaScript hộp cát dựa trên ECMAScript 5.1. Có một số tính năng của ECMAScript 6 như các hàm mũi tên và nội dung khai báo const/let.

Môi trường thực thi toàn cầu

JavaScript hộp cát không được thực thi trong môi trường thực thi toàn cầu tiêu chuẩn như JavaScript thông thường, vì vậy, đối tượng window và các thuộc tính của đối tượng này không có sẵn. Bao gồm các phương thức được xác định trong phạm vi toàn cầu như encodeURI hoặc setTimeout, các giá trị chung như location hoặc document và giá trị toàn cầu được xác định bằng các tập lệnh đã tải. Thay vào đó, hàm require toàn cục có sẵn cho tất cả JavaScript dạng hộp cát cung cấp nhiều hàm này. Bạn có thể đọc các giá trị từ cửa sổ bằng tiện ích copyFromWindow.

Hệ thống kiểu đơn giản

JavaScript dạng hộp cát hỗ trợ các loại sau: null, undefined, string, number, boolean, array, object và function. Mảng và đối tượng được tạo bằng cú pháp chữ ([] {}) và do không có quyền truy cập vào môi trường thực thi tiêu chuẩn toàn cầu, nên bạn sẽ không thể sử dụng các hàm khởi tạo toàn cục như String() và Number(). Không có từ khoá new trong JavaScript hộp cát và các hàm không có quyền truy cập vào từ khoá this. Một số phương thức loại gốc cũng đã bị xóa. Hãy xem thư viện chuẩn để biết danh sách đầy đủ các phương thức loại gốc được hỗ trợ.

Định dạng mã mẫu tùy chỉnh

Mã được viết để triển khai mẫu tuỳ chỉnh đại diện cho phần nội dung của hàm sẽ được thực thi bất cứ khi nào thẻ của bạn được kích hoạt hoặc biến của bạn được đánh giá. Hàm này có một tham số dữ liệu (data) duy nhất chứa tất cả giá trị được định cấu hình trong giao diện người dùng cho thẻ hoặc phiên bản biến đó, với các khoá được đặt thành tên của các tham số mẫu được chỉ định trong mẫu tuỳ chỉnh.

Triển khai thẻ báo hiệu mẫu

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