Installation
You can install the Unify Intent React library with your preferred package manager:
npm install @unifygtm/intent-react
Usage
First, wrap your React app in a UnifyIntentProvider
:
import {
UnifyIntentClient,
UnifyIntentClientConfig,
UnifyIntentProvider,
} from '@unifygtm/intent-react';
const writeKey = 'YOUR_PUBLIC_API_KEY';
const config: UnifyIntentClientConfig = {
autoPage: true,
autoIdentify: false,
};
const intentClient = new UnifyIntentClient(writeKey, config);
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
root.render(
<UnifyIntentProvider intentClient={intentClient}>
<App />
</UnifyIntentProvider>
);
The UnifyIntentProvider
automatically takes care of mounting and unmounting the client
for you whenever the component mounts and unmounts. So any components rendered in your app
can freely access and use the intent client using the useUnifyIntent
hook:
import { useUnifyIntent } from '@unifygtm/intent-react';
const Example = () => {
// Get the Unify Intent Client
const unify = useUnifyIntent();
// However you access the current user...
const currentUser = useCurrentUser();
useEffect(() => {
if (currentUser?.emailAddress) {
// Log an identify event for the current user
unify.identify(currentUser.emailAddress);
}
}, [currentUser, unify]);
...
};
export default Example;
You can then use the resulting client instance to log intent data. See the
Usage page for more details on how to use the client.