サンドボックス化された JavaScript

サンドボックス化された JavaScript は、JavaScript 言語の簡易版のサブセットで、Google タグ マネージャーのカスタム テンプレートから任意の JavaScript ロジックを安全に実行できます。安全な実行環境を提供するため、JavaScript の一部の機能は制限または削除されています。サンドボックス化された JavaScript は、ECMAScript 5.1 に基づいています。アロー関数や const / let 宣言などの ECMAScript 6 の機能は利用できます。

グローバル実行環境

サンドボックス化された JavaScript は、通常の JavaScript のような標準的なグローバル実行環境では実行されないため、window オブジェクトとそのプロパティは利用できません。これには、encodeURIsetTimeout などのグローバル スコープで定義されたメソッド、locationdocument などのグローバル値、読み込まれたスクリプトによって定義されるグローバル値などが該当します。これらの機能の代わりに、すべてのサンドボックス化された JavaScript では、これらの関数の多くを提供するグローバル require 関数を利用できます。値は、copyFromWindow ユーティリティを使用してウィンドウから読み取ることができます。

簡易版の型のシステム

サンドボックス化された JavaScript でサポートされている型は、nullundefinedstringnumberbooleanarrayobjectfunction です。配列とオブジェクトはリテラル構文( [] {} )を使用して作成されます。通常のグローバル実行環境にはアクセスできないため、String()Number() などのグローバル コンストラクタは使用できません。サンドボックス化された JavaScript に new キーワードはなく、関数には 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']);