In this release we enable adding Objectiv tracking to your existing React Components library, making it possible to instrument all your Components just once, and reuse them anywhere in your application with full analytics tracking support.

Any JSX element or custom Element/Component can now be tracked, while automatically capturing all relevant context, plus information about where an event exactly happened in the UI. You also also get the same autocompletion, typing, and validation tools as for Objectiv Components.

In your React app you probably use a library of custom Components, such as a View-like Component for defining and rendering a screen, or a Button-like Component for rendering primary or secondary buttons in various places.

You can now add Objectiv tracking to all those Components in your library, without interfering in any way with their workings. Such tracked Components can be used anywhere in your application, and the SDK will automatically track all required information. It’s also ‘UI aware’, meaning it captures its UI location via LocationContexts.

Ultimately, this enables you to add tracking to any custom Component in your library just once, and it will work anywhere it’s used.

While instrumenting your Components, you get access to all of Objectiv’s tracking tooling, including autocompletion, typing, and validation tools.

Specifically supported:

• Tracking any JSX element or custom Element/Component.
• Full autocompletion (intellisense) for both the original’s props and Objectiv's attributes.
• Typing and ref support.
• Auto-detecting native props (like id, title, href, value, etc.) to use in Objectiv Contexts, with the option to manually override them with custom ones.
• No collisions between Objectiv & original props.
• Validation for both the original props and Objectiv's configuration attributes.

An example

Here is an example of how to wrap around a hypothetical NavBar component with a TrackedContentContext, while preserving its own props and a ref. All Objectiv specific properties are now part of a new single prop called objectiv.

import { NavBar, NavBarProps } from '../components';
import React, { ComponentProps } from 'react';
import { TrackedNavigationContext } from '@objectiv/tracker-react';
export type TrackedNavBarProps = NavBarProps & {
  objectiv?: Omit<TrackedContextObjectivProp, 'Component'>;
};
export const TrackedNavBar = React.forwardRef<HTMLDivElement, TrackedNavBarProps>(
  ({ objectiv, ...nativeProps }, ref) => (
    <TrackedNavigationContext<ComponentProps<'nav'>>
      {...nativeProps}
      ref={ref}
      objectiv={{
        ...objectiv,
        Component: NavBar,
        id: objectiv?.id ?? 'navbar'
      }}
    />
  )
);

This TrackedNavBar can now be used like this anywhere in your application:

<TrackedNavBar>
  <MenuItem>Menu 1</MenuItem>
  <MenuItem>Menu 2</MenuItem>
  <MenuItem>Menu 3</MenuItem>
</TrackedNavBar>
<TrackedNavBar objectiv={{ id: 'top-nav' }}>
  <MenuItem>Menu 1</MenuItem>
  <MenuItem>Menu 2</MenuItem>
  <MenuItem>Menu 3</MenuItem>
</TrackedNavBar>
<TrackedNavBar id={'top-nav'}>
  <MenuItem>Menu 1</MenuItem>
  <MenuItem>Menu 2</MenuItem>
  <MenuItem>Menu 3</MenuItem>
</TrackedNavBar>

In the above example the Objectiv developer tools for autocompletion, typing, and validation work just as well as with Objectiv Components.

How to get it

New versions of the tracker are available on NPM. To upgrade or install, follow instructions for your platform.

Note that for existing users this may have some impactful changes on amongst others their end-to-end test snapshots; please see the release notes for details.

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