logo标签列表

React TS 中集成 Google Analytics 4。

javascriptreactjstypescriptgoogle-analytics
7

目前可以选择使用通用分析（Universal Analytics）和 Google Analytics 4。

为什么要使用 Google Analytics 4 的原因：

  • 通用分析将于2023年7月1日停止服务，因此当我进行新的设置时，我认为选择 Google Analytics 4 已经是有意义的。
  • react-ga 包不适用于 GA-4，而且看起来它也永远不会支持。 react-ga 正在进行被动维护，除非其他人发起请求，否则不会更新以支持 GA-4。
  • 但是有一个 React Google Analytics 4，简称为react-ga4 模块，可以与 GA-4 一起使用。

因此，我在 GA 上创建了一个属性，并按照这个 指南 进行了设置。 我安装了模块，并在我的主 index.tsx 文件中只需用 ReactGA.initialize 进行初始化。 ID 不存储在 env 文件中，因为根据这个 答案，它是公开的。 在 localhost 上测试显示 GA 可以捕获数据。

不需要其他代码了。 GA4 足够智能，可以自动测量所有交互。 您不必在项目中编写这些交互。 GA4 自动测量站点上的交互和内容，除标准页面视图测量外： 页面浏览量, 滚动量, 离站点击, 站内搜索, 视频互动 和 文件下载。 请参见： 增强测量事件

任何基于其他用例的事件，我们都必须自己编码。 这与通用分析基本相同。

因此，我的第一个问题是：我收集的信息是否正确？您会以其他方式集成它吗？或者我漏掉了什么？

总的来说，我想知道使用这个库的好处是什么？

--> 或者我可以为集成执行以下操作： 直接将全局站点标记添加到您的网页

哪种方法更好？

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ReactGA from 'react-ga4';

ReactGA.initialize('G-XXXXXXXX');

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

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

但是有一个与 Adblocker 崩溃有关的问题。如果某人使用广告拦截器（广告拦截器阻止分析请求端点，没有错误处理等），它通常会导致应用程序崩溃，为了减轻这个问题，我们检测是否脚本未加载，因此可以推断用户是否有使用阻止 GA 脚本加载的广告拦截器。在我的示例代码中，我只是忽略它并加载应用程序...在其他情况下，我想你可以调用一个模态框来告诉他们禁用它（当然，那将带来额外的代码）。取自 spencer741 的回答

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ReactGA from 'react-ga4';

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

我知道这在Typescript中会抛出错误：

Property 'then' does not exist on type 'void'.

Property 'catch' does not exist on type 'void'.

Property 'finally' does not exist on type 'void'.


'res' is declared but its value is never read.
Parameter 'res' implicitly has an 'any' type. 


'err' is declared but its value is never read.
Parameter 'err' implicitly has an 'any' type.

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

1
我无法确定这是否是一个可行的解决方案来规避adblocker潜在的错误，但我可以告诉你，“void”错误是由于Promise没有返回任何内容所致。您可能希望避免对console.log进行隐式返回。关于res和err抛出的问题，您可以只需键入res: any和err: any。所以，当前的TS错误已经解决了。我会尝试使用useEffect在app.tsx中有条件地包装ReactGA初始化，并在那里进行trycatch，而不是在index.tsx中进行。 - Moa
1
一般来说，我想知道使用该库的好处是什么？我相信你的论点已经足够合理，可以证明使用该库的好处。我想补充一点，它已经是一个“React”库，所以需要的管道较少。我能想到的最好的方法是创建一个自定义钩子，就像这篇文章中所示，将所有的GA逻辑包装起来。 - Moa
2个回答
14

由于没有其他答案，我会尽我所能回答OP的问题。

1. 我收集的信息是否正确？ 是和否。虽然这两个库都能做它们所说的事情，但我会对"GA4足够智能，可以自动测量所有这些交互"持保留态度，因为它们都需要一些配置来跟踪自定义事件或多个trackingId并调整您的分析。请参见react-ga4repository和react-gademo。

2. 你会以另一种方式集成它吗？还是我漏掉了什么？ 如果你所说的"另一种方式"指的是问题的示例之外的其他方法，那么是的。如评论中所述，更好的方法是用高阶组件或自定义钩子包装所有您的GA逻辑（以下是示例）。

3. 总的来说，我想知道使用该库的好处是什么？ 我认为这取决于您项目的需求。如果您正在开展一个临时项目或最小化可行产品（MVP），可能在未来一年内不会投入生产，那么您最好选择react-ga，因为它经过了实战测试，并且目前每周在NPM上有600k次下载。否则，更新您的代码库到react-ga4可能有助于将来最小化技术债务并利用Google Analytics 4的更新。

4. 哪种方法更好？ 从GA4 answers中可以看出，目前有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对象获取路径，如下所示：

analytics.sendPageview(window.location.pathname)

或者使用Next.js：
const router = useRouter()
analytics.sendPageview(router.asPath)

使用方法

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. 这是规避广告拦截器潜在错误的可行解决方案吗？ 有一个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])
}

希望有所帮助！干杯。
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接