React TS 中的 Google Analytics 4 集成

Question

因此目前可以在 Universal Analytics 和 Google Analytics 4 之间进行选择。

\n

我关于为什么使用 Google Analytics 4 的论点：

\n

\n
• Universal Analytics 将于 2023 年 7 月 1 日停用，因此当我进行新设置时，我认为使用 Google Analytics 4 是有意义的。
\n
• React -ga包不适用于 GA-4，而且看起来也不会。目前react-ga处于被动维护状态，除非其他人提出 PR，否则不会更新以支持 GA-4。
\n
• 但是React Google Analytics 4短react-ga4模块可以与 GA-4 配合使用
\n

\n

因此，我在 GA 上创建了一个属性，并按照本指南进行操作\n我安装了该模块，并只是在我的主 index.tsx 文件中使用 进行了初始化。\nID 未存储在 env 文件中，因为根据此答案，ReactGA.initialize它是公共的。\nA本地主机上的测试表明 GA 获取了数据。

\n

不需要更多代码。GA4 足够智能，可以自动测量所有这些交互。\n您不必\xe2\x80\x99 费心在项目中编写它们。\n除了标准页面浏览量测量之外，GA4 还可以自动测量网站上的交互和内容：\n页面浏览量、滚动量、出站点击量、站点搜索、视频参与度和文件下载。\n请参阅：\n增强的测量事件

\n

任何其他基于用例的事件，我们都必须自己编码。\n\n\xe2\x80\x99s 与 Universal Analytics 基本没有变化。

\n

所以我的第一个问题是：我收集到的信息是否正确？ 你会以另一种方式整合它吗？ 或者我错过了什么？

\n

一般来说，我想知道使用该库的好处是什么？

\n

--> 或者，我可以进行集成：\n将全局站点标签直接添加到您的网页中

\n

更好的方法是什么？

\n

现在是第二部分，在第一个代码片段中，您可以看到我的react-ga4初始化index.tsx

\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport App from \'./App\';\nimport ReactGA from \'react-ga4\';\n\nReactGA.initialize(\'G-XXXXXXXX\');\n\nReactDOM.render(\n    <React.StrictMode>\n        <App />\n    </React.StrictMode>,\n    document.getElementById(\'root\')\n); \n

\n

在本地主机上进行的测试显示，数据已在 GA 仪表板中获取。完美的！

\n

但随之而来的问题是 Adblocker 崩溃。如果有人有广告拦截器（广告拦截器会阻止分析请求端点，没有错误处理等），它通常会导致应用程序崩溃，为了缓解这种情况，我们会检测脚本是否未加载，从而得出用户是否有一个广告拦截器阻止 GA 脚本加载。在我的示例代码中，我只是忽略它并加载应用程序......在其他情况下，我想您可以调用一个模式来告诉他们禁用它（当然，这会带来额外的代码）。摘自 spencer741回复

\n

索引.tsx

\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport App from \'./App\';\nimport ReactGA from \'react-ga4\';\n\n(async _ => {\n  \n    await ReactGA.initialize(\'G-XXXXXXXXX\')\n    .then(res => console.log("Analytics Success."))\n    .catch(err => console.log("Analytics Failure."))\n    .finally(() => {\n      ReactDOM.render(\n        <React.StrictMode>\n            <App />\n        </React.StrictMode>,\n        document.getElementById(\'root\')\n      );\n    });\n    })();\n

\n

我知道这会在 Typescript 中引发错误：

\n

Property \'then\' does not exist on type \'void\'.\n\nProperty \'catch\' does not exist on type \'void\'.\n\nProperty \'finally\' does not exist on type \'void\'.\n

\n

\'res\' is declared but its value is never read.\nParameter \'res\' implicitly has an \'any\' type. \n

\n

\'err\' is declared but its value is never read.\nParameter \'err\' implicitly has an \'any\' type.\n

\n

但在尝试解决错误之前，我想知道\n这是否是规避广告拦截器潜在错误的可行解决方案？

\n

Answer 1

由于没有其他答案，我将尽力回答OP的问题。

