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.

Thundershower

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>);
};

Bowl

Came across this while trying to fix broken firebase analytics, neat. Is there a reason why you didn't return null insetad of empty div? – Redoubtable

setCurrentScreen has been deprecated. See response below instead – Infer

Browser Doesn't cancel all the calls after location change? – Affirmation

Answer 2

Calling setCurrentScreen doesn't log any events on its own yet. Instead, according to the docs, it adds a firebase_screen parameter to subsequent events.

In my SPA/PWA however, I track screen views by logging a separate screen_view event:

const handleHashChange = async () => {
    const hash = document.location.hash;

    firebase.analytics().logEvent('screen_view', { screen_name: hash.substring(1) });
}

handleHashChange();
window.addEventListener("hashchange", handleHashChange);

Hodeida

I see. So in Firebase, there are just "events" and little more? For some reasons, my events don't show up in the dashboard. – Thundershower

How do you track time spent on a screen? @Thundershower – Hautbois