Skip to main content

Tracking Pixel

The Tracking Pixel is a small snippet of HTML/JavaScript you paste on any page you want tracked. It does three jobs depending on how the visitor arrived:

  1. Records the click if the visitor arrived directly (without going through /c/<slug>).
  2. Decides which variant the visitor sees (A/B testing, geo rules, etc.) and redirects them if they're on the wrong one.
  3. Tracks engagement — time on page, scroll depth, AIDA tier signals (Attention, Interest, Desire) — and reports it back to the click row.

One snippet, every page. Auto-detects the right behavior.

Video Walkthrough

Watch: Installing the Tracking Pixel — 0:00–4:00 (video coming soon)

When to Use the Tracking Pixel​

ScenarioShould I install the pixel?
A visitor lands on my page after clicking a /c/<slug> linkYES — captures engagement, lets the page run AIDA tracking
A visitor lands on my page directly (from an ad whose destination is my own URL, no redirect link involved)YES — pixel records the click + runs A/B variant logic + engagement tracking
My destination URL is on someone else's site (e.g. an affiliate offer page I don't control)NO — you can't paste code on pages you don't own

The pixel works on direct-traffic landing pages and on the destination of /c/<slug> redirects. Both modes from one snippet.

How to Install​

  1. Open the link's edit page.
  2. Scroll to the Pixels section.
  3. Copy the Tracking Pixel snippet.
  4. Paste it at the top of <head> on every page you want tracked.

It looks roughly like this:

<script>(function(){var d=document.documentElement;d.style.opacity='0';
var t=setTimeout(function(){d.style.opacity=''},3000);
window.__aida_unhide=function(){clearTimeout(t);d.style.opacity=''};
var s=document.createElement('script');s.async=true;
s.src='https://click.yourdomain.com/spring-promo.js'+location.search;
s.onerror=window.__aida_unhide;document.head.appendChild(s)})();</script>
<noscript><img src="https://click.yourdomain.com/spring-promo.gif" width="1" height="1" alt="" style="display:none" /></noscript>

The snippet contains your link's slug — you don't need to substitute anything. Just copy and paste.

Top of <head>, not bottom of <body>

The pixel needs to load before the page renders so it can hide the page during the variant decision (anti-flicker). If you paste it at the bottom of <body>, you'll see a flash of the wrong page when a redirect happens.

What It Does, Step by Step​

When a visitor loads your page:

  1. Inline boot script runs (0 ms). Sets <html> opacity to 0 (page is loaded but invisible). Schedules a 3-second failsafe to reveal the page if anything goes wrong.
  2. Async fetch of the worker JS (50–100 ms typically). The worker is on Cloudflare's edge, geographically close to the visitor.
  3. Worker decides what to do (sub-10 ms in the worker):
    • If the URL has ?click_id=... (visitor came from a /c/<slug> redirect), the worker returns engagement-only JS — no decision, no record (already done at the redirect).
    • If no click_id, the worker reads your link config from KV, evaluates rules + weighted distribution, picks a destination URL, generates a new click_id, queues the click record back to your origin server.
  4. Worker JS executes in the browser:
    • If destination matches the current page → reveal the page (opacity: '') and start engagement tracking.
    • If destination differs → location.replace(destination_url). Page never reveals; visitor lands on the chosen variant.
  5. Engagement loop runs (only if staying on the page) — see AIDA Tracking below.

End-to-end visible delay: about 30–80ms warm, 70–150ms cold.

Anti-Flicker​

The "flash of original content" problem in client-side A/B testing is when the visitor briefly sees the wrong variant before getting redirected to the right one. We avoid it by hiding the page until the decision is made:

  1. The first thing the inline boot does is documentElement.style.opacity = '0'. The browser still parses and runs JS, but nothing is visible.
  2. After the worker JS arrives and decides, either:
    • Stay → opacity is cleared (page becomes visible).
    • Redirect → location.replace(...) happens BEFORE opacity is cleared. The visitor never sees this page.

A 3-second failsafe ensures the page reveals even if the worker JS never arrives (network failure, ad blocker, etc.) — better to show the original page than to leave a blank screen.

This is the same anti-flicker pattern used by Google Optimize, VWO, and Optimizely.

Sticky Variants​

Once a visitor is assigned a variant, they should stay on that variant on subsequent visits — otherwise A/B test data gets noisy.

