Gatsbyjs + Google 分析 - 跟蹤自定義事件？

Question

是否可以使用 gatsby 和 google 分析跟蹤自定義事件？

Answer 1

我已經將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,
  }
}

Answer 2

對於仍然想知道的人來說， gatsby-plugin-google-analytics不是我用於 google 分析的方法。 您正在尋找的是gatsby-plugin-google-gtag 。 此插件會自動發送綜合瀏覽量，並使gtag事件在窗口中可用。

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

Google 還為仍在使用gatsby-plugin-google-analytics任何人提供遷移文檔，您可以在此處找到（鏈接也在 gatsby 文檔中）。

Answer 3

您可以使用提供的 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>
)