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