问题

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.

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

回答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);

来源：https://stackoverflow.com/questions/59330467/how-to-track-page-view-with-firebase-analytics-in-a-web-single-page-app

标签

javascript