Question

4

How to use Google Analytics with React?

rated 0 times [ 10] [ 6] / answers: 1 / hits: 18897 / 6 Years ago, tue, october 9, 2018, 12:00:00

In my react app I have some pages:

Main

Service

Contact

Profile (private)

etc..

I need to track users activity with Google Analytics. I googled react-ga and it's just fine. But with this library I have to initialize my GA on every route I use. For example:

Route / - main page:

class Main extends Component {



    componentDidMount() {

        initGA();

    }



    render() {

        return (

            <div>

                <Component1 />

                <Component2 />

            </div>

        )

    }

}

My initGA() looks like:

import ReactGA from 'react-ga';



export const initGA = () => {

    ReactGA.initialize('UA-00000000-1');

    ReactGA.pageview(window.location.pathname + window.location.search);

    console.log(window.location.pathname + window.location.search);

}

My App class looks like:

class App extends Component {

    render() {

        return (

            <BrowserRouter>

                <div className=App>



                    <Switch>

                        <Route exact path=/ component={Main} />

                        <Route exact path=/signup component={SignupLayout} />

                        <Route component={PublicLayout} />

                    </Switch>



                </div>

            </BrowserRouter>

        );

    }

}

In my way of using react-ga I'm adding initGA() function on every component which renders on route response. I think it is not right to duplicate initGA() in every component. Please, guys, how do you use react-ga? What is right way to use react-ga?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlyn

Add To Favorites

Follow

Total Points: 421

Total Questions: 73

Total Answers: 100

Location: South Georgia

Member since Sat, Jul 25, 2020

4 Years ago

answered 6 Years ago jelani · Accepted Answer

To make it work need to use Router functionality.
So in App component import { Router } from 'react-router-dom'. It has to be Router not BrowserRouter.

Then import createHistory from 'history/createBrowserHistory'

const history = createHistory()

ReactGA.initialize('UA-000000-1');

history.listen((location, action) => {

    ReactGA.pageview(location.pathname + location.search);

    console.log(location.pathname)

});

This code will fire on every route change!

Than give a history attribute to your Router component.

Complete code:

import React, { Component } from 'react';

import { Router, Route, Switch } from 'react-router-dom';

import createHistory from 'history/createBrowserHistory'

import Main from './components/pages/Main';

import ReactGA from 'react-ga';





const history = createHistory()

ReactGA.initialize('UA-00000000-1');

history.listen((location, action) => {

    ReactGA.pageview(location.pathname + location.search);

    console.log(location.pathname)

});



class App extends Component {



    render() {

        return (



            <Router history={history}>

                <div className=App>



                    <Switch>

                        <Route exact path=/ component={Main} />

                        <Route exact path=/signup component={SignupLayout} />

                        <Route component={PublicLayout} />

                    </Switch>



                </div>

            </Router>

        );

    }

}



export default App;