Back to docs

Links

Conversion pixel

Track conversions on destination pages you don't control, attributed back to the originating click and A/B variant.

Short link A/B tests can send visitors to a destination page you don't control — a storefront, a landing page builder, a partner's site. Styrar measures the click and which variant a visitor landed on, but has no way to know whether that visitor converted after the redirect.

The conversion pixel closes that loop. It's a small script you embed on the destination page that reports conversions back to Styrar, correlated to the exact click (and A/B variant) that sent the visitor there.

How it works

  1. When a short link redirects a visitor, Styrar appends a one-time styrar_ck token to the destination URL.
  2. The pixel script on that page reads the token from the URL (or localStorage, so it survives further navigation on your site) and keeps it ready to send with any event.
  3. You call window.styrar.track(eventName, data) — or add a data-styrar-track attribute — when a visitor does something worth counting (signs up, checks out, starts a trial).
  4. Styrar resolves the token back to the original link and A/B variant, and the conversion shows up in that link's experiment panel.

There's no account id, site id, or API key to configure. The token itself is the only thing tying an event back to your workspace, and it's scoped to a single click.

Setting up a conversion pixel

1. Find your embed snippet

Open the short link's Advanced → A/B test panel in the dashboard and start (or configure) an experiment. The panel shows a "Track conversions on the destination page" card with a ready-to-copy snippet:

HTML
<script src="https://api.styrar.com/v1/pixel/styrar.js" async></script>
<!-- mark a conversion -->
<button data-styrar-track="signup">Sign up</button>
<!-- or call it from your own code -->
<script>window.styrar && window.styrar.track('signup', { value: 19.99 })</script>

2. Add the script tag to your destination page

Paste the <script src="…/v1/pixel/styrar.js"> tag into the page visitors land on after the short link redirects — in the <head> or just before </body>. This works on any platform (Shopify, Webflow, a static site, your own app) because the pixel and its tracking endpoint use an open, cookie-free CORS policy.

3. Mark a conversion

Pick whichever fits your page:

Declarative, no JavaScript of your own required:

HTML
<button data-styrar-track="signup">Sign up</button>
<form data-styrar-track="checkout_complete">…</form>

A click fires the event on most elements; on a <form> it fires on submit instead.

From your own code, once the script has loaded:

HTML
<script>
  window.styrar && window.styrar.track('purchase', { value: 49.99 })
</script>

4. Confirm it's working

Trigger the conversion on the destination page, then open the link's A/B test panel — the variant's conversion count and rate update once the event lands.

Custom conversion values

window.styrar.track(eventName, data) takes any event name and an optional data object:

HTML
<script>
  window.styrar.track('purchase', {
    value: 49.99,          // numeric — stored as the event's value
    plan: 'pro_annual',    // any other field is stored alongside the event
    currency: 'USD',
  })
</script>
FieldTypeBehavior
eventNamestringRequired. Up to 64 characters — use whatever fits your funnel: signup, add_to_cart, purchase, etc.
valuenumberOnly stored if it's a JS number (e.g. order revenue). Anything else is ignored.
any other field on dataany JSON valueStored alongside the event (up to 4 KB serialized). Larger payloads are dropped, not truncated.

There's no schema to register up front — call track() with whatever shape makes sense for your page, and it's preserved with the event.

Reporting conversions from your server

If the conversion happens server-side (a webhook from your payment provider, for example) rather than in the browser, read the styrar_ck parameter off the original request and post it directly:

RequestPOST
Content-Type: application/json

{
  "clickToken": "the styrar_ck value",
  "eventName": "purchase",
  "value": 49.99
}
Response200 OK
{
  "ok": true
}

This is the same unauthenticated request the browser pixel makes. There's no API key — the clickToken is single-use-scoped to one click and isn't enumerable, so it doubles as the credential.

API reference

Plain text
GET  /v1/pixel/styrar.js   # the embeddable script, no auth required
POST /v1/pixel/track        # records a conversion event, no auth required

POST /v1/pixel/track body:

FieldRequiredDescription
clickTokenYesThe styrar_ck value from the destination URL or localStorage
eventNameYesUp to 64 characters
valueNoNumber, e.g. order value
eventDataNoArbitrary JSON object, up to 4 KB serialized
pageUrlNoUp to 2048 characters; the script sends window.location.href automatically

The endpoint always responds 200 { "ok": true } — including for an unrecognized or expired clickToken — so the pixel never surfaces an error on a page you don't fully control.

Privacy and security

  • The pixel sends only the click token, the event name/value/data you pass it, and the current page URL. No cookies, fingerprinting, or cross-site identifiers are involved.
  • /v1/pixel/track is rate-limited per IP (120 requests/minute) to absorb abuse without affecting normal traffic.
  • clickToken is a random, single-use-scoped identifier — it can't be guessed from a link's short code or any other public value.

Limits

  • Conversion tracking requires an A/B test to be configured on the link; the conversion attributes to whichever variant the visitor was shown at click time.
  • There's no automatic pageview tracking — the pixel only reports events you explicitly trigger, to keep noise and request volume down.
  • No bulk export or deletion endpoint yet for conversion events; reach out if you need data removed for a specific workspace.

Related

Join the beta waitlist

By signing up you agree to receive marketing email. See our Privacy Policy.