如果您在网站中使用React，则可以使用Matomo 标签管理器开始无缝跟踪Matomo中的数据。在 Matomo 中创建新站点后，Matomo 标签管理器将自动预先配置一个带有 Matomo 跟踪代码标签的容器，可立即使用该容器。
如果您计划对多个网站使用单个容器，请确保在执行以下步骤时使用该特定容器的跟踪代码。
请按照以下步骤进行设置：
- 在您的Matomo 跟踪代码管理器容器中，导航至“触发器”并单击“创建新触发器”。
- 选择“用户参与”部分下的“历史更改”触发器。
- 为触发器命名，例如“History Change”。
- 单击“创建新触发器”。
- 创建另一个触发器，这次选择“Pageview”作为触发器类型。
- 选择“综合浏览量”部分下的“综合浏览量”触发器。
- 为触发器命名，例如“Pageview”。
- 单击“创建新触发器”。
- 接下来，导航到标签并单击“创建新标签”，然后选择“Matomo Analytics”作为标签类型。
- 选择您的 Matomo 配置变量并将跟踪类型设置为“Pageview”。
- 将自定义标题设置为{{PageTitle}}。
- {{PageOrigin}}/{{PageHash}}如果您的 React 应用程序的 URL 中包含用于#导航到不同页面的 URL，请将自定义 URL 设置为。否则，将其设置为{{PageUrl}}
- 在“触发任何这些触发器时执行此标记”选项下，选择我们创建的“历史记录更改”和“页面浏览”触发器。
- 将Matomo 标签管理器 JS 代码注入您的App.js（或其他相关文件），我们建议使用“ React.useEffect ”方法执行此操作。下面的示例展示了如何将Matomo 标签管理器 JS代码添加到React.js中的“ Hello World ”应用程序中。
import React from 'react';
export default function App () {
React.useEffect(() => {
var _mtm = window._mtm = window._mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='{YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}'; s.parentNode.insertBefore(g,s);
}, [])
return (
<div>
<h1>Hello World</h1>
</div>
)
}15. 将“ {YOUR_MATOMO_TAG_MANAGER_CONTAINER_URL}”替换为您要使用的容器代码，容器代码的格式为“ container_*.js”。按照本指南查找您的容器代码。 16. 使用预览/调试模式来测试并确保您的触发器和标签按预期工作。 17. 确认触发器和标签按预期工作后，发布更改，以便将它们部署到您的网站。
恭喜！您已通过 Matomo 标签管理器成功安装了 Matomo Analytics 跟踪代码。要验证是否正在跟踪点击，请访问您的网站并检查此数据在您的 Matomo 实例中是否可见。
