Skip to main content

Tagging

why tagging?

If you want to know why we ask you to tag your elements, take a look at the Core Concepts Introduction.

To understand tagging, we first need to know what we mean by Elements.

Elements

When talking about Elements we usually refer to DOM Interfaces and APIs such as Nodes / Elements and EventTargets.

Taggable Elements

Taggable Elements are HTMLElements and SVGElements, which are implementations of the beforementioned Elements.

Examples are a <div> or an <a> element in HTML.

Tagging of Elements

Objectiv's Tracker API is used to tag any Element that you want to track. The Tracker then uses this information to automatically decorate the Element in the DOM with the respective TaggingAttributes.

A tagging example in React:

<LinkComponent 
{...tagLink({ id: 'link-id', text: 'Go!', href: '/path' })}
to="/path">
Go!
</LinkComponent>

...would result in something like the following decorated attributes:

<a 
data-objectiv-element-id="<a unique identifier>"
data-objectiv-context="<string of encoded contexts>"
data-objectiv-track-clicks="true"
href="/path">
Go!
</a>

When the Tracker wants to send an Event related to an Element (e.g. a click), it uses its decorated TaggingAttributes to compose the Event.

Tagged Elements

These are Taggable Elements that have been already decorated by the Objectiv Tracker with at least the elementId and context TaggingAttributes. The Tagging Attributes supply the Tracker with the information needed to compose & send the right Events.

Children Tagging Elements

These are Taggable Elements that have been already decorated with the TaggingAttribute.tagChildren by using the tagChildren Location Tagger. They will execute the given ChildrenTaggingQueries, at runtime, and tag matching children Elements.

ChildrenTaggingQuery objects are composed of a CSS Selector query and a set of TaggingAttributes. Each matching Element will be decorated with the given Location Tagger result.

A tagChildren example in React:

<div
{...tagChildren([
{
queryAll: 'button[aria-label="Previous"]',
tagAs: tagButton({ id: 'prev', text: 'Previous' })
}
])}
>
...
</div>

The div Element above has been decorated with a ChildrenTaggingQuery. It will execute the given queryAll and apply the result of the tagButton parameter to any matching child Element.