CODEWITHSUNDEEP
javascriptreactjsgoogle-analytics
excurbia
excurbia

Reputation: 381

Google analytics with react is not working

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?

Upvotes: 19

Views: 10095

Answers (5)

Muqtadir Billah
Muqtadir Billah

Reputation: 39

import ReactGA from "react-ga4";

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

Upvotes: 0

Mansur
Mansur

Reputation: 412

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").

Upvotes: 12

Hazem Ben Abdelhafidh
Hazem Ben Abdelhafidh

Reputation: 466

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

Upvotes: 1

Jenia Enakin
Jenia Enakin

Reputation: 43

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.

Upvotes: 2

BigMugOfCoffee
BigMugOfCoffee

Reputation: 43

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

Upvotes: 1

Related Questions