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