Actions

The library exposes some useful functionality for handling various Analytics actions.

Checking for support#

If you need to check for whether analytics is supported on the current platform, you can use the useAnalyticsIsSupported hook, which simply wraps the async call isSupported from the Firebase SDK:

useAnalyticsIsSupported("analytics-supported", {
  onSuccess(isSupported) {
    console.log("Is analytics supported? ", isSupported);
  },
});

Toggling analytics collection#

To toggle whether Analytics will automatically collection information, you can use the useAnalyticsSetCollectionEnabled hook, which extends the useMutation hook:

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

function Settings() {
  const mutation = useAnalyticsSetCollectionEnabled(analytics);

  return (
    <button
      disabled={mutation.isLoading}
      onClick={() => {
        mutation.mutate(false);
      }}
    >
      Disable Analytics Collection
    </button>
  );
}

Setting the current screen#

To manually set the current screen on analytics, use the useAnalyticsSetCurrentScreen hook.

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

function SearchPage() {
  const mutation = useAnalyticsSetCurrentScreen(analytics);

  useEffect(() => {
    mutation.mutate({
      screenName: "search",
    });
  }, []);

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

Setting user properties#

The library exposes a useAnalyticsSetUserId hook and useAnalyticsSetUserProperties hook to manually set user properties.

import {
  useAnalyticsSetUserId,
  useAnalyticsSetUserProperties,
} from "@react-query-firebase/analytics";
import { analytics } from "./firebase";

function Login() {
  const userIdMutation = useAnalyticsSetUserId(analytics);
  const userPropertiesMutation = useAnalyticsSetUserProperties(analytics);

  function login() {
    fetch("https://api.com/login").then((user) => {
      // Trigger the `useAnalyticsSetUserId` mutation
      userIdMutation.mutate({ id: user.uid });

      // Trigger the `useAnalyticsSetUserProperties` mutation
      useAnalyticsSetUserProperties.mutate({
        properties: user.profile,
      });
    });
  }

  return <button onClick={login}>Login</button>;
}