CODEWITHSUNDEEP
reactjsgoogle-analytics
Canovice
Canovice

Reputation: 10441

In React, use Google Analytics to track top users by their pageviews

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?

Upvotes: 1

Views: 2317

Answers (1)

Дмитро Булах
Дмитро Булах

Reputation: 3847

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

Upvotes: 2

Related Questions