在 React SSR 项目中设置 Google 分析的问题

Question

a 看到了一个非常相似的问题，但甚至没有一个答案，所以如果有人能以某种方式提供帮助，那就太好了。

我有一个在 React js 上使用 SSR 的项目，但没有使用 Next.js。当我尝试按照文档所说设置 Google 分析并将初始化代码粘贴到 Layout.cshtml 时，如下所示：

<script async src="https://www.googletagmanager.com/gtag/js?id=G-D93F680HTN"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-xxxxxxxxxxx');
    </script>

有效，但只显示页面浏览量等常见事件

然后我尝试添加 react-ga 库，并将初始化代码粘贴到 Layout.tsx，如下所示：

 import ReactGA from 'react-ga';
    
    const history = useHistory();
        
        React.useEffect( () => {
            ReactGA.initialize('G-xxxxxxxxxxx');
        }, []);
    
        React.useEffect(() => {
            ReactGA.pageview(history.location.pathname + history.location.search);
            console.log('GAGAGA');
            console.log(history.location.pathname, 'PATH');
        }, [history.location.pathname, history.location.search]);

并向主页组件中的按钮添加自定义事件：

const GAevent = (cat, act) => {
        ReactGA.event({
            category: cat,
            action: act,
            label: 'Homepage Thing',
            value: 1
        });
    };

<button onClick={() => GAevent('Promotion', 'Displayed Promotional Widget')}>
    TEST
</button>

之后当我更改 url 或单击按钮时，在 devtools -> network a 中可以看到请求发送：

https://www.google-analytics.com/collect?v=1&_v=j90&a=373007786&t=event&_s=9&dl=http%3A%2F%2Flocalhost%2F&ul=ru-ru&de=UTF-8&dt=urlpart1%urlpart2%20%7C%20urlpart3%20of%20urlpart4&sd=24-bit&sr=1920x1080&vp=1903x969&je=0&ec=Promotion&ea=Displayed%20Promotional%20Widget&el=Homepage%20Thing&ev=1&_u=CACAAEABAAAAAC~&jid=&gjid=&cid=1105544602.1617783853&tid=G-Dxxxxxxxx&_gid=1622278569.1618564467&z=1200894868

但我没有看到 google 分析事件本身有任何变化。

如果有人能以某种方式提供帮助，我做错了什么？

我还安装了 Google Tag Assistant 扩展，它可以看到我的事件 pege_view 或我的自定义事件，但在 Google 分析中仍然没有发生任何事情

Answer 1

您正在使用 GA4 属性，但您正在尝试发送 Universal Analytics 命中。

为简化起见，我建议您创建一个 Universal Analytics 属性（其 ID 类似于 UA-XXXXXXX-XX 而不是 G-XXXXXXXX）并使用它。

您可以通过单击“显示高级选项”来创建它（当您创建新的属性时）：

在 React SSR 项目中设置 Google 分析的问题

Troubles with setting Google analytics in React SSR project

javascript

google-analytics

server-side-rendering

google-analytics-4

react-ga