Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.unifygtm.com/llms.txt

Use this file to discover all available pages before exploring further.

Github

npm

​
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:
index.tsx
import {
  UnifyIntentClient,
  UnifyIntentClientConfig,
  UnifyIntentProvider,
} from '@unifygtm/intent-react';

const writeKey = 'YOUR_PUBLIC_WRITE_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. Any components rendered in your app can access and use the intent client using the useUnifyIntent hook:
Example.tsx
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, {
        firstName: currentUser.firstName,
        lastName: currentUser.lastName,
        company: {
          name: currentUser.companyName,
          domain: currentUser.companyDomain
        },
      });
    }
  }, [currentUser, unify]);

  ...
};

export default Example;
For details on how to use the client to send events, see the full Usage guide.