0

I am using redirect to go to the final page on my website. Within this redirect I feed it a bunch of url params that tell me what the user has done up to that point.

The problem is that when I added Google Analytics it did not pick up on any of the params that I would like to be able to gather data on. Here is the code in 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')
);

And here is the code that calls the redirect:

<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}`
}

In Google Analytics a user that goes to this page with all of these params will just display '/results', but if you refresh on the results page you will get the full url with all of the params.

Is there a good way for me to get this functionality working without reworking a large portion of my code?

Thanks!

IanBarbour
  • 91
  • 1
  • 11

1 Answers1

0

First, not sure why you're using react-ga as well as react-router-ga.

Essentially the react-ga package is pretty flexible, the react-router-ga package is really just a simple component.

Let's look at why no-parameters are being passed through: https://github.com/fknussel/react-router-ga/blob/master/index.js#L53

Line 53: window.ga('set', 'page', location.pathname);

If you just want this to work, then changing that to include other parts of the URL will work. See reference on the location object.

Another solution would be to use the react-ga solution for using it with router:

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

XTOTHEL
  • 5,098
  • 1
  • 9
  • 17