60
задан 2 March 2017 в 17:42

3 ответа

Мне нравится, как Mark Thomas MГјller предлагает здесь :

В Вашем index.js

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

ReactDOM.render(<App />, document.getElementById('root'))

, Где Ваши маршруты:

import React, { Component } from 'react'
import { Router, Route } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import ReactGA from 'react-ga'

const history = createHistory()
history.listen(location => {
    ReactGA.set({ page: location.pathname })
    ReactGA.pageview(location.pathname)
})

export default class AppRoutes extends Component {
    componentDidMount() {
        ReactGA.pageview(window.location.pathname)
    }

    render() {
        return (
            <Router history={history}>
                <div>
                    <Route path="/your" component={Your} />
                    <Route path="/pages" component={Pages} />
                    <Route path="/here" component={Here} />
                </div>
            </Router>
        )
    }
}

Короткий, масштабируемый и простой:)

5
ответ дан 1 November 2019 в 09:45

вот самый простой способ отследить все пути с некоторой работой arounds:

npm i --save history react-ga

создают файл history.js

import { createBrowserHistory } from "history"
import ReactGA from "react-ga"

ReactGA.initialize(process.env.REACT_APP_GA)

const history = createBrowserHistory()
history.listen((location) => {
    ReactGA.pageview(location.pathname)
})

// workaround for initial visit
if (window.performance && (performance.navigation.type === performance.navigation.TYPE_NAVIGATE)) {
    ReactGA.pageview("/")
}

export default history

и затем импортируют его туда, где установлен Ваш Router

import history from "./history"

...

class Route extends Component {
render() {
    return (
        <Router history={history}>
            <Switch>
              <Route path="/" exact component={HomePage} />
              ...
            </Switch>
        </Router>
    )
}

export default Route

Ссылки:

Gustavo Gonzalez | medium.com

История | GitHub

1
ответ дан 1 November 2019 в 09:45

Я предлагаю пользоваться библиотекой аналитики Сегмента и следовать эти , Реагируют руководство по быстрому началу работы для отслеживания вызовов страницы с помощью реагировать-маршрутизатор библиотека. Можно позволить <Route /> компонент обрабатывать когда рендеринг страницы и использование componentDidMount для вызова page вызовы. Пример ниже показывает один способ, которым Вы могли сделать это:

    const App = () => (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    );

    export default App;
    export default class Home extends Component {
      componentDidMount() {
        window.analytics.page('Home');
      }

      render() {
        return (
          <h1>
            Home page.
          </h1>
        );
      }
    }

I’m специалист по обслуживанию https://github.com/segmentio/analytics-react. С Сегментом, you’ll быть в состоянии включить и выключить различные места назначения зеркальным отражением переключателя, если Вы интересуетесь попыткой нескольких инструментов аналитики (мы поддерживаем более чем 250 + места назначения), не имея необходимость писать любой дополнительный код. рџ™‚

0
ответ дан 1 November 2019 в 09:45

Другие вопросы по тегам:

Похожие вопросы: