Tracking conversions

Two ways to track a conversion

Choose based on how your site handles post-conversion state. Most sites use URL patterns. Complex flows need the manual call.

Path 1: URL pattern

Go to Admin, then Settings, and add one or more URL patterns under Conversion tracking. No code changes needed on your site.

<!-- No code required. -->
<!-- In your Spectare admin, go to Settings and add a URL pattern. -->
<!-- Examples: /thank-you  |  order-confirmed  |  /dashboard/welcome -->
<!--                                                                  -->
<!-- When a visitor's URL contains the pattern, Spectare fires        -->
<!-- a conversion event automatically.                                -->

Path 2: Manual call

Fire a conversion from your own code at the moment it is confirmed. For script tag sites, call spectare('conversion'). For React and Next.js, read the session token and POST to the conversion endpoint directly. Use the manual call when the URL does not change, when you need to fire after an async operation completes, or when the conversion happens inside a single-page app.

<script>
  // Call this wherever the conversion happens:
  // a button click, a form submission, a successful API response.
  spectare('conversion');
</script>

// React / Next.js: manual conversion call
// Use this for event-driven conversions (button clicks, form submits).
// For URL-based conversions, configure patterns in Settings instead.
// PersonalisedSection fires them automatically on page load.

async function handlePurchase() {
  await submitOrder();

  const token = sessionStorage.getItem(`_spectare_token_${orgSlug}`);
  if (token) {
    fetch('https://spectare.ai/api/conversion', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token, orgSlug, url: window.location.href }),
    });
  }
}

Multi-step forms

Fire the conversion event once, on confirmed completion of the final step. Not on each intermediate step, and not before the server confirms success. Early firing records a conversion that may not complete; multiple firings inflate your conversion count.

// Multi-step form: fire on the final step only
function Step3({ onComplete }: { onComplete: () => void }) {
  function handleSubmit() {
    submitFinalStep().then(() => {
      spectare('conversion'); // fires once, on confirmed completion
      onComplete();
    });
  }

  return <button onClick={handleSubmit}>Submit application</button>;
}

The same principle applies to payment flows: fire after the payment API responds with success, not when the user clicks Pay.

REST API

For server-side rendering stacks, native apps, or any environment without the Spectare script, call the conversion endpoint directly. Include the context token from the qualify step and the IDs of atoms and image shown to the visitor.

POST https://spectare.ai/api/conversion
Content-Type: application/json

{
  "token": "<context-token-from-qualify>",
  "orgSlug": "your-workspace-slug",
  "url": "https://your-site.com/thank-you",
  "variantId": "<variantId-from-assemble-response>",
  "goalName": "Purchase",
  "goalValue": 79,
  "goalCurrency": "USD"
}

// Response
{ "ok": true }

What the data feeds into

Each conversion event updates five systems in real time. The effects compound: more conversions mean better assembly for future visitors.