1.我收集到的信息是否正确？ 是和不是。尽管这两个库都按照他们所说的去做，但我对“GA4 足够智能，可以自动测量所有这些交互”持保留态度，因为它们都需要一些配置来跟踪自定义事件或多个事件trackingId并微调您的分析。请参阅react-ga4 存储库和react-ga 演示。

2. 您会以其他方式整合它吗？或者我错过了什么？ 如果您所说的“另一种方式”不是问题的示例，那么是的。正如评论中所述，更好的方法是使用高阶组件或自定义挂钩来包装所有 GA 逻辑（示例如下）。

3. 一般来说，我想知道使用该库的好处是什么？ 我认为这取决于您的项目的需求。如果您正在开发一个临时项目或最低价值产品 (MVP)，一年后可能不会投入生产，那么您的情况可能会更好，react-ga因为它已经过实际测试，目前 NPM 上每周的下载量为 60 万次。如果没有，更新您的代码库react-ga4可能有助于最大限度地减少未来的技术债务并利用 Google Analytics 4 更新。

4. 更好的方法是什么？ 从GA4 答案来看，目前有 8 个事件您可以进一步自定义。让我们看看如何使用以下方法实现自定义钩子react-ga4：

ga4.ts

import ga4 from 'react-ga4'

const TRACKING_ID = 'G-XXXXXXXXX-X'
const isProduction = process.env.NODE_ENV === 'production'

export const init = () => ga4.initialize(TRACKING_ID, { 
  testMode: !isProduction 
})

export const sendEvent = (name: string) => ga4.event('screen_view', {
  app_name: "myApp",
  screen_name: name,
})

export const sendPageview = (path: string) => ga4.send({ 
  hitType: 'pageview', 
  page: path 
})

useAnalytics.ts

import React from 'react'
import { useLocation } from 'react-router-dom'

import * as analytics from './ga4'

export function useAnalytics() {
  const location = useLocation()

  React.useEffect(() => {
    analytics.init()
  }, [])

  React.useEffect(() => {
    const path = location.pathname + location.search
    analytics.sendPageview(path)
  }, [location])
}

export default useAnalytics

或者，如果您不使用，react-router-dom则可以从全局对象获取路径window，如下所示：

import ga4 from 'react-ga4'

const TRACKING_ID = 'G-XXXXXXXXX-X'
const isProduction = process.env.NODE_ENV === 'production'

export const init = () => ga4.initialize(TRACKING_ID, { 
  testMode: !isProduction 
})

export const sendEvent = (name: string) => ga4.event('screen_view', {
  app_name: "myApp",
  screen_name: name,
})

export const sendPageview = (path: string) => ga4.send({ 
  hitType: 'pageview', 
  page: path 
})

或者使用 Next.js：

import React from 'react'
import { useLocation } from 'react-router-dom'

import * as analytics from './ga4'

export function useAnalytics() {
  const location = useLocation()

  React.useEffect(() => {
    analytics.init()
  }, [])

  React.useEffect(() => {
    const path = location.pathname + location.search
    analytics.sendPageview(path)
  }, [location])
}

export default useAnalytics

用法

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch } from 'react-router-dom'

import { useAnalytics } from './useAnalytics'

function App() {
  useAnalytics() // add it here
  return <Switch>...</Switch>
}

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
)

5. 这是规避 adblocker 潜在错误的可行解决方案吗？ FreeCodeCamp.org 上有一个教程，展示了如何使用代理来避免广告拦截器。您还可以使用FuckAdBlock、BlockAdBlock或等库adblock-detect-react来检查页面上是否启用了广告拦截并react-ga4有条件地初始化。提醒一下：收集分析数据通常需要 24/48 小时。新的 GA 帐户可能需要几天时间才能开始记录数据。

import React from 'react'
import { useDetectAdBlock } from 'adblock-detect-react'

const useAnalytics = () => {
  const adBlockDetected = useDetectAdBlock()

  React.useEffect(() => {
    if(!adBlockDetected) analytics.init()
  }, [])

  React.useEffect(() => {
    if (!adBlockDetected) { 
      analytics.sendPageview(window.location.pathname)
    }
  } [adBlockDetected, path])
}

希望有帮助！干杯。