Google analytics with react is not working

Question

I am using google analytics in my react project and it doesn't show any active users even when I am online. I have tried different approaches that I found online but none seem to work. I have only tried it on localhost and not on a deployed website but I think it should still work.

Here is my code.

My app.js

import React, { Suspense, useEffect } from "react";
import "./App.css";
import IntroPage from "./containers/IntroPage/IntroPage";
import Layout from "./containers/Layout/Layout";
import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import Spinner from "./Components/UI/Spinner/Spinner";
import ReactGA from "react-ga";

const Contact = React.lazy(() => import("./Components/Contact/Contact"));

const trackingId = "UA-171033255-1";
ReactGA.initialize(trackingId);


function App() {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search);
  }, []);

  return (
    <div className="App">
      <Layout>
        <Switch>
          <Route
            path="/contact"
            render={() => (
              <Suspense
                fallback={
                  <div className="Fallback">
                    <Spinner />
                  </div>
                }
              >
                <Contact />
              </Suspense>
            )}
          />
          <Route path="/" component={IntroPage} />
          <Redirect to="/" />
        </Switch>
      </Layout>
    </div>
  );
}

export default withRouter(App);

What am I doing wrong here?

Mansur · Accepted Answer · 2022-08-18 04:16:08Z

12

Updating from react-ga to react-ga4 worked for me.

Change the import to react-ga4 and instead of ReactGA.pageview(...) use ReactGA.send("pageview").

answered Aug 18, 2022 at 4:16

Mansur

4124 silver badges11 bronze badges

Add a comment |

Jenia Enakin · Accepted Answer · 2021-05-18 18:47:28Z

2

Since you are using empty dependencies array in useEffect your code gets executed only once, when <App/> rendered. So you are not sending pageviews on route change.

You need to put pageview-related code before your App component, right after ReactGA initialization. It's a usage example from docs.

answered May 18, 2021 at 18:47

Jenia Enakin

434 bronze badges

Add a comment |

BigMugOfCoffee · Accepted Answer · 2020-09-02 11:03:58Z

1

Have you tried adding the tracking code inside <head> in index.html (Admin -> Property -> Tracking code)?

answered Sep 2, 2020 at 11:03

BigMugOfCoffee

433 bronze badges

I don't think that is needed in react.
– excurbia
Commented Sep 3, 2020 at 10:51
Not sure what you mean here -- it seems like the easiest way to associate a GA property with your application. It might be required, too--the react entrypoint is in the <body>, and you need to get the tracking snippet into the <head>...
– BigMugOfCoffee
Commented Sep 8, 2020 at 10:13

Add a comment |

Hazem Ben Abdelhafidh · Accepted Answer · 2022-05-17 09:42:19Z

1

I had a similar issue try disabling your ad block if you have it active and put the ReactGA.initialize inside the useEffect

answered May 17, 2022 at 9:42

Hazem Ben Abdelhafidh

4662 gold badges9 silver badges22 bronze badges

Add a comment |

Muqtadir Billah · Accepted Answer · 2022-09-10 18:32:18Z

0

import ReactGA from "react-ga4";

ReactGA.initialize("your measurement id"); ReactGA.send("pageview");

answered Sep 10, 2022 at 18:32

Muqtadir Billah

394 bronze badges

1

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
– Community Bot
Commented Sep 14, 2022 at 21:28

Add a comment |

Collectives™ on Stack Overflow

Google analytics with react is not working

5 Answers 5

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Linked

Related