How to track page view with Firebase Analytics in a web, single page app?

Question

I am trying to track simple events and pages/views through Firebase analytics.

I have a progressive web app, (SPA). It's a fullscreen game and it is not using browser history.

I am a bit confused by Google's docs to be honest, sometimes they only explain how it works in ios/Android and not in web. Also, Firebase analytics are different than the "normal Google analytics".

Firebase analytics API hasn't much:

analytics().logEvent()
analytics().setAnalyticsCollectionEnabled()
analytics().setCurrentScreen()
analytics().setUserId()
analytics().setUserProperties()

While the "Google Analytics docs" do have a section about SPA's I haven't found how to do the same with Firebase analytics, such as manually sending page views that would be like:

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

I have tried to use setCurrentScreen but it does nothing. Help appreciated.

Answer 1

I also wasn't able to find one place with all this information, so here is how I got it to work.

Import

If you are using npm, Make sure to import the analytics:

import * as firebase from "firebase/app";
import "firebase/analytics";
const analytics = firebase.analytics;

Analytics automatically come with the latest Firebase SDK.

Configure

Make sure that "Google Analytics" is enabled in Firebase Project Settings (Integrations tab). Also, make sure that Firebase Config has measurmentId: "ID_HERE" specified in the code - this value can also be found in Firebase Project Settings (General tab).

Use

analytics().setCurrentScreen(window.location.pathname) // sets `screen_name` parameter
analytics().logEvent('screen_view') // log event with `screen_name` parameter attached

Other Info

The "page_view" event seems to be logged automatically by default. I don't know why, but you can use the count of that event to track how many people reload/visit the app.

Relevant Links:

• Firebase Screen View Docs
• Firebase Analytics Library Docs
• Google Guidance for Single Page Apps
• Firebase Analytics NPM Reference

---

Logging Using React Router

React is quite common, so I'll also list my solution for logging using it. Place the <AnalyticsComponent /> between <BrowserRouter> declaration.

const logCurrentPage = () => {
  analytics().setCurrentScreen(window.location.pathname)
  analytics().logEvent('screen_view')
};

const AnalyticsComponent = () => {
  const history = useHistory();
  useEffect(() => {
    logCurrentPage(); // log the first page visit
    history.listen(() => {
      logCurrentPage();
    });
  }, [history]);
  return (<div></div>);
};