创建自定义变量

本指南将向您逐步介绍如何创建自定义变量模板。所创建的模板可以接受一系列值,然后以英文逗号分隔的字符串返回这些值。

  1. 若要开始创建您的第一个变量模板,请点击左侧导航栏中的“模板”,然后点击“变量模板”部分下的“新建”按钮。

  2. 在“信息”标签页中,为变量指定“名称”和“说明”。

    名称:当用户在整个跟踪代码管理器界面中处理该变量时,将会看到的变量名称。

    说明:顾名思义,就是对变量用途的简短说明,不超过 200 个字符。

  3. 点击“刷新”以预览模板。

    在字段输入区域的右侧,有一个“模板预览”窗口。每次编辑器中只要出现修改,系统就会显示刷新按钮。点击该“刷新”按钮,即可预览所做修改对变量的影响。

  4. 点击“字段”,以将字段添加到您的变量模板中。

    通过模板编辑器的字段标签页,您可以在变量模板中创建和修改字段。这些字段用于输入帐号 ID 等自定义数据。您可以添加标准表单元素,如文本字段、下拉菜单、单选按钮和复选框。

  5. 点击“添加字段”,然后选择“简单表格”,并将其默认名称(如“simpleTable1”)替换为“list”。在“模板预览”中,点击“刷新”。

    重复执行第 5 步,添加两个“文本输入”字段并分别命名为“array”和“delimiter”,同时添加两个“复选框”并分别命名为“use_array”和“sort”。接着,为“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 将包含您在第 5 步中设置的值。因此,我们能够访问 data.use_arraydata.sortdata.listdata.delimiter

    • 如未提供 data.delimiter,则 delimiter 会设置为默认值 ","。如果合适的话,最好为字段设置默认值。这可让用户更轻松地使用变量模板,因为无需填写每个字段,就可以使用变量。

  7. 点击“保存”以保存进度。这可将检测到的任何权限加载到模板编辑器中。

    一些模板 API 带有与其自身相关联的权限,以便控制这些 API 可执行哪些操作,或不可执行哪些操作。在代码中使用模板 API(如 sendPixel)时,跟踪代码管理器会在权限标签页中显示相关权限。

  8. 在“模板预览”标签页下,为“值”输入框添加一些值,点击运行代码,然后在“控制台”中查看变量的输出。

    如有任何错误,都会显示在控制台窗口中。

  9. 点击“保存”,然后关闭“模板编辑器”

    此时,变量模板应该已创建完毕,随时可供使用。