React-snap: Not working correctly with react-ga

Created on 25 Oct 2018 · 2Comments · Source: stereobooster/react-snap

I am trying to use the react-snap and react-ga packages in my project, but no analytics are being gathered after I "snap" my pages. React-ga works great if I don't use react-snap, but as soon as I build the project using react-snap no data is being sent at all.

I see direct references to react-ga in the readme and recipe files, so it seems like these two should work together. Is there some obvious piece that I'm missing? Other than this issue, everything else appears to work really well with react-snap.

The analytics I'm trying to gather are minimal. I'm gathering my analytics in the componentsWillMount() method and in various onClick methods on my site. I've tried setting the "skipThirdPartyRequests" flag in my packages.json file, but that didn't fix the issue.

Is there something I'm missing to make react-snap play nicely with react-ga?

question

Source

joshjreed

Most helpful comment

I'm able to use react-snap with react-ga. Try wrapping react-ga with a function that returns a stub when reach-snap is running.

const host = window.location.hostname;
const isLocalHost = host === 'localhost';
const isSnap = navigator.userAgent === 'ReactSnap';

const gaOn = !isLocalHost && !isSnap;

if (gaOn) {
    ReactGA.initialize(process.env.REACT_APP_GA_SITE_CODE);
}

export function ga() {
    if (gaOn) {
        return ReactGA;
    } else { // Return stub
        return {
            set: () => { },
            event: () => { },
            pageview: () => { }
        }
    }
}

tsantef on 12 Nov 2018

👍3

All 2 comments

I'm able to use react-snap with react-ga. Try wrapping react-ga with a function that returns a stub when reach-snap is running.

const host = window.location.hostname;
const isLocalHost = host === 'localhost';
const isSnap = navigator.userAgent === 'ReactSnap';

const gaOn = !isLocalHost && !isSnap;

if (gaOn) {
    ReactGA.initialize(process.env.REACT_APP_GA_SITE_CODE);
}

export function ga() {
    if (gaOn) {
        return ReactGA;
    } else { // Return stub
        return {
            set: () => { },
            event: () => { },
            pageview: () => { }
        }
    }
}

tsantef on 12 Nov 2018

👍3

I guess, question is answered. If not feel free to reopen.