This release includes two updates to the Tracking SDK for React that enable you to:

1. Track all form inputs: Use Tracked elements for checked-based inputs such as radio, checkbox, and multiselect, next to text input elements in forms.
2. Predefine & later customize Contexts for Hooks: Set up a Hook with a predefined Location Stack and/or set of Global Contexts, and then customize the tracking once you use it later on, e.g. to capture additional Contexts.

Track all form inputs

Next to supporting text input elements in forms, the React Tracking SDK now also supports all other form fields, by adding Tracked elements for checked-based inputs such as radio, checkbox, and multiselect.

For all input fields: specify which event to bind to

There’s a new eventHandler property, which allows you to specify which event to bind the input field to: 'onBlur' | 'onChange' | 'onClick'.

<TrackedInput type={'date'} id={'birthday'} eventHandler={'onChange'} />
// or as a Tracked Context wrapper
<TrackedInputContext Component={'input'} type={'date'} id={'birthday'} eventHandler={'onChange'} />

New: TrackedInputRadio

A new Tracked element TrackedInputRadio for radio input elements:

• As its value never changes, a stateless property is introduced, which is hardcoded to ‘true’, to not keep track of previous values.
• Its eventHandler defaults to onClick, instead of onBlur, and doesn't accept onChange. onBlur is still a valid case, as it can be used to track the previously selected value.
• Its radio name is tracked as a ContentContext in the Location Stack of the InputChangeEvent.

 // track a radio input, with onBlur instead of onClick, and enabling value tracking
<TrackedInputRadio id={'radio-id-4'} value={'4'} trackValue={true} eventHandler={'onBlur'} />
// or for something sensitive
<TrackedInputRadio id={'radio-id-4'} name={'options'} value={'something sensitive'} trackValue={false} eventHandler={'onBlur'} />

New: TrackedInputCheckbox

A new Tracked element TrackedInputCheckbox, for checkbox input elements. Supports the defaultChecked property, which returns a boolean that specifies if it’s checked by default.

<TrackedInputCheckbox id={'check'} value={'abc'} defaultChecked />

New: TrackedSelect with single and multiple selection

A new Tracked element TrackedSelect, for select and select multiple. Supports Array in its values.

<TrackedSelect id={'user'} trackValue={true}>
  <option value={1}>User A</option>
  <option value={2}>User B</option>
  <option value={3}>User C</option>
</TrackedSelect>

<TrackedSelect id={'options'} multiple values={['a', 'c']} trackValue={true}>
  <option value={'a'}>Option A</option>
  <option value={'b'}>Option B</option>
  <option value={'c'}>Option C</option>
</TrackedSelect>

Support for defaultValue

Finally, TrackedInputs now support the defaultValue property, to return the default value of a field:

<TrackedInput type={'number'} id={'quantity'} min={1} max={5} defaultValue={1} />

Predefine & customize contexts for Hooks

You can now use Hooks with a predefined location stack or set of global contexts in your custom components, and customize what it tracks when you use the Hook anywhere in your product.

An example

Let’s say you have a form somewhere in your application, and on submit you track a SuccessEvent. You can now create a useSuccessEventTracker Hook that is preconfigured with a certain Location Stack and Global Contexts. Later, when the user submits additional input values, you can actually call this predefined hook, and add more Contexts that capture those input fields:

// Create SuccessEvent callback, preconfigured with a Location Stack
const trackSuccessEvent = useSuccessEventTracker({
  locationStack: [
    makeContentContext({id: 'virtual-content-location-1'}),
    makeContentContext({id: 'virtual-content-location-2'})
  ],
  globalContexts: [
    makeInputValueContext({id: 'test-input-value-1', value: 'a'}),
    makeInputValueContext({id: 'test-input-value-2', value: 'b'})
  ]
});
...
// Later, from anywhere, we can trigger the callback and provide more Contexts if needed
trackSuccessEvent({
  message: 'ok',
  locationStack: [
    makeContentContext({id: 'virtual-content-location-3'}),
    makeContentContext({id: 'virtual-content-location-4'})
  ],
  globalContexts: [
    makeInputValueContext({id: 'test-input-value-3', value: 'c'}),
    makeInputValueContext({id: 'test-input-value-4', value: 'd'})
  ]
});

This will result in a merged set of Global Contexts and Location Stack (below is simplified a bit):

{
  "_type": "SuccessEvent",  
  "global_contexts": [
    { "_type": "InputValueContext", "id": "test-input-value-1", "value": "a"},
    { "_type": "InputValueContext", "id": "test-input-value-2", "value": "b"},
    { "_type": "InputValueContext", "id": "test-input-value-3", "value": "c"},
    { "_type": "InputValueContext", "id": "test-input-value-4", "value": "d"},
    { "_type": "ApplicationContext" },
    { "_type": "PathContext" },
    { "_type": "HttpContext" },
  ],
  "location_stack": [
    { "_type": "RootLocationContext", "id": "root" },
    { "_type": "ContentContext", "id": "virtual-content-location-1" },
    { "_type": "ContentContext", "id": "virtual-content-location-2" },
    { "_type": "ContentContext", "id": "virtual-content-location-3" },
    { "_type": "ContentContext", "id": "virtual-content-location-4" },
  ],
}

This means you can now easily build in default tracking options for Hooks, and customize what is tracked when you use it later on.

note

This is a first step in enabling you to easily add tracking to your full custom component library. Stay tuned for a next release, which will enable component injection.

How to get it

To capture the new Contexts and use the new Hooks, a new version of the React Tracker SDK is available on NPM. To upgrade or install, follow the instructions.

Summarizing

This release includes two updates to the Tracking SDK for React that enable you to track all input fields in forms (including radio, checkbox, and multiselect), and to set up Hooks with a predefined Location Stack and/or set of Global Contexts, and then customize those Contexts later when you call it. To get the latest changes, upgrade your React SDK.

info

Office Hours

If you have any questions about this release or anything else, or if you just want to say 'Hi!' to team Objectiv, we have Office Hours every Thursday at 4pm CET, 10am EST that you can freely dial in to. If you're in a timezone that doesn’t fit well, just ping us on Slack and we'll send over an invite for a better moment.

Join the Office Hours