是否可以通过 gatsby 和 google Analytics 跟踪自定义事件?
我用过ReactGA https://github.com/react-ga/react-ga与盖茨比合作并取得了巨大的成功。
对于基本的事件跟踪 - 例如记录单击的链接 - 它非常易于使用。您在组件中创建一个日志记录功能来访问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 文档。
另外:不要忘记包括ggatsby-plugin-google-analytics
在你的gatsby-config.js
文件作为使上述内容正常工作的依赖项:
{
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,
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)