カスタム テンプレートのクイック スタートガイド

カスタム テンプレートを使用すると、独自のタグや変数の定義を作成できます。組織内の他のユーザーは、それらの独自のタグや変数の定義を組み込みのタグや変数テンプレートと併用できます。カスタム テンプレートは権限に基づいてサンドボックス化されているため、カスタム HTML タグまたはカスタム JavaScript 変数を使用する場合よりも、効率よく安全にカスタムのタグと変数を作成できます。

カスタムのタグおよび変数のテンプレートは、Google タグ マネージャーの [テンプレート] セクションで定義します。メインの [テンプレート] 画面には、コンテナですでに定義されているタグまたは変数のテンプレートが一覧表示されます。この画面から新しいテンプレートを作成することもできます。

テンプレートは、エクスポートして組織内の他のユーザーと共有できるほか、コミュニティ テンプレート ギャラリーに送信して広範囲に配布することもできます。

テンプレート エディタ

テンプレート エディタを使用すると、カスタム テンプレートを作成、プレビュー、テストすることができます。 タグのテンプレートの定義に使用する主な入力項目は、次の 4 つです。

  • 情報 - タグや変数の名前、アイコンなど、テンプレートの基本的なプロパティを定義します。
  • 項目 - タグ テンプレートに入力フィールドを追加するためのビジュアル エディタです。
  • コード - サンドボックス化された JavaScript を入力して、タグや変数の動作を定義します。
  • 権限 - タグや変数による操作の制限を表示したり設定したりすることができます。

初めてのカスタムタグ テンプレートを作成する

この例では、基本的なサンプル ピクセルタグの作成方法について説明します。このタグがウェブページで起動されると、正しいアカウント情報とともにヒットがタグプロバイダのサーバーに送信されます。

1. 最初のテンプレートを作成するには、左側のナビゲーションで [テンプレート] をクリックし、[タグ テンプレート] にある [新規] ボタンをクリックします。

2. [情報] をクリックし、タグの [名前]（必須）、[説明]、[アイコン] を定義します。

[名前] はそのタグを実装する際に、タグ マネージャーの管理画面全体で表示されます。

[説明] は、このタグの機能に関する簡単な説明（200 文字以下）です。

[アイコン] では、アイコン プロパティに対応するリストにタグが表示されたときの表示画像を選択します。アイコンの画像は、スクエア形式の PNG、JPEG、または GIF ファイルにしてください。容量は 50 KB 以下、64 ピクセル × 64 ピクセル以下である必要があります。

3. [更新] をクリックしてテンプレートのプレビューを確認します。

入力項目の右側に、[テンプレートのプレビュー] ウィンドウがあります。エディタで変更が行われるたびに、[更新] ボタンが表示されます。[更新] をクリックすると、変更内容がタグの外観に反映されます。

4. [項目] をクリックしてタグ テンプレートに項目を追加します。

テンプレート エディタの [項目] タブでは、タグ テンプレートの項目を作成したり編集したりすることができます。項目は、アカウント ID などのカスタムデータを入力するために使用されます。テキスト項目、プルダウン メニュー、ラジオボタン、チェックボックスなどの標準的なフォーム要素を追加できます。

5. [フィールドを追加] をクリックし、[テキスト入力] を選択します。デフォルトの名前（「text1」など）を「accountId」に変更します。[テンプレートのプレビュー] で [更新] をクリックします。

項目の横には、使いやすい変数セレクタ（変数選択用のアイコン）アイコンが表示されます。テンプレートのユーザーは、このアイコンをクリックして、そのコンテナ内でアクティブな変数を選択することができます。

次に項目にラベルを追加します。

6. テキスト項目の横にある展開アイコン（展開アイコン）をクリックして、この項目の他のオプションを表示します。[表示名] に「アカウント ID」と入力します。[テンプレートのプレビュー] で [更新] をクリックします。

「アカウント ID」というタイトルのテキストラベルが項目の上に表示されます。

7. [コード] タブをクリックし、エディタにサンドボックス化された JavaScript を入力します。

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

コードの最初の行の const sendPixel = require('sendPixel') は、sendPixel API を読み込みます。

コードの 2 行目の const encodeUriComponent = require('encodeUriComponent') は、encodeUriComponent API を読み込みます。

次の行の const account = data.accountId; は、手順 5 で作成した accountId の値を取得し、account という定数に格納します。

3 行目のコードの const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account); は、url 定数を設定します。この定数によって、分析データを記録する固定 URL エンドポイントと、エンコード済みのアカウント ID（タグの設定に使用されたもの）が連結されます。

最後の行の sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) は、必須パラメータを含む sendPixel() 関数を実行して、指定された URL へのリクエストを行います。data.gtmOnSuccess 値および data.gtmOnFailure 値は、タスクが完了または失敗したタイミングを Google タグ マネージャーに通知します。これらの値は、タグの順序付けとプレビュー モードでも使用されます。

8. [保存] をクリックしてここまでの内容を保存します。検出された権限がテンプレート エディタに読み込まれます。

一部のテンプレート API には、許可される操作と許可されない操作を規定した権限が関連付けられています。コードで sendPixel などのテンプレート API を使用すると、タグ マネージャーの [権限] タブに関連する権限が表示されます。

9. [権限] をクリックして、sendPixel によるデータの送信を許可するドメインを指定します。[Send Pixels] エントリで展開アイコン（展開アイコン）をクリックし、[許可された URL 一致パターン] に https://endpoint.example.com/ のように入力します。

タグ テンプレートがデータを送信するよう設定されている場合は、関連する権限の下で [許可される URL 一致パターン] を指定し、データを送信できる場所を制限する必要があります。コードで指定された URL と許可される URL 一致パターンが一致しない場合、sendPixel の呼び出しは失敗します。

URL 一致パターンでは HTTPS を使用し、ホストとパスのパターンの両方を指定する必要があります。ホストにはドメイン（「https://example.com/」など）か特定のサブドメイン（「https://sub.example.com/」など）を指定できます。パスには「/」を少なくとも 1 つ含める必要があります。アスタリスク（*）をワイルドカードとして使用し、任意の長さのサブドメインまたはパスのパターン（「https://\*.example.com/test/」など）を指定することもできます。アスタリスクは、さまざまなパターンに対応するワイルドカード文字です。たとえば、「\*.example.com/」は、www.example.com、shop.example.com、blog.example.com などに一致します。アスタリスクはバックスラッシュ「\*」でエスケープする必要があります。特殊文字が追加されていない URL（「https://example.com/」など）は、ワイルドカードで終わっているもの（「https://example.com/\*」と同等）と見なされます。

URL 一致パターンは 1 行に 1 つずつ指定します。

10. [コードを実行] をクリックし、[コンソール] ウィンドウで問題がないか確認します。

検出されたエラーは [コンソール] ウィンドウに表示されます。

11. [保存] をクリックし、テンプレート エディタを閉じます。

以上でタグ テンプレートは使用できる状態になります。

新しいタグを使う

新しく定義したカスタムタグ テンプレートを使用して新しいタグを作成するプロセスは、他のタグとまったく同じです。

  1. Google タグ マネージャーで、[タグ] > [新規] をクリックします。
  2. 新しいタグが [新しいタグ] ウィンドウの [カスタム] セクションに表示されるので、 それをクリックしてタグ テンプレートを開きます。
  3. タグ テンプレート設定に必要な項目に入力します。
  4. [トリガー] をクリックして、タグを起動するタイミングに適したトリガーを選択します。
  5. タグを保存してコンテナを公開します。

初めてのカスタム変数テンプレートを作成する

カスタム変数テンプレートはタグ テンプレートに似ていますが、次のような主な違いがあります。

  • カスタム変数テンプレートは値を返す必要があります。

    完了を通知する際には、data['gtmOnSuccess'] を呼び出すのではなく、変数が直接値を返します。

  • カスタム変数テンプレートは、タグ マネージャー管理画面のさまざまな部分で使用されています。

  • カスタム変数に基づいて新しい変数を作成する場合は、[タグ] > [新規] ではなく [変数] > [新規] を使用します。

カスタム変数テンプレートを作成するための詳細なガイドについては、カスタム変数の作成についての記事をご覧ください。

エクスポートとインポート

カスタム テンプレートを組織内で共有する場合は、カスタム テンプレートをエクスポートしてから、他のタグ マネージャー コンテナにインポートします。テンプレートをエクスポートする手順は以下のとおりです。

  1. タグ マネージャーで、[テンプレート] をクリックします。
  2. エクスポートするテンプレートの名前をリスト内でクリックします。テンプレート エディタでテンプレートが開きます。
  3. その他の操作メニュー（）をクリックし、[エクスポート] を選択します。

テンプレートをインポートする手順は以下のとおりです。

  1. タグ マネージャーで、[テンプレート] をクリックします。
  2. [新規] をクリックします。テンプレート エディタで、空白のテンプレートが開きます。
  3. その他の操作メニュー（）をクリックし、[インポート] を選択します。
  4. インポートする .tpl ファイルを選択します。