如何开始在使用 React 的网站上使用 Matomo 跟踪数据？

如果您在网站中使用React，则可以使用Matomo 标签管理器开始无缝跟踪Matomo中的数据。在 Matomo 中创建新站点后，Matomo 标签管理器将自动预先配置一个带有 Matomo 跟踪代码标签的容器，可立即使用该容器。

如果您计划对多个网站使用单个容器，请确保在执行以下步骤时使用该特定容器的跟踪代码。

请按照以下步骤进行设置：

1. 在您的Matomo 跟踪代码管理器容器中，导航至“触发器”并单击“创建新触发器”。
2. 选择“用户参与”部分下的“历史更改”触发器。
3. 为触发器命名，例如“History Change”。
4. 单击“创建新触发器”。
5. 创建另一个触发器，这次选择“Pageview”作为触发器类型。
6. 选择“综合浏览量”部分下的“综合浏览量”触发器。
7. 为触发器命名，例如“Pageview”。
8. 单击“创建新触发器”。
9. 接下来，导航到标签并单击“创建新标签”，然后选择“Matomo Analytics”作为标签类型。
10. 选择您的 Matomo 配置变量并将跟踪类型设置为“Pageview”。
11. 将自定义标题设置为{{PageTitle}}。
12. {{PageOrigin}}/{{PageHash}}如果您的 React 应用程序的 URL 中包含用于#导航到不同页面的 URL，请将自定义 URL 设置为。否则，将其设置为{{PageUrl}}
13. 在“触发任何这些触发器时执行此标记”选项下，选择我们创建的“历史记录更改”和“页面浏览”触发器。
14. 将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 实例中是否可见。