The pixel stores the assignment in localStorage under the key _aida_lp_<slug>. On the next visit:

  • If the stored variant URL matches the current page → reveal immediately, no API call.
  • If the stored variant URL differs → location.replace(stored), no API call.
  • Only first-time visitors trigger the worker decision.

Cost: one API call per visitor per browser, ever. Returning visitors get an instant reveal (no API round-trip).

To force a re-roll (for QA/testing), append ?_aida_resplit=1 to the URL.

No-Script Fallback​

The <noscript><img ...> block records a click even if JavaScript is disabled. The image is a 1×1 transparent GIF (43 bytes) — invisible.

Without JS, the pixel can't redirect (image elements don't follow Location headers usefully). So the no-script fallback only records the click; visitors with JS off see whatever HTML you've published. This is acceptable because:

  • The JS-disabled visitor population is < 0.5% of traffic.
  • They tend to be bots, screen readers, or visitors who explicitly chose to disable JS — not your conversion audience.

AIDA Tracking​

While the visitor is on your page, the pixel records engagement signals and reports them back to the click row. Three boolean tier flags:

FlagTriggers When
has_attentionVisitor stayed on the page for ≥ 3 active seconds, page was visible at least once, ≥ 1 input event
has_interesthas_attention + (≥ 15 active seconds OR ≥ 50% scroll) + ≥ 3 interactions
has_desirehas_interest + ANY of: ≥ 45 active seconds, ≥ 90% scroll, hovered/focused a CTA element ≥ 3s, copied page text, returned to tab after switching away

Plus two numeric metrics:

  • time_on_page — total active seconds. Counts only when the page is visible AND focused AND user has interacted within the last 5s.
  • scroll_depth — max % of page scrolled to (cumulative max, not current).

These are tier flags, not exclusive states. A visitor can be has_attention=true, has_interest=true, has_desire=true simultaneously (they showed all three signals).

Marking CTA Elements​

To trigger has_desire via CTA hover detection, add a data-aida-cta attribute to your call-to-action elements:

<a href="/buy" data-aida-cta>Buy Now</a>
<button data-aida-cta>Get Started</button>

If a visitor hovers over a marked CTA for 3+ seconds, that contributes to has_desire. Without these markers, hover detection is skipped — but the other has_desire triggers (scroll, copy, time, returned-after-hide) still fire.

How Engagement Beacons Work​

The pixel sends engagement data back via navigator.sendBeacon (or fetch with keepalive as fallback). Three triggers:

  1. Tier upgrade — when has_attention, has_interest, or has_desire flips to true for the first time.
  2. Heartbeat — every 15 seconds.
  3. Page hide / unload — final beacon when the visitor closes the tab or navigates away.

The server merges idempotently: numeric values use MAX, booleans use OR. Replays and out-of-order beacons are safe.

Reporting​

Each click row has these AIDA columns. They show up in:

  • The Click Log — sortable/filterable per click.
  • Reports — aggregate metrics like average time on page, % of clicks with attention, etc.

Use them to answer: "of the visitors I sent to Variant A, what fraction actually engaged with the page? How does that compare to Variant B?"

Pixel Domain Selection​

If you've configured custom Pixel Domains in the Domains tab, you can choose which one the snippet uses.

In the Pixels section above the snippet textarea, a dropdown lists:

  • Your account's default tracking domain (e.g. click.yourdomain.com).
  • Each verified pixel domain you've added.

Pick a custom pixel domain and the snippet's src URL updates accordingly. Customers see your branded URL on their inspector instead of click.yourdomain.com.

The default's used if you haven't added any pixel domains.

Troubleshooting​

SymptomCauseFix
Page is blank for 3 seconds, then revealsWorker JS isn't loadingCheck browser console — usually an ad blocker or DNS issue. Test in incognito.
Page flashes the wrong variant before redirectingPixel was pasted at the bottom of <body> instead of top of <head>Move the snippet to the very top of <head>
Sticky variant doesn't update after I change the link's destinationslocalStorage is cachedUse ?_aida_resplit=1 once to clear, or wait for a different browser/visitor
Visitors aren't getting AIDA flagsPage is visible / focused / interacted with checks failingCheck data-aida-cta markup; verify scroll length is reasonable
has_desire never firesNo CTA marked, no scroll past 90%, dwell less than 45sAdd data-aida-cta to your CTAs

Next Steps​