React (simple)

Seeka can be installed on React sites via the NPM package.

This is the simplest way to install Seeka on React sites.

Install

Install the browser SDK NPM package.
Install Seeka's React NPM package with one of the below commands.

# NPM
npm install --save @seeka-labs/converge-react@latest

# Yarn classic (v1)
yarn add @seeka-labs/converge-react@latest

Configure

In your App.jsx or Index.jsx file, wrap your app with the SeekaProvider, ensuring to replace (public key), (organisation ID) and (instance ID) in the example with values from the Seeka app. If you are a software vendor, replace yoursoftwarename with your software name.

src/App.jsx

import * as React from 'react';
...
+import { SeekaProvider, SeekaProviderConfigContext } from '@seeka-labs/converge-react';
...

+const seekaOrgId = '(organisation ID)';
+const seekaPublicKey = '(public key)';
+const seekaInstanceId = '(instance ID)';
+const seekaContext: SeekaProviderConfigContext = {
+  tracking: {
+    defaults: {
+      currencyCode: 'NZD', // not required
+      countryCode: 'NZ', // not required
+    }
+  },
+  client: {
+    ver: '1.0.0', // or build number of your frontend / git sha etc
+    type: 'yoursoftwarename' // all lowercase, no spaces, alphanumeric
+  }
+}

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
 +    <SeekaProvider org={seekaOrgId} publicKey={seekaPublicKey} id={seekaInstanceId} context={seekaContext}>
+      <App />
+    </SeekaProvider>
  </React.StrictMode>
);

You can now start tracking events and identities from your React app by following the below guides.

Tracking events

For a full reference of supported events and parameters, see the tracking SDK documentation.

The below example shows how to setup page view tracking on component mount and when the location changes, and how to track a lead event when a button is clicked.

import { useSeekaConverge } from '@seeka-labs/converge-react';
import { useLocation } from "react-router-dom";

export const MyComponent = () => {
    const converge = useSeekaConverge();
    const location = useLocation();

    const onLead = () => {
        converge.track.lead({
            sourceContentName: 'Lead magnet form',
        })
    }

    useEffect(() => {
        // Track page view on component mount and when location changes
        converge.track.viewPage()
    }, [location])

    return (
        <Button variant='outlined' onClick={() => onLead()}>Fire lead event</Button>
    )
}

Tracking identities

For a full reference of supported methods, see the identity SDK documentation.

For a full reference of supported identity traits, see the identity SDK documentation.

import {
    useSeekaAnonId, useSeekaConverge
} from '@seeka-labs/converge-react';

export const MyComponent = () => {
    const anonId = useSeekaAnonId();
    const converge = useSeekaConverge();

    const onSetProfile = async () => {
        await converge.identity.mergeProfile({
            email: ['email-test@example.com'],
            firstName: ['John'],
            lastName: ['Smith'],
            phone: ['+61422333444'],
            address: [
                {
                    countryCode: 'AU'
                }
            ]
        })
    }

    return (
        <Button variant='outlined' onClick={() => onSetProfile()}>Set profile</Button>
    )
}

Debugging / diagnosis

To identify if your integration is running correctly, see the diagnosing section for more information on how to enable debugging and diagnosis mode.