创建自定义变量
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
本指南将向您逐步介绍如何创建自定义变量模板。所创建的模板可以接受一系列值,然后以英文逗号分隔的字符串返回这些值。
若要开始创建您的第一个变量模板,请点击左侧导航栏中的“模板”,然后点击“变量模板”部分下的“新建”按钮。
在“信息”标签页中,为变量指定“名称”和“说明”。
名称:当用户在整个跟踪代码管理器界面中处理该变量时,将会看到的变量名称。
说明:顾名思义,就是对变量用途的简短说明,不超过 200 个字符。
点击“刷新”以预览模板。
在字段输入区域的右侧,有一个“模板预览”窗口。每次编辑器中只要出现修改,系统就会显示刷新按钮。点击该“刷新”按钮,即可预览所做修改对变量的影响。
点击“字段”,以将字段添加到您的变量模板中。
通过模板编辑器的字段标签页,您可以在变量模板中创建和修改字段。这些字段用于输入帐号 ID 等自定义数据。您可以添加标准表单元素,如文本字段、下拉菜单、单选按钮和复选框。
点击“添加字段”,然后选择“简单表格”,并将其默认名称(如“simpleTable1”)替换为“list”。在“模板预览”中,点击“刷新”。
重复执行第 5 步,添加两个“文本输入”字段并分别命名为“array”和“delimiter”,同时添加两个“复选框”并分别命名为“use_array”和“sort”。接着,为“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
将包含您在第 5 步中设置的值。因此,我们能够访问 data.use_array
、data.sort
、data.list
和 data.delimiter
。
如未提供 data.delimiter
,则 delimiter
会设置为默认值 ","
。如果合适的话,最好为字段设置默认值。这可让用户更轻松地使用变量模板,因为无需填写每个字段,就可以使用变量。
点击“保存”以保存进度。这可将检测到的任何权限加载到模板编辑器中。
一些模板 API 带有与其自身相关联的权限,以便控制这些 API 可执行哪些操作,或不可执行哪些操作。在代码中使用模板 API(如 sendPixel
)时,跟踪代码管理器会在权限标签页中显示相关权限。
在“模板预览”标签页下,为“值”输入框添加一些值,点击运行代码,然后在“控制台”中查看变量的输出。
如有任何错误,都会显示在控制台窗口中。
点击“保存”,然后关闭“模板编辑器”。
此时,变量模板应该已创建完毕,随时可供使用。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2023-10-27。
[null,null,["最后更新时间 (UTC):2023-10-27。"],[[["\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."]]