Как получить информацию об URL-параметрах Google Analytics при использовании перенаправления реакции-маршрутизатора для переключения страниц

Question

Я использую редирект, чтобы перейти на последнюю страницу моего сайта. В этом редиректе я передаю ему несколько параметров URL, которые сообщают мне, что пользователь сделал до этого момента.

Проблема в том, что когда я добавил Google Analytics, он не обнаружил ни одного параметра, по которому я хотел бы иметь возможность собирать данные. Вот код в index.js:

import Analytics from 'react-router-ga';
import ReactGA from 'react-ga';

ReactGA.initialize('UA-11111111111-1');
ReactGA.pageview(window.location.pathname + window.location.search);

const allGiftsPage = () => { return ( <Results quizType="allgifts" title="All Gifts" /> )}
const popularGiftsPage = () => { return ( <Results quizType="populargifts" title="Popular Gifts" /> )}
const quizResultsPage = () => { return ( <Results title="Results" /> )}

ReactDOM.render(
  <Fragment>
    <title>Find Their Gifts</title>
    <BrowserRouter>
      <Analytics id='UA-111111111-1'>
        <Route exact path="/" component={App}></Route>
        <Route path="/results" component={quizResultsPage}></Route>
        <Route path="/allgifts" component={allGiftsPage}></Route>
        <Route path="/populargifts" component={popularGiftsPage}></Route>
      </Analytics>
    </BrowserRouter>
  </Fragment>
  , document.getElementById('root')
);

А вот код, который вызывает перенаправление:

<Redirect to={`/results?`+
  `quizType=romanticquiz` +
  `&age=${this.state.age}`+
  `&gender=${this.state.gender}`+
  `&color=${this.state.color}`+
  `&vacation=${this.state.vacation}`+
  `&word=${this.state.word}`+
  `&prison=${this.state.prison}`
}

В Google Analytics пользователь, который переходит на эту страницу со всеми этими параметрами, просто отображает "/ results", но если вы обновите страницу результатов, вы получите полный URL со всеми параметрами.

Есть ли хороший способ для меня, чтобы эта функциональность работала без переделки большой части моего кода?

Спасибо!

Answer 1

Во-первых, не уверен, почему вы используете react-ga так же как react-router-ga,

По сути, пакет response-ga довольно гибкий, а пакет response-router-ga на самом деле является простым компонентом.

Давайте посмотрим, почему не передаются никакие параметры: https://github.com/fknussel/react-router-ga/blob/master/index.js#L53

Строка 53: window.ga('set', 'page', location.pathname);

Если вы просто хотите, чтобы это работало, то изменение этого параметра для включения других частей URL будет работать. Смотрите ссылку на местоположение объекта.

Другое решение - использовать решение Reaction-ga для использования с роутером:

https://github.com/react-ga/react-ga/blob/master/demo/app/withTracker.jsx