自定义模板快速入门指南

借助于自定义模板，您可以编写自己的代码和变量定义，以便组织中的其他人在内置代码和变量模板中使用这些定义。自定义模板以权限为中心，具有沙盒化的特点，因此，与使用自定义 HTML 标记和自定义 JavaScript 变量相比，通过这些模板编写自定义代码和变量会更加安全，效率也会更高。

自定义代码和变量模板的定义均在 Google 跟踪代码管理器的“模板”部分中完成。在“模板”主屏幕中，会列出已在容器中定义的任何代码或变量模板。您还可以在此屏幕创建新模板。

您可以导出模板并与组织中的其他人共享，还可以开发多个模板以在社区模板库中进行更广泛的分发。

模板编辑器

在模板编辑器中，您可以创建、预览和测试各种自定义模板。编辑器有四个主要输入区域，方便您定义代码模板：

信息 - 用于定义模板的基本属性，例如代码或变量的名称和图标。
字段 - 这是一个可视化编辑器，用于向代码模板添加输入字段。
代码 - 用于输入沙盒化 JavaScript，以定义代码或变量的行为方式。
权限 - 用于查看代码或变量可执行的操作，并设置相关操作限制。

创建您的首个自定义代码模板

本示例将向您介绍如何创建基本示例像素代码。此代码在网页上被触发后，会向代码提供商的服务器发送包含正确账号信息的命中数据。

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

2. 点击“信息”，并为代码设定“名称”（必需属性）、“说明”和“图标”。

名称：当用户在整个跟踪代码管理器界面中实现代码时，系统将向其显示此属性中输入的内容。

说明：顾名思义，就是对此代码用途的简短说明，不超过 200 个字符。

图标：您可以通过此属性选择相关图片，以便在支持图标属性的列表中显示代码时作为图标进行显示。此类图标均应为 PNG、JPEG 或 GIF 格式的方形图片文件，尺寸不超过 50 KB，且至少为 64 像素 × 64 像素。

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

“模板预览”窗口显示在字段输入区域的右侧。每次在编辑器中进行修改时，系统都会显示刷新按钮。点击该“刷新”按钮，即可预览所做修改对代码外观的影响。

4. 点击“字段”以向代码模板添加字段。

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

5. 点击“添加字段”，然后选择“文本输入”，并将默认名称（例如“text1”）替换为“accountId”。在“模板预览”中，点击“刷新”。

字段旁会显示熟悉的变量选择器 () 图标。凡是使用此模板的用户，均可点击该变量选择器图标来选择此容器中有效的变量。

下一步是在字段中添加标签：

6. 点击文本字段旁边的展开图标 ()，以显示此字段的更多选项。然后，在“显示名称”字段中输入“账号 ID”。最后，在“模板预览”中，点击“刷新”。

此时，该字段上方会显示标题为“账号 ID”的文本标签。

7. 点击“代码”标签页，然后在编辑器中输入下列沙盒化 JavaScript 代码：

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

第一行代码为 const sendPixel = require('sendPixel')，它会导入 sendPixel API。

第二行代码为 const encodeUriComponent = require('encodeUriComponent')，它会导入 encodeUriComponent API。

下一行代码为 const account = data.accountId;，它会获取在第 5 步中创建的 accountId 的值，并将其存储在名为 account 的常量中。

第三行代码为 const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);，它会设置一个 url 常量，该常量会将记录分析数据的固定网址端点和配置这段代码所用的经过编码的账号 ID 关联起来。

最后一行代码为 sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)，它会运行带有各种必需参数的 sendPixel() 函数，并向指定的网址发出请求。data.gtmOnSuccess 和 data.gtmOnFailure 值会在代码完成任务或任务失败时告知 Google 跟踪代码管理器，之后 Google 跟踪代码管理器会使用这些值来实现代码触发顺序或预览模式等功能。

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

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

9. 点击“权限”，以进一步指定 sendPixel 可向哪些具体网域发送数据。对于“发送像素”条目，点击展开图标 ()，并在“允许的网址匹配模式”中输入 https://endpoint.example.com/。

当代码模板已配置为发送数据时，必须在关联权限下指定允许的网址匹配模式，以对数据的接收位置进行限制。如果代码中指定的网址与允许的网址匹配模式不匹配，则 sendPixel 调用将失败。

网址匹配模式必须使用 HTTPS 协议，并同时指定主机和路径模式。主机可以是网域（例如，“https://example.com/”），也可以是特定的子网域（例如，“https://sub.example.com/”）。路径必须至少包含一个“/”符号。在指示任何长度的子域名或路径模式时，可以使用星号 (*) 作为通配符（例如，“https://\*.example.com/test/”）。星号这个通配符可以捕获各种可能的模式，例如“\*.example.com/”将匹配 www.example.com、shop.example.com 和 blog.example.com 等。星号必须使用反斜杠字符进行转义（即“\*”）。不带任何附加字符的网址（例如，“https://example.com/”）会被视为以通配符结尾，即等同于“https://example.com/\*”。

如要指定其他网址匹配模式，请另起一行。

10. 点击“运行代码”，然后查看“控制台”窗口中是否显示任何问题。

如检测到任何错误，都将在控制台窗口中进行显示。

11. 点击“保存”，然后关闭模板编辑器。

此时，代码模板应该已创建完毕，随时可供使用。

使用新的代码

使用新定义的自定义代码模板创建新代码的流程与创建其他任何代码一样。

在 Google 跟踪代码管理器中，点击代码 > 新建。
您的新代码会显示在“新代码”窗口的“自定义”部分中。点击即可打开该代码模板。
填写代码模板配置的必要字段。
点击触发条件并针对何时应触发代码选择合适的触发条件。
保存代码并发布您的容器。

创建您的首个自定义变量模板

自定义变量模板与代码模板类似，但两者也有一些显著差异：

自定义变量模板必须返回值。

变量会直接返回一个值，而不是调用 data['gtmOnSuccess'] 来指示完成。
自定义变量模板可在跟踪代码管理器界面的不同部分中使用。
要在自定义变量的基础上创建新变量，您需要转到变量 > 新建，而不是代码 > 新建

有关如何创建自定义变量模板的完整指南，请参阅创建自定义变量一文。

导出和导入

若要与您的组织共享自定义模板，您可以导出自定义模板，并将其导入到其他跟踪代码管理器容器中。要导出模板，请执行以下操作：

在跟踪代码管理器中，点击模板。
点击要从列表中导出的模板的名称。此操作会在模板编辑器中打开该模板。
点击“更多操作”菜单 ()，然后选择导出。

要导入模板，请执行以下操作：

在跟踪代码管理器中，点击模板。
点击新建。此操作会在模板编辑器中打开一个空白模板。
点击“更多操作”菜单 ()，然后选择导入。
选择要导入的 .tpl 文件。