샌드박스 환경의 JavaScript는 Google 태그 관리자 맞춤 템플릿의 임의의 JavaScript 로직을 안전하게 실행하는 방법을 제공하는 JavaScript 언어의 단순화된 하위 집합입니다. 안전한 실행 환경을 제공하기 위해 JavaScript의 일부 기능이 제한되거나 삭제됩니다. 샌드박스 환경의 JavaScript는 ECMAScript 5.1을 기반으로 합니다. 화살표 함수 및 const/let 선언과 같은 일부 ECMAScript 6 기능을 사용할 수 있습니다.
전역 실행 환경
샌드박스 환경의 JavaScript는 일반 JavaScript와 같은 표준 전역 실행 환경에서 실행되지 않으므로 window 객체 및 속성을 사용할 수 없습니다. 여기에는 encodeURI 또는 setTimeout과 같이 전역 범위에 정의된 메서드, location 또는 document와 같은 전역 값, 로드된 스크립트로 정의된 전역 값이 포함됩니다. 이러한 값의 자리에서, 이 함수 대부분을 제공하는 샌드박스 환경의 모든 JavaScript에 전역 require 함수를 사용할 수 있습니다. copyFromWindow 유틸리티를 사용하여 창에서 값을 읽을 수 있습니다.
단순화된 유형 시스템
샌드박스 환경의 JavaScript는 null, undefined, string, number, boolean, array, object, function 유형을 지원합니다. 배열 및 객체는 리터럴 구문([] {})을 사용하여 생성되며, 표준 전역 실행 환경에 액세스할 수 없으므로 String() 및 Number()와 같은 전역 생성자는 사용할 수 없습니다. 샌드박스 환경의 JavaScript에는 new 키워드가 없으며 함수에서 this 키워드에 액세스할 수 없습니다.
일부 네이티브 유형 메서드도 삭제되었습니다. 지원되는 네이티브 유형 메서드의 전체 목록은 표준 라이브러리를 참고하세요.
맞춤 템플릿 코드 형식
맞춤 템플릿을 구현하기 위해 작성된 코드는 태그가 실행되거나 변수가 평가될 때마다 실행되는 함수의 본문을 나타냅니다. 이 함수에는 해당 태그 또는 변수 인스턴스의 UI에 구성된 모든 값이 포함된 단일 데이터 매개변수(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']);