既存のタグを変換する

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

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

注意: 実際には、サンドボックス化された JavaScript に、injectScript() ではなくターゲット スクリプトを直接実装する必要があります。これにより、第三者に対する依存性が低下するため、施行中のポリシーによって許可される可能性が高くなります。

元のタグ

警告: analytics.js スクリプトが例として使用されていますが、本番環境では使用しないでください。代わりに、タグ マネージャーで Google アナリティクスを導入するの手順を行ってください。

<!-- 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 に変更します。

   

この時点で、最初の <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);

注: スクリプトの URL は通常、適切な cacheToken 値です。

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

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

注意: data.gtmOnSuccess コールバックを injectScript() に忘れずに指定してください。すべてのカスタム テンプレートに対して data.gtmOnSuccess が呼び出される必要があります。独自の成功コールバックを提供する場合は、それが data.gtmOnSuccess を呼び出すようにしてください。

権限

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

これらのエラーが表示されるのは、サンドボックス化された 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 のチェックボックスをオンにします。

   

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

   

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

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

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

   

   注: URL Match Patterns では、サブドメインとパスにワイルドカードを使えるため、https://www.google-analytics.com/* を使用できましたが、可能であればより具体的な一致パターンを使用することが推奨されます。ポリシーについて詳しくは、inject_script ポリシーをご覧ください。

これで [コードを実行] をクリックしても、コンソールにエラーが表示されなくなります。カスタム テンプレートにタグが変換されました。[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);