Gatsbyjs + Google Analytics - 如何跟踪自定义事件？

Question

Gatsbyjs + Google Analytics - 如何跟踪自定义事件？

javascriptreactjsgoogle-analyticsevent-handlinggatsby

7

如何在 Gatsby 和 Google Analytics 中跟踪自定义事件？

- AAverin

你能详细说明一下你想要实现什么吗？ - XTOTHEL

一个简单的例子是 - 我有一个条目列表，每个条目都附有一些“算法”。当用户选择一个条目时，我想跟踪该算法，以了解哪个是最常用的。 - AAverin

3个回答

7

对于那些仍然困惑的人，gatsby-plugin-google-analytics 不是我进行Google Analytics 的首选。你需要找的是 gatsby-plugin-google-gtag 。这个插件可以自动发送页面浏览量，并将 gtag 事件作为 window 的一部分可用。

window.gtag("event", "click", { ...data })

Google还为仍在使用gatsby-plugin-google-analytics的用户提供了迁移文档，您可以在此处找到（链接也在gatsby文档中）。

- Joey

这个看起来更好，每次需要添加分析时我都要花费15分钟来确保 gatsby-plugin-google-analytics 不是我要找的。它甚至没有说明分析仅在生产环境下工作，而 gtag 则用大号的“注意”字样清晰地定义了这一点。到目前为止很喜欢它。 - taras

0

您可以使用提供的OutboundLink进行简单的链接跟踪：

import React from "react"
import { OutboundLink } from "gatsby-plugin-google-gtag"

export default () => (
  <div>
    <OutboundLink href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-gtag/">
      Visit the Google Global Site Tag plugin page!
    </OutboundLink>
  </div>
)

- Andre Thiele

在分析仪表板中哪里可以查找此OutboundLink？我的意思是，我可以在仪表板中看到页面浏览量，但点击事件或链接点击未在其中定义，我应该在哪里检查它们？ - Sanchit Bhatnagar

遇到了同样的问题。也许默认的GA4只允许实时或最近30分钟内查看出站事件。可能需要手动执行gtag push并进行自定义事件。 - Adam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- serraosays · Accepted Answer

我曾在Gatsby中使用ReactGA并取得了不错的成果。

对于基本的事件追踪，比如记录点击链接，使用起来非常简单。你只需要在组件中创建一个日志函数，访问ReactGA.event，然后在渲染函数中使用onClick调用它。

以下是一个记录PDF下载的示例组件：

import React from 'react'
import Link from 'gatsby-link'
import ReactGA from 'react-ga'

import logo from './logo.png'
import financials from './Annual_Report_Financials_2017_FINAL.pdf'

class LoggingDownload extends React.Component {
  logger() {
    // Detect each click of the financial PDF
    ReactGA.event({
      category: 'Financial Download',
      action: 'User clicked link to view financials'
    })
  }

  render() {
    return (
      <div>
        <nav className="nav-container">
          <Link to="/locations">
            <img className="logo" src={logo} alt="Logo" />
          </Link>
          <ul className="nav-item-container">
            <li className="nav-item">
              <a href="/shortsignup/" target="_blank">Join Us</a>
            </li>
            <li className="nav-item">
              <a href={financials} onClick={this.logger} target="_blank" id="financials-pdf">Financials</a>
            </li>
          </ul>
        </nav>
      </div>
    )
  }
}
export default LoggingDownload

还有很多用例-请查看ReactGA文档。

另外：不要忘记在您的gatsby-config.js文件中包含gatsby-plugin-google-analytics作为依赖项，以使上述内容正常工作：

{
  resolve: `gatsby-plugin-google-analytics`,
  options: {
    trackingId: "UA-#########-##",
    // Puts tracking script in the head instead of the body
    head: false,
    // Setting this parameter is optional
    respectDNT: true,
  }
}