本指南将向您逐步介绍如何创建自定义变量模板。所创建的模板可以接受一系列值,然后以英文逗号分隔的字符串返回这些值。
若要开始创建您的第一个变量模板,请点击左侧导航栏中的“模板”,然后点击“变量模板”部分下的“新建”按钮。
在“信息”标签页中,为变量指定“名称”和“说明”。
名称:当用户在整个跟踪代码管理器界面中处理该变量时,将会看到的变量名称。
说明:顾名思义,就是对变量用途的简短说明,不超过 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
)时,跟踪代码管理器会在权限标签页中显示相关权限。在“模板预览”标签页下,为“值”输入框添加一些值,点击运行代码,然后在“控制台”中查看变量的输出。
如有任何错误,都会显示在控制台窗口中。
点击“保存”,然后关闭“模板编辑器”。
此时,变量模板应该已创建完毕,随时可供使用。