Explainers / Three ways to track

Three ways to track an event

A redesign ships on a Thursday. Everything works, pages load faster, orders keep coming in. Three weeks later an analyst notices that add-to-cart from category pages has been zero since that Thursday. Not down, zero. Nobody broke the tracking on purpose, and nothing warned anyone, because a missing event looks exactly like a quiet afternoon.

The cause: distance

A website and its tracking are usually two separate things describing the same page. The website changes every week, because that is its job; the tracking is supposed to keep matching it. The further the tracking’s definition lives from the thing it measures, the more room there is for the two to drift apart without anyone noticing. There are three ways to define it, and they are three distances.

Pointing at the page

Spotting someone across the room by their red jacket.

In a tag manager, outside the website, someone writes a rule: when the element with the styling class hero-banner-v2 appears, count a banner view.

+ Marketing can add tracking without developers or releases.

− The class name is how the page happens to be built today. A redesign renames it and the rule points at nothing, silently.

The page announces it

A bulletin board the website writes on.

Developers add a line of code at the meaningful moments (dataLayer.push) that posts what happened; the tag manager listens.

+ Survives redesigns: the announcement is part of the page's code, reviewed like code. A respectable minimum.

− The noticing (was the banner really seen?) is hand-written per component, and nothing enforces names: bannerClick, banner_click and clickBanner all appear over the years.

A label on the thing itselfThis store

A name tag pinned on the person.

The banner carries its tracking in its own HTML: what it is, the facts about it, and which moment counts. A small library does all the watching and counting.

+ Nothing to drift: the label moves with the element. Label a component once and every copy tracks itself. One grammar, so one name per event.

− Tracking becomes engineering work: a change in code and a release, not a quick edit in a tool.

Try it: ship a redesign

The same banner, tracked the three ways. Each column shows how its tracking is defined and the events it produces, live. Then change the site the way real sites change.

Pointing

Tag manager rule
  trigger: element visible
  selector: .hero-banner-v2
  event:    banner_view

Page today
  <section class="hero-banner-v2">

Counting banner views.

no events

Announcing

In the banner component
  dataLayer.push({
    event: 'banner_view',
    banner: 'Summer sale'
  })

Counting banner views.

no events

Label

In the banner's own HTML
  <section class="hero-banner-v2"
    data-elb="promotion"
    data-elb-promotion="name:Summer sale"
    data-elbaction="impression:view">

Counting banner views.

no events

What the third way gives you

Drift becomes structurally impossible. Rename it, restyle it, move it to another page: the label moves with it, because it is part of it.
Tag once, track forever. A product card is one component rendered thousands of times. Put the label inside the component and every copy tracks itself, including pages nobody has designed yet.
One grammar, enforced. Every event is a thing plus a moment: promotion view, product add. Two spellings of one event cannot happen, and the page documents its own tracking.
Viewability done once. An impression counts only when at least half of the element was on screen for a full second, the industry standard, built into the library instead of hand-coded per block.

This store uses the open-source library walkerOS for it: its data-elb attributes are the labels. Open the tracking explainer on the homepage to see them on the real page.

Open the tracking explainer →The full Academy lesson Every event on this store