Question

我正在尝试在React应用程序中实现Google Tag Manager。它可以在页面重新加载时起作用，但是当我在应用程序之间通过路由移动时，它不会在Google Analytics（分析）中注册页面视图。

我已经尝试过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中，我正在pageView中推新的dataLayer

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

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

数据层变量 data layer variables list

自定义触发器 custom trigger

将数据层变量分配给Analytics标记 google analytics data layer variables

有人可以指出正确的方向吗？

编辑： 详细数据层变量视图 google analytics data layer variables detai

首次加载（重新加载） google analytics data layer variables detai

路线变更 google analytics data layer variables detai

Answer 1

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

Answer 2

我将componentDidMount代码更改为

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

Datalayer push

现在，我可以在Google Analytics（分析）中查看有关路线更改的网页视图。

更改路线后，Google跟踪代码管理器未发送分析请求

2 个答案: