Tracking Locations

Collisions

If you started instrumenting your Interactions, chances are you already ran into some Collisions.

Example of a collision of a hypothetical footer components in the browser's console:

Collision: duplicated footer

Unique Locations

To make modeling easier it's important to ensure all Tracked interactive Components are uniquely identifiable. Assigning a unique identifier to each of them is not always possible and most often impractical. Think of reusable components.

This is where our LocationStack comes in handy with Tracked Location Components.

Tracked Location Components

Our taxonomy comes with a number of LocationContexts aimed at describing the UI unambiguously.

Here is how we mapped React Native Components to our LocationContexts:

ContentContext

OverlayContext

Visibility Events

While ContentContexts are purely used for enriching the Locations of their children components, OverlayContexts can also automatically track Visible and Hidden Events.

Example of collision

Let's see how these Components can help us in making all Interactions uniquely identifiable in the UI.

Here is an example Screen with a collision:

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

<View>
<View>
<Text>Introductory text</Text>
<TrackedButton onPress={onPressLearnMore} title="Learn More"/>
</View>
<Separator />
<View>
<Text>More text</Text>
<TrackedButton onPress={onPressLearnMore} title="Learn More"/>
</View>
</View>

There are two TrackedButtons on the same screen and, because they have the same title, their identifiers will be the same. This is not allowed as it makes identifying which Button has been pressed impossible.

React Native Tracker will notify of the collision of the second Button with the first one.

Solving a collision

To solve the issue, we can simply make the Location of one or both of these Components richer:

Either by wrapping components

import { ContentContextWrapper, TrackedButton } from '@objectiv/tracker-react-native';

<View>
<View>
<ContentContextWrapper id="top">
<Text>Introductory text</Text>
<TrackedButton onPress={onPressLearnMore} title="Learn More" />
</ContentContextWrapper>
</View>
<Separator />
<View>
<Text>More text</Text>
<TrackedButton onPress={onPressLearnMore} title="Learn More"/>
</View>
</View>

Or, even better, by swapping parents with their Tracked counterparts

import { TrackedButton, TrackedView } from '@objectiv/tracker-react-native';

<View>
<TrackedView id="top">
<Text>Introductory text</Text>
<TrackedButton onPress={onPressLearnMore} title="Learn More" />
</TrackedView>
<Separator />
<TrackedView id="bottom">
<Text>More text</Text>
<TrackedButton onPress={onPressLearnMore} title="Learn More"/>
</TrackedView>
</View>
tip

You may have noticed that the second TrackedView in the example above is not strictly necessary to solve the collision. So, why did we add it?

More on that in our best practices around what to track and why.

Best practices

Solving Collisions should not be an issue to deal with frequently.
Check out how to avoid them in the first place by reading what we think are good practices around tracking Locations.

What's next?

This is pretty much it for the basics of tracking with React SDK.
Check out the API Reference and its examples for more details about all the available Components, Hooks and APIs.