1

I am using ReactGA to setup some user and activity tracking in our React app. The top of our App.js currently looks something like this:

imports...
function App() {

    // Initialize Google Analytics
    useEffect(() => { // Initialize Once
        ReactGA.initialize(config.gaTrackingId);
    }, []);

    // Track Pageview on Page Change
    useEffect(() => { // Set pageview on each different pathname
        ReactGA.pageview(window.location.pathname + window.location.search);
    }, [window.location.pathname]);

    // Setup User Login
    const [isUserLoading, setIsUserLoading] = useState(true);
    const [userData, setUserData] = useState({ token: undefined, user: undefined });
    // console.log('userData: ', userData);

    // Check User Is Logged In
    // run this once to verify if user is logged in
    useEffect(() => {
        const checkLoggedIn = async () => {
            ...
            // If Valid Token, Set User Info
            if (userIsLoggedIn === true) {
                ...
                // Set userId for Google Analytics
                ReactGA.set({ userId: userResponse.data.id });
                ...
            }
        };

        checkLoggedIn();
    }, []);

    // return routes
}

The last useEffect in the code above is used to check if a user is logged into the website, via token saved in localStorage. If it finds a user is logged in, it runs ReactGA.set({ userId: userResponse.data.id });, which sets the userId.

Question is then - how / where in my Google Analytics dashboard can I see a breakdown of page views based on the userId? Seeing this breakdown by userId is huge as it will give me a sense for how many users are actually active on our website. It's important for us to know if our 1000 total pageviews are from only 2 users, or from 50 users.

enter image description here

Ignore for now that we have no users, but I'm pretty lost from the dashboard perspective as to where it provides a breakdown by user, if at all.

Edit 1

Also, it appears as though the pageviews are not being counted correctly. A pageview is only being counted if I refresh the app. Currently if I navigate from page to page, without refreshing, these pages are not counted towards pageviews, however I think they should count as separate pageviews. Perhaps there's an issue with my second useEffect in the code above?

halfer
  • 19,824
  • 17
  • 99
  • 186
Canovice
  • 9,012
  • 22
  • 93
  • 211
  • I havent integrated react with GA, but just glancing over this, the page view event will only fire once when app() is rendered. You might need to have page views logged in a different place for each of the pages in your app (unless that App component is always rendered? Without your entire code, its hard to tell). In addition, if you want the user id associated with the page view event, you should set that before logging the page view event. `ReactGA.set({ userId: userResponse.data.id });` `ReactGA.pageview(...)` Otherwise the page view will fire before setting the userId – Tore Oct 20 '20 at 04:09
  • Thanks Tore. I think something like [this](https://stackoverflow.com/questions/34836500/how-to-set-up-google-analytics-for-react-router) can help with sending page views for each change in the route. – Canovice Oct 20 '20 at 04:38

1 Answers1

2

First, you can't use userId as a dimension in Google Analytics reports. GA use it internally to adjust users metric and account for cross-device usage. Second, make sure you're running set command before pageview otherwise the corresponding data are not set to GA. Third, you can utilize GA standard engagement report to check pageviews depth distribution event without implementing user ID tracking, see example here https://nimb.ws/nMVySK. Also, you might use segments with pageviews > XX condition to investigate heavy users behaviour. Fourth, make sure you're calling ReactGA.pageview each time the visitor is navigated to a new route and watch for a proper referrer parameter value as advised here https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Дмитро Булах
  • 3,697
  • 1
  • 14
  • 23