Google标记管理器在路由更改后不发送分析请求

Question

我正在尝试在react应用程序中实现google标记管理器。它在页面重新加载时工作，但是当我通过路径在应用程序之间移动时，它不会在google分析中注册页面视图。

我已经尝试过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标记

​

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

编辑：详细数据层变量视图

​

第一负荷(重装)

​

路线变更

​

Answer 1

我将componentDidMount代码更改为

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

数据层推送

现在，我可以在中看到关于路由更改的页面查看。

Answer 2

您用index.html编写的代码仅在页面加载时运行一次，如果要在页上注册事件，需要在要触发的路由上触发相同的事件，则可以从window访问dataLayer变量。