Logging Events

A core feature of analytics is the ability to log both predefine and custom events throughout the flow of your application. The library exposes two hooks for this; useAnalyticsLogEvent & useAnalyticsCustomLogEvent.

Predefined Events#

The Firebase Analytics SDK allows us to trigger many different types of events with specific parameters. The useAnalyticsLogEvent enables us to trigger these events by extending the useMutation hook.

The hooks accept the event parameters and optional options, for example, to trigger the screen_view event:

import { useAnalyticsLogEvent } from "@react-query-firebase/analytics";
import { analytics } from "./firebase";

function SearchPage() {
  const mutation = useAnalyticsLogEvent(analytics, "screen_view");

  useEffect(() => {
    mutation.mutate({
      params: {
        firebase_screen: "Search",
        firebase_screen_class: "SearchPage",
      },
      // Optional
      options: {
        global: false,
      },
    });
  }, []);

  return <div>Search!</div>;
}

If you're unsure of what events are supported and their parameters, please visit the Firebase Documentation.

If you're using TypeScript, the event names and parameters are fully typed.

Custom Events#

To log a custom event with Analytics, use the useAnalyticsCustomLogEvent hook instead:

import { useAnalyticsLogEvent } from "@react-query-firebase/analytics";
import { analytics } from "./firebase";

function LikeButton({ id }) {
  const mutation = useAnalyticsCustomLogEvent(analytics, "liked_post");

  return (
    <button
      onClick={() => {
        mutation.mutate({
          params: {
            post_id: id,
          },
        });
      }}
    >
      Search!
    </button>
  );
}

React Query options#

Since both hooks extend the useMutation hook, we can optionally provide hooks to signal when an event has been triggered.

const mutation = useAnalyticsLogEvent(analytics, "screen_view", {
  onSuccess() {
    console.log("Screen view event logged!");
  },
});