是否有可能使用 gatsby 和 google 分析来跟踪自定义事件？
【问题讨论】：
标签： javascript reactjs google-analytics event-handling gatsby
我已将 ReactGA 与 Gatsby 结合使用并取得了不错的成功。
对于基本的事件跟踪 - 例如记录点击的链接 - 它非常易于使用。您在访问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 文件中包含 ggatsby-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,
}
}
【讨论】：
gatsby-plugin-google-analytics 会自动将 GA 插入网站正文的末尾，因此可以轻松跟踪基本网页浏览量。如果您需要事件跟踪、出站链接，我使用了react-ga。如果您想要一个非常干净的依赖链，我认为您可以在没有 gatsby-plugin-google-analytics 的情况下设置浏览量跟踪。
对于仍然想知道的任何人，gatsby-plugin-google-analytics 是不是我会为谷歌分析采取的方法。您正在寻找的是gatsby-plugin-google-gtag。该插件自动发送浏览量，并在窗口中提供gtag 事件。
window.gtag("event", "click", { ...data })
Google 还为仍在使用 gatsby-plugin-google-analytics 的任何人提供了迁移文档，您可以找到 here（链接也在 gatsby 文档中）。
【讨论】：
gatsby-plugin-google-analytics 不是我想要的。它甚至没有说明分析只在生产中起作用，而gtag 用大的NOTE 措辞明确定义了这一点。到目前为止喜欢它
您可以使用提供的 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>
)
【讨论】：