我在 next.js 中使用 styled-components，所以我的样式需要在服务器端呈现，因此我如何将谷歌分析添加到我的网站？
我检查了next.js 谷歌分析示例，但正如我所说，由于使用了样式组件，我的 _document 文件有所不同。
// _document.js
import React from 'react'
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal() …javascript google-analytics reactjs styled-components next.js
我正在尝试将Google Analytics添加到React Web应用程序中.
我知道如何在HTML/CSS/JS站点中进行操作,我也将它集成到AngularJS应用程序中.但是,我不太确定如何应对它.
使用HTML/CSS/JS,我刚刚将它添加到每个页面.
我使用AngularJS做的是将GTM和GA脚本添加到index.html,并将UA标签添加到HTML div(和按钮)以获得点击.
我怎么能用React做到这一点？
请帮忙!
我一直在尝试在我的应用程序中使用 react-ga 包和 google analytics 4。测量 ID 无法使用它，并且我可以使用的 google 分析 4 中没有跟踪代码。拜托，我需要帮助！
import ReactGA from 'react-ga';
const trackingId = 'G-XXXXXXXXXX'; // UA-XXXXXXXXX-X isn't available in GA4
ReactGA.initialize(trackingId, options);
ReactGA.pageview(page);
google-analytics google-analytics-api reactjs react-ga google-analytics-4
我正在尝试在我的 React 站点上设置 Google Analytics 4。以前我使用过 react-ga，但是这个库还不支持 Google Analytics 4。我将 GA4 标签直接粘贴到 index.html 文件中，没有外部库。我需要添加哪些额外的代码才能让 GA4 与 React 路由器一起工作？
提前致谢！
我在使用Google代码管理器(GTM),Google分析(GA)和Google adwords时遇到了一个非常奇怪的问题.到目前为止,我无法解决它.
设置:
我们有一个单页应用程序(骨干和牵线木偶),我们使用GTM使用标准dataLayer.push事件(如果相关,还有电子商务事件)将虚拟网页浏览推送到GA.此设置通常正常.
问题:
问题是用户来自adwords,带有gclid标签.跟踪这些用户的第一次网页浏览并正确归因于adword广告系列,但只要他们点击网站上的任何链接,他们似乎就会在GA中获得新会话,然后原始会话计为退回.所有网页都在同一个网域上,我们已经确认这些广告系列用户实际上没有弹跳,他们仍然在网站上,但在某种程度上被GA错误标记.
IE
重要说明:此问题仅适用于广告系列访问者!没有广告系列标记的用户在点击链接时不会获得新会话.
以前有没有人遇到这样的问题？在单页应用上通过GTM使用adwords时是否有任何特殊事项需要考虑？什么可能导致谷歌分析失去这样的会议？
有问题的网站是https://fyndiq.se,在移动设备中(它使用动态服务,问题不在桌面版本上,而不是SPA).
编辑 - 问题摘要和当前不完善的解决方案
我们已经设法达到了可接受的水平,但它远非完美.由于解决方案全部在评论中展开,我想我会在这里总结一下结果.
问题确实是Google Analytics为Adwords用户创建了新会话,从而失去了对广告系列的跟踪.Analytics将在几种不同条件下为用户启动新会话.最常见的情况是当用户处于非活动状态30分钟,用户从新广告系列进入网站时,以及用户从已知搜索引擎进入网站时.
最后两个是这里的问题.Google根据广告系列代码(gclid或utm_)和引荐来源的组合判断这些条件,并且在单个页面上应用引荐来源不会更新!
IE
为了防止这种情况,我们最终做了两件事.首先,我们手动向Google跟踪代码管理器发送引荐来源(如果没有发送,则默认为document.referrer,如上所述,不会更新).在第一个页面加载中,我们使用真正的引荐来源,以便正确地归属命中.在任何后续页面加载中,我们将自己的域名作为引荐来源发送,就像它在非SPA上一样.这告诉分析我们正在内部路由并且它不应该启动新会话.
引用者可以像发送虚拟网页浏览网址一样发送给GTM,并且(在写作的那一刻)设置在与url和pagetitle相同的位置.我们确保在发送到分析的所有事件上完成此操作,而不仅仅是网页浏览.
第二件事来自下面的Jareds答案,我们确保设置页面而不仅仅是位置(见下文为什么这些不同).可以在GTM的高级设置中设置页面.只需要这两件事中的一件,但我们两件事都只是为了安全.
这似乎给了我们大部分正确的数据.与adwords的数据相比,我们仍然缺少大约15%的cpc交易,但我们很难知道我们到底有多接近.Adwords和analytics不会测量相同的东西,因此可以预期差异,差异的大小会因页面而异.然而,对我们来说,它足以用于测试和营销,因此它现在必须要做.
如果有人发现更一致的解决方案,请写一个新的答案!
google-analytics google-adwords backbone.js single-page-application google-tag-manager
以前我是使用react-ga npm模块在下一个js应用中插入Google Analytics（分析）。就像这样：
import ReactGA from 'react-ga'
export const initGA = () => {
ReactGA.initialize('UA-*******-*', {
titleCase: false
})
}
export const logPageView = () => {
if (window.location.href.split('?')[1]) {
ReactGA.set({page: window.location.pathname + '?' + window.location.href.split('?')[1]})
ReactGA.pageview(window.location.pathname + '?' + window.location.href.split('?')[1])
} else {
ReactGA.set({page: window.location.pathname})
ReactGA.pageview(window.location.pathname)
}
}
然后我在标头（插入到应用程序的每个页面）中调用logPageView函数，如下所示：
componentDidMount () {
if (!window.GA_INITIALIZED) {
initGA()
window.GA_INITIALIZED = true
}
logPageView()
}
componentWillReceiveProps () {
if (!window.GA_INITIALIZED) {
initGA()
window.GA_INITIALIZED = true
}
logPageView()
}
现在，我想使用Google跟踪代码管理器来处理Google Analytics（分析）页面视图。我该怎么办？