カスタム変数を作成する

このガイドでは、カスタム変数テンプレートの作成方法について説明します。この変数を使って、値の配列を取得し、コンマ区切りの文字列として返します。

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

2. [情報] タブで、変数の名前と説明を定義します。

   名前: ユーザーがこの変数を実装する際に、ここで指定した名前がタグ マネージャーの管理画面に表示されます。

   説明: この変数の用途についての簡単な説明（200 文字以下）を記入します。

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

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

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

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

5. [フィールドの追加] をクリックして [シンプルな表] を選択します。デフォルトの名前（たとえば「simpleTable1」）を「リスト」に置き換えます。[テンプレートのプレビュー] で [更新] をクリックします。

   この手順を繰り返して、「array」という名前の [テキスト入力]、「use_array」と「sort」いう名前の 2 つの [チェックボックス]、「delimiter」という名前の [テキスト入力] を追加します。 「delimiter」で歯車アイコンをクリックし、[デフォルト値] をオンに切り替え、表示された [デフォルト値] 入力欄で「,」を指定します。

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

   var input = data.array;
   
   if (!data.use_array) {
     input = [];
     for (var i = 0; i < data.list.length; i++) {
       input.push(data.list[i].values);
     }
   }
   
   if (data.sort) {
     input.sort();
   }
   
   return input.join(data.delimiter || ',');
   

   この変数のコードは非常に単純ですが、いくつか注意点があります。

   • data フィールド

     data グローバルからアクセスされているいくつかの項目があります。data には、前の手順で設定した値が含まれるため、data.use_array、data.sort、data.list、data.delimiter にアクセスできるようになります。

   • data.delimiter が指定されていない場合、delimiter にはデフォルト値の "," が設定されます。適切な場合は、デフォルト値を使用することをおすすめします。そうすることで、ユーザーは変数を使用するためにすべての項目に入力する必要がなくなり、簡単に変数テンプレートを使用できます。

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

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

8. [テンプレートのプレビュー] タブで、値の入力項目に値を追加して [コードを実行] をクリックし、コンソールで変数の出力を確認します。

   エラーがある場合は、[コンソール] ウィンドウに表示されます。

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

   これで、変数テンプレートを使用できます。