カスタム変数を作成する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
このガイドでは、カスタム変数テンプレートの作成方法について説明します。この変数を使って、値の配列を取得し、コンマ区切りの文字列として返します。
最初の変数テンプレートを作成するには、左側のナビゲーションで [テンプレート] をクリックし、[変数テンプレート] セクションにある [新規] ボタンをクリックします。
[情報] タブで、変数の名前と説明を定義します。
名前: ユーザーがこの変数を実装する際に、ここで指定した名前がタグ マネージャーの管理画面に表示されます。
説明: この変数の用途についての簡単な説明(200 文字以下)を記入します。
[更新] をクリックしてテンプレートのプレビューを確認します。
項目入力の右側に、[テンプレートのプレビュー] ウィンドウがあります。
エディタで変更が行われるたびに、[更新] ボタンが表示されます。このボタンをクリックすると、変更内容が変数表示に反映されます。
[項目] をクリックして、変数テンプレートに項目を追加します。
テンプレート エディタの [項目] タブで、変数テンプレートの項目を作成したり編集したりすることができます。フィールドは、アカウント ID などのカスタムデータを入力するために使用されます。テキスト項目、プルダウン メニュー、ラジオボタン、チェックボックスなどの標準的なフォーム要素を追加できます。
[フィールドの追加] をクリックして [シンプルな表] を選択します。デフォルトの名前(たとえば「simpleTable1」)を「リスト」に置き換えます。[テンプレートのプレビュー] で [更新] をクリックします。
この手順を繰り返して、「array」という名前の [テキスト入力]、「use_array」と「sort」いう名前の 2 つの [チェックボックス]、「delimiter」という名前の [テキスト入力] を追加します。
「delimiter」で歯車アイコンをクリックし、[デフォルト値] をオンに切り替え、表示された [デフォルト値] 入力欄で「,」を指定します。
[コード] タブをクリックし、エディタにサンドボックス化された 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
にはデフォルト値の ","
が設定されます。適切な場合は、デフォルト値を使用することをおすすめします。そうすることで、ユーザーは変数を使用するためにすべての項目に入力する必要がなくなり、簡単に変数テンプレートを使用できます。
[保存] をクリックしてここまでの内容を保存します。検出された権限がテンプレート エディタに表示されます。
一部のテンプレートの API には、操作できることとできないことを指定する権限が関連付けられています。コードで sendPixel
などのテンプレート API を使用すると、タグ マネージャーの [権限] タブに、関連する権限が表示されます。
[テンプレートのプレビュー] タブで、値の入力項目に値を追加して [コードを実行] をクリックし、コンソールで変数の出力を確認します。
エラーがある場合は、[コンソール] ウィンドウに表示されます。
[保存] をクリックし、テンプレート エディタを閉じます。
これで、変数テンプレートを使用できます。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2023-10-27 UTC。
[null,null,["最終更新日 2023-10-27 UTC。"],[[["\u003cp\u003eThis guide provides step-by-step instructions to create a custom variable template in Google Tag Manager.\u003c/p\u003e\n"],["\u003cp\u003eThis template transforms an array of values into a comma-separated string using JavaScript code within the template.\u003c/p\u003e\n"],["\u003cp\u003eThe template utilizes fields like 'list', 'array', 'use_array', 'sort', and 'delimiter' to customize its functionality.\u003c/p\u003e\n"],["\u003cp\u003eUsers can preview and test the template using the 'Template Preview' and 'Console' sections within the editor.\u003c/p\u003e\n"],["\u003cp\u003eOnce saved, the custom variable template is ready to be implemented within Google Tag Manager.\u003c/p\u003e\n"]]],["To create a variable template that returns a comma-delimited string from an array, start by creating a new template, defining its name and description in the *Info* tab. Then, in the *Fields* tab, add fields for a simple table (\"list\"), text input (\"array\"), checkboxes (\"use_array\", \"sort\"), and text input (\"delimiter\"). In the *Code* tab, enter sandboxed JavaScript to process these fields, joining the array with the specified delimiter, and save. Then preview the result and save the variable.\n"],null,["# Create a custom variable\n\nThis guide will walk you through how to create a custom variable template. When\nthis variable is used, it will take an array of values and return them as a\ncomma delimited string.\n\n1. To begin your first variable template, click Templates in the left\n navigation and click the *New* button under the *Variable Templates*\n section.\n\n2. In the *Info* tab, define the variable's *Name* and *Description*.\n\n **Name** is what will be presented to users when they go to implement this\n variable throughout the Tag Manager user interface.\n\n **Description** is just what it sounds like - a brief (200 characters or\n less) description of what this variable does.\n3. Click *Refresh* to preview your template.\n\n To the right of the field inputs, there is a *Template Preview* window.\n Every time a change is made in the editor, the **Refresh** button will\n appear. Click Refresh to see what your changes do to the appearance of your\n variable.\n4. Click *Fields* to add fields to your variable template.\n\n The Template Editor's **Fields** tab lets you create and edit fields in the\n variable template. Fields are used to enter custom data, such as an account\n ID. You can add the standard form elements like text fields, drop down\n menus, radio buttons, and checkboxes.\n5. Click *Add Field* and select *Simple table* . Replace the default name (e.g.\n *\"simpleTable1\"* ) with *\"list\"* . In the *Template Preview* , click *Refresh*.\n\n Repeat this step for a *Text Input* and call it *\"array\"* , two *Checkboxes*\n called \"*use_array* \" and *\"sort\"* , and a *Text Input* called *\"delimiter\"* .\n For *\"delimiter\"* , give it a default value of \",\" by clicking the gear icon,\n toggling *\"Default value\"* to on, and then filling in the new Default Value\n input field.\n6. Click the *Code* tab and enter sandboxed JavaScript in the editor:\n\n var input = data.array;\n\n if (!data.use_array) {\n input = [];\n for (var i = 0; i \u003c data.list.length; i++) {\n input.push(data.list[i].values);\n }\n }\n\n if (data.sort) {\n input.sort();\n }\n\n return input.join(data.delimiter || ',');\n\n The code for this variable is fairly straightforward, but there are a few\n things worth pointing out.\n - `data` fields.\n\n There are a few fields that are being accessed off of the `data` global.\n `data` will contain the values that you set up in the previous step.\n That's why we're able to access `data.use_array`, `data.sort`,\n `data.list`, and `data.delimiter`.\n - `delimiter` is set to a default value of `\",\"` if `data.delimiter` is\n not provided. It's a good practice to set default values for a field if\n one makes sense. This makes it easier for users to use the variable\n template, since they don't have to fill out every field in order to use\n the variable.\n\n7. Click *Save* to save your progress. This will load any detected permissions\n into the Template Editor.\n\n Some Template APIs have [permissions](/tag-platform/tag-manager/templates/permissions) associated with them that dictate what\n they can or cannot do. When you use a template API such as `sendPixel` in\n your code, Tag Manager will show relevant permissions in the **Permissions**\n tab.\n8. In the *Template Preview* tab, add some values for the \"values\" input, click\n **Run Code** , and look at the *Console* to see the output for your variable.\n\n If there are any errors, they will appear in the **Console** window.\n9. Click *Save*, and close the Template Editor\n\n The variable template should now be ready for use."]]