Gatsbyjs + Google Analytics - отслеживание пользовательских событий? - PullRequest
Новая
       10

Gatsbyjs + Google Analytics - отслеживание пользовательских событий?

0 голосов
/ 30 октября 2018

Можно ли каким-то образом отслеживать пользовательские события с помощью gatsby и google analytics?

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Для тех, кому все еще интересно, gatsby-plugin-google-analytics - это , а не подход, который я выбрал бы для Google Analytics. То, что вы ищете, это gatsby-plugin-google-gtag . Этот плагин автоматически отправляет просмотры страниц, а также делает событие gtag доступным в окне. 

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

Google также предоставляет нам документы по миграции для тех, кто все еще использует gatsby-plugin-google-analytics, вы можете найти здесь (ссылка также в документации по gatsby).

0 голосов
/ 30 октября 2018

Я использовал 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.

Также: не забудьте включить 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,
  }
}
...