Categories
bootstrapping

How to set up and debug virtual pageview for a react web app

Mordern Web App

If you’re a web developer, you might be familiar with React, Angular etc, but other people don’t know the technology behind it has changed a lot.

PerfectCuisine is complicated, we built it with several react app.

I realized our tracking problem when our marketer tried to set up a conversion measurement, we need setup a pageview as a goal, but this pageview is just a view of a react app which can’t be tracked by GA directly.

It’s hard to debug Google analytics and Google tag manager

if you’re using react router, then it’s easy, you just need put the code below to your router file, it will work.

browserHistory.listen(location => {
    const { pathname } = location;
    if (typeof window.ga === "function") {
        window.ga('gtm1.set', 'page', pathname);
        window.ga('gtm1.send', 'pageview');
    }
});

But things are not always going well, if you’re following the official doc, you might use the code below:

window.ga(set, 'page', pathname);
window.ga(send, 'pageview');

It doesn’t work and it doesn’t report any errors, you have to install a plugin google analytics debugger in your chrome to debug it.

Leave a Reply

Your email address will not be published. Required fields are marked *