既存のタグを変換する

このガイドでは、サンドボックス化された JavaScript を使用するために既存のカスタム HTML タグを変換する方法について説明します。

このチュートリアルでは injectScript API を使用します。injectScript は、サードパーティのスクリプトに依存する既存のタグを変換するために使用される一般的な API です。これらのタグは多くの場合、スクリプトの読み込み中に基本機能を設定し、スクリプトの読み込み後に追加機能で拡張します。

元のタグ

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

コードを変換する

上記のタグの JavaScript 部分を確認します。

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

必要とするサンドボックス化された JavaScript を作成するには、このスクリプトが使用しているネイティブ JavaScript API を調べ、それと同等のサンドボックス JavaScript API を使用するようにコードを変換します。

たとえば、analytics.js タグでは次のネイティブ JavaScript API が使用されます。

ネイティブ JavaScript サンドボックス化された JavaScript
window.ga setInWindow
arguments createArgumentsQueue
+ new Date getTimestamp

サンドボックス化された JavaScript API をスクリプトで使用するには、それらを require する必要があります。たとえば、setInWindow() API を使用するには、それをスクリプトの先頭に追加します。

const setInWindow = require('setInWindow');

次に、window.ga を変換します。

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

次に、ga.l 割り当てを変換します。

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

最後に、2 つの呼び出しを ga() に変換します。

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

data.trackingId を使用するには、テンプレートにフィールドを追加します。

  1. [Fields] タブに移動し、[Add Field] をクリックします。

    フィールドを追加

  2. Text input フィールドのタイプを選択します。

    テキスト入力を選択する

  3. ID を text1 から trackingId に変更します。

    ID を更新する

この時点で、最初の <script/> タグは変換されましたが、それをサポートするスクリプトを読み込む必要もあります。

次のとおりです。

<script async src='https://www.google-analytics.com/analytics.js'></script>

// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

cacheToken を injectScript() に渡すとことで最適化が可能になります。次のシナリオでは、analytics.js スクリプトは 1 回だけ読み込まれます。

  • 複数回実行されるタグ
  • 同じコンテナ内のこのカスタム テンプレートからの複数のタグ
  • 同じ cacheToken で injectScript() を使用する他のカスタム テンプレート

権限

この時点より前にこのコードを実行しようとすると、コンソールにエラーが表示される場合があります。

グローバルへのアクセスエラー

これらのエラーが表示されるのは、サンドボックス化された JavaScript では、アクセスする値と URL を宣言する必要があるためです。この例では、ga.q、ga.l、ga グローバル変数にアクセスする必要があり、https://www.google-analytics.com/analytics.js でホストされているスクリプトを挿入します。

Global Variables 権限を設定するには:

  1. [Permissions] タブに移動し、[Accesses Global Variables] を展開して、[Add Key] をクリックします。

    管理画面に表示される [キーを追加]

  2. キーに ga を使用し、Read、Write、Execute のチェックボックスをオンにします。

    Google アナリティクスの管理画面に表示される [キーを追加]

  3. ga.q と ga.l についてもこの手順を繰り返します。なお、これらのフィールドには Execute 権限は必要ありません。

    完成したグローバル変数

この時点でもう一度 [コードを実行] をクリックすると、コンソールに新しいエラーが表示されます。今回は、エラーは Inject Scripts に言及しています。

スクリプトの挿入に関するコンソール エラー

Inject Scripts 権限を設定するには:

  1. https://www.google-analytics.com/analytics.js を Allowed URL Match Patterns に追加します。

    完成したスクリプト注入

これで [コードを実行] をクリックしても、コンソールにエラーが表示されなくなります。カスタム テンプレートにタグが変換されました。[Save] をクリックして、Google タグ マネージャーの他のタグと同じように新しいタグを使用しましょう。

完全に変換されたタグ

サンドボックス化された JavaScript の最終結果は次のようになります。

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);