tqf/docs/analytics/actions.mdx

React Query hooks for Firebase.

---
title: Actions | Analytics
description: Hooks for integrating with Firebase Analytics.
---

# 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:

```js
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`](https://react-query.tanstack.com/reference/useMutation)
hook:

```jsx
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.

```jsx
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.

```jsx
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>;
}
```