JavaScript w trybie piaskownicy

JavaScript w trybie piaskownicy to uproszczony podzbiór języka JavaScript, który zapewnia bezpieczny sposób wykonywania dowolnej logiki JavaScript z szablonów niestandardowych Menedżera tagów Google. Aby zapewnić bezpieczne środowisko wykonawcze, niektóre funkcje JavaScriptu są ograniczone lub usunięte. JavaScript w trybie piaskownicy działa na podstawie ECMAScript 5.1. Dostępne są niektóre funkcje ECMAScript 6, takie jak funkcje strzałek i deklaracje const/let.

Globalne środowisko wykonawcze

JavaScript w trybie piaskownicy nie jest wykonywany w standardowym globalnym środowisku wykonywania, takim jak zwykły kod JavaScript, więc obiekt window i jego właściwości są niedostępne. Obejmuje to metody zdefiniowane w zakresie globalnym, np. encodeURI lub setTimeout, wartości globalne, takie jak location lub document, oraz wartości globalne zdefiniowane przez załadowane skrypty. W ich przypadku globalna funkcja require jest dostępna w każdym trybie JavaScript z wieloma tymi funkcjami. Wartości można odczytywać z okna za pomocą narzędzia copyFromWindow.

Uproszczony system typów

JavaScript w trybie piaskownicy obsługuje te typy: null, undefined, string, number, boolean, array, object i function. Tablice i obiekty są tworzone przy użyciu dosłownej składni ( [] {}), a ponieważ nie ma dostępu do standardowego globalnego środowiska wykonawczego, konstruktory globalne, takie jak String() i Number(), są niedostępne. W JavaScript w trybie piaskownicy nie ma słowa kluczowego new, a funkcje nie mają dostępu do słowa kluczowego this. Usunęliśmy też niektóre metody typów natywnych. Pełną listę obsługiwanych metod natywnych znajdziesz w bibliotece standardowej.

Format kodu niestandardowego szablonu

Kod napisany w celu zaimplementowania szablonu niestandardowego reprezentuje treść funkcji, która będzie wykonywana po uruchomieniu tagu lub ocenie zmiennej. Ta funkcja ma jeden parametr danych (data), który zawiera wszystkie wartości skonfigurowane w interfejsie danego tagu lub instancji zmiennej. Klucze są ustawione zgodnie z nazwami parametrów szablonu określonych w szablonie niestandardowym.

Przykładowa implementacja tagu beacon

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