自定义 Managed Components

Zaraz 支持使用 Managed Components ↗ 加载自定义第三方工具。这些可以是你自己开发的 Managed Components，也可以是他人开发的。在 Zaraz 中使用 Custom Managed Components，需要将它们转换为在你账户中运行的 Cloudflare Worker。

如果你是 Managed Components 的新手，我们建议从创建自己的 Managed Component ↗ 开始，或查看我们的演示 Managed Component ↗。

首先，你需要准备好一个可供部署的 JavaScript 文件，该文件导出你的 Managed Component 的默认 Managed Component 函数。

在本指南中，我们将使用一个简单的自定义 Managed Component 示例，该组件统计用户访问次数并在控制台中记录此数据：

// File: index.js
export default async function (manager) {
	// Add a pageview event
	manager.addEventListener("pageview", event, () => {
		const { client } = event;

		// Get the variable "counter" from the client's cookies and increase by 1
		let counter = parseInt(client.get("counter")) || 0;
		counter += 1;

		// Log the increased number
		client.execute(`console.log('Views: ${counter}')`);

		// Store the increased number for the next visit
		client.set("counter", counter);
	});
}

1. 在 Managed Component 的根目录中打开终端。
2. 从该目录运行 npx managed-component-to-cloudflare-worker ./index.js my-new-counter-mc，这会将 Managed Component 部署到专用的 Cloudflare Worker。请将路径改为你的 index.js。你也可以重命名该 Component。
3. 你的 Managed Component 现在应在你的账户中可见 ↗，作为以 custom-mc- 为前缀的 Cloudflare Worker。

1. 在 Cloudflare 仪表板中，前往 **Tag Setup（标签设置）**页面。

   Go to Tag setup ↗

2. 选择 Tools Configuration（工具配置） > Third-party tools ↗。

3. 选择 Add new tool（添加新工具），并从工具库页面选择 Custom Managed Component（自定义托管组件）。选择 **Continue（继续）**以确认你的选择。

4. 在 **Select Custom MC（选择 Custom MC）**中，选择已部署到你账户的 Custom Managed Component，例如 custom-mc-my-new-counter-mc。选择 Continue（继续）。

5. 在 **Permissions（权限）**中，选择要授予 Custom Managed Component 的权限。如果运行不受信任的 Managed Component，请仔细注意你授予的权限。选择 Continue（继续）。

6. 在 **Set up（设置）**中，配置新工具的设置。需要输入的信息取决于 Managed Component 的代码。你可以添加设置和默认字段，也可以使用你之前设置的变量。

7. 选择 Save（保存）。

虽然工具现已配置完成，但尚未关联任何操作。添加新操作将告诉 Zaraz 何时联系你的 Managed Component，以及向其发送哪些信息。添加操作时，请确保验证你使用的 Action Type。最常用的类型是 pageview 和 event，但你可以添加任何操作类型，以匹配 Managed Component 使用的事件监听器。了解如何创建其他操作。

如果你的 Managed Component 监听 ecommerce 事件，请在 Managed Component Settings 页面中切换 E-commerce tracking（电商跟踪）。

目前，Custom Managed Components 尚不支持使用以下方法：

• manager.registerEmbed
• manager.registerWidget
• manager.proxy
• manager.serve