Anonymous Tracking

Objectiv supports collecting privacy-friendly anonymized behavioral data, without setting any cookies. See the anonymous tracking documentation for more background.

Enabling anonymous mode​

Anonymous tracking can be configured client-side when creating a new Tracker instance, by setting the anonymous option (false by default), and also at runtime by invoking the setAnonymous method.

Configuring initial anonymous mode​

This can be achieved by specifying the anonymous option during the Tracker's construction:

import { ReactTracker } from '@objectiv/tracker-react';

const tracker = new ReactTracker({
  applicationId: 'app-id',
  endpoint: 'https://collector.app.dev',
  anonymous: true
})

Switching anonymous mode​

Most likely, you’ll want to implement a cookie banner to ask users permission to set a cookie, in order to persist their identifier across sessions and track some useful information like IP address & user-agent. See below for an example of a Vite + React application with a cookie banner and anonymous tracking.

Below are two code examples for React to switch anonymous mode on or off, e.g. based on the user’s response to a cookie banner. This will reconfigure Plugins, Transport and Queue of the Tracker and restore the full tracking capabilities of the SDK.

Via the useTracker() hook:

const tracker = useTracker();

tracker.setAnonymous(!cookieConsent);

Or via render-props from a Tracked Element, Location Wrapper or Tracked HOC:

<ContentContextWrapper id={'sub-content'}>
  {(trackingContext) => (
    <button onClick={() => trackingContext.tracker.setAnonymous(!cookieConsent)}>
      { cookieConsent ? 'Disable' : 'Enable' } Anonymous Mode
    </button>
  )}
</ContentContextWrapper>
info

In anonymous mode, the automatically generated session identifier is regenerated when the session ends, or the user navigates away or refreshes/reloads the application. You could persist this identifier in some way and use it in multiple sessions, while still tracking PII anonymously. Data is stored first-party, in your own data store. The client-side session identifier is readable and writeable via objectiv.clientSessionId. Just make sure to restore the identifier before creating the Tracker instance.

The following example is a Vite + React application composed of three files: main, CookieBanner and App. We use react-cookie-consent to manage the consent cookie and display a banner to the user.

main.tsx​

Responsible for setting up the Tracker instance and wrapping the Application in ObjectivProvider.

The Tracker anonymous mode is set by retrieving the existing cookie consent value.

main.tsx
import { ObjectivProvider, ReactTracker } from "@objectiv/tracker-react";
import React from 'react'
import { getCookieConsentValue } from "react-cookie-consent";
import ReactDOM from 'react-dom/client'
import App from './App'

const tracker = new ReactTracker({
  applicationId: 'objectiv-anonymous-mode-example',
  endpoint: 'https://collector.app.dev',
  anonymous: getCookieConsentValue() !== 'true'
})

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ObjectivProvider tracker={tracker}>
      <App />
    </ObjectivProvider>
  </React.StrictMode>
)

CookieBanner.tsx​

A wrapper around the CookieConsent component of react-cookie-consent.

Configures how the banner looks like and sets the onAccept and onDecline handlers to switch anonymous mode on or off.

CookieBanner.tsx
import { useTracker } from "@objectiv/tracker-react";
import { CookieConsent } from "react-cookie-consent";

function CookieBanner() {
  const tracker = useTracker();

  return (
    <CookieConsent
      location="bottom"
      buttonText="Yes, please!"
      declineButtonText="Do not track me."
      cookieName="CookieConsent"
      enableDeclineButton={true}
      onAccept={() => { tracker.setAnonymous(false) }}
      onDecline={() => { tracker.setAnonymous(true) }}
    >
      This website uses cookies to enhance the user experience.
    </CookieConsent>
  )
}

export default CookieBanner

App.tsx​

The App component renders the CookieBanner and offers a way to reset the consent.

App.tsx
import CookieBanner from "./CookieBanner";
import { getCookieConsentValue, resetCookieConsentValue } from "react-cookie-consent";

function App() {
  return (
    <div>
      <CookieBanner />

      {getCookieConsentValue() !== undefined && (
        <button onClick={() => { resetCookieConsentValue(); }}>
          Reset consent
        </button>
      )}
    </div>
  )
}

export default App
note

This is just a simplistic example. In an actual application it would probably make sense to:

  • use some state to keep track of anonymous and cookie consent, so the user doesn't have to refresh;
  • on cookie consent reset, also clean up all other tracking cookies that may have been created.

Nonetheless, hopefully this gives an overview of how to programmatically manipulate the Tracker's anonymous mode.