javascript - 路线更改后谷歌标签管理器不发送分析请求

Question

我正在尝试在 React 应用程序中实现谷歌标签管理器。它适用于页面重新加载，但是当我通过路由在我的应用程序之间移动时，它不会在谷歌分析中注册页面 View 。

我已经尝试过 react-gtm-module，但它也在重新加载而不是路由更改。

index.html 在 head 标签中添加以下代码。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

在 body 标签中添加以下代码。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

在我的组件 componentDidMount 中，我在 dataLayer 中推送新的 pageView

dataLayer.push({
    event: 'Pageview',
    pagePath: 'page-path-here',
    pageTitle: 'page-title-here',
});

我已经创建了 pagePath 和 pageTitle dataLayer 变量并将它们分配给 Google 分析标签。我还创建了一个自定义触发器PageView 和将其添加到 Google 分析标签中的触发触发器。

数据层变量

自定义触发器

将数据层变量分配给 Analytics 代码

谁能给我指出正确的方向？

编辑: 详细数据层变量 View

第一次加载(重新加载)

路线变更

Answer 1

你在 index.html 中编写的代码只在页面加载时运行一次如果你想在页面更改时注册一个事件你需要在你想要触发的路由上触发相同的事件，您可以从 window

访问 dataLayer 变量