React (advanced)

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

This method is for advanced users who want to configure Seeka with additional options.

Install

  1. Install the browser SDK NPM package.
  2. Install Seeka's server side browser plugin to enable server side tracking.
  3. 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

  1. Add a new file at src/analytics/index.(js|ts) to your project with the below snippet, replacing (public key), (organisation ID), (scope ID) and (scope description) with values from the Seeka app.
src/analytics/index.js
 
import { ConvergeSdkConfiguration } from "@seeka-labs/converge"
import { FacebookPixelConvergeSdkPlugin } from "@seeka-labs/converge-plugin-facebook-pixel"
import { GoogleAnalytics4ConvergeSdkPlugin } from "@seeka-labs/converge-plugin-google-analytics-4"
import { SeekaConvergeSdkPlugin } from "@seeka-labs/converge-plugin-seeka"

export const getSeekaConfig = () => {
    const config = new ConvergeSdkConfiguration('(public key)',
        '(organisation ID)', {
        defaults: { currencyCode: "AUD" },
    }, 
        undefined, undefined, undefined, undefined,
        '(scope ID)',
        '(scope description)'
    );

    config.plugins = [
        new FacebookPixelConvergeSdkPlugin({ pixelId: "(pixel ID)" }),
        new SeekaConvergeSdkPlugin(),
        new GoogleAnalytics4ConvergeSdkPlugin({ measurementId: "(measurement ID)" }),
    ];

    return config;
}

  1. Install any plugins that may be applicable to your stack.

  2. In your App.jsx or Index.jsx file, wrap your app with the SeekaProvider.

src/App.jsx
 
import * as React from 'react';
...
+import { SeekaProvider } from '@seeka-labs/converge-react';
+import { getSeekaConfig } from './analytics';
...

+const seekaConfig = getSeekaConfig();
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
 +    <SeekaProvider config={seekaConfig}>
+      <App />
+    </SeekaProvider>
  </React.StrictMode>
);
  1. 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>
    )
}

Configuring regional consent (optional)

In your src/analytics/index.(js|ts) file, append the below highlighted lines to the getSeekaConfig() function to configure regional consent to support Google's consent mode v2. Below is example configuration for Australia, United States and California - your configuration may vary based on your requirements.

If you are using an existing consent management platform you should not configure regional consent via Seeka as your CMP will handle this.

src/analytics/index.js
 
+import { RegionalConsentGrantOption } from "@seeka-labs/converge"

export const getSeekaConfig = () => {
    const config = new ConvergeSdkConfiguration('(public key)',
        '(organisation ID)', {
        defaults: { currencyCode: "AUD" },
        analytics: {
            autoCollection: {
                keywordSearchQueryParamName: 'q',
                activityNames: [TrackingActivityNames.KeywordSearch]
            }
        },
+        processing: {
+          consent: {
+            disableConsentManagement: false,
+            regionalConsent: [
+              {
+                configuration: {
+                  adStorage: RegionalConsentGrantOption.Granted,
+                  adUserData: RegionalConsentGrantOption.Granted,
+                  adPersonalisation: RegionalConsentGrantOption.Granted,
+                  functionalityStorage: RegionalConsentGrantOption.Granted,
+                  personalisationStorage: RegionalConsentGrantOption.Granted,
+                  securityStorage: RegionalConsentGrantOption.Granted,
+                  analyticsStorage: RegionalConsentGrantOption.Granted,
+                },
+              },
+              {
+                countryCode: 'AU',
+                configuration: {
+                  adStorage: RegionalConsentGrantOption.Granted,
+                  adUserData: RegionalConsentGrantOption.Granted,
+                  adPersonalisation: RegionalConsentGrantOption.Granted,
+                  functionalityStorage: RegionalConsentGrantOption.Granted,
+                  personalisationStorage: RegionalConsentGrantOption.Granted,
+                  securityStorage: RegionalConsentGrantOption.Granted,
+                  analyticsStorage: RegionalConsentGrantOption.Granted,
+                },
+              },
+              {
+                countryCode: 'US',
+                configuration: {
+                  adStorage: RegionalConsentGrantOption.Granted,
+                  adUserData: RegionalConsentGrantOption.Granted,
+                  adPersonalisation: RegionalConsentGrantOption.Granted,
+                  functionalityStorage: RegionalConsentGrantOption.Granted,
+                  personalisationStorage: RegionalConsentGrantOption.Granted,
+                  securityStorage: RegionalConsentGrantOption.Granted,
+                  analyticsStorage: RegionalConsentGrantOption.Granted,
+                },
+              },
+              {
+                countryCode: 'US-CA',
+                configuration: {
+                  adStorage: RegionalConsentGrantOption.Denied,
+                  adUserData: RegionalConsentGrantOption.Denied,
+                  adPersonalisation: RegionalConsentGrantOption.Denied,
+                  functionalityStorage: RegionalConsentGrantOption.Denied,
+                  personalisationStorage: RegionalConsentGrantOption.Denied,
+                  securityStorage: RegionalConsentGrantOption.Denied,
+                  analyticsStorage: RegionalConsentGrantOption.Denied,
+                },
+              },
+            ],
+          },
+        },
    },
        undefined, undefined, undefined, undefined,
        '(scope ID)',
        '(scope description)'
    );

    config.plugins = [
        new FacebookPixelConvergeSdkPlugin({ pixelId: "(pixel ID)" }),
        new SeekaConvergeSdkPlugin(),
        new GoogleAnalytics4ConvergeSdkPlugin({ measurementId: "(measurement ID)" }),
    ];

    return config;
}

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.