Spardocs

Installation

Add the Spar script to your site, verify it's running, and see which events power your objectives.

Non-Shopify sites install Spar by pasting a snippet. Shopify stores get the script for free through the app embed, and only need this page if that embed is turned off.

Script snippet

Settings → Installation shows two script tags: a tiny stub that queues any early window.spar.track() calls, and an async loader that pulls the real script from Spar's serve origin, keyed to your site with a data-spar-key attribute.

<script>
  window.spar=window.spar||{_q:[],track:function(){window.spar._q.push([].slice.call(arguments))}};
</script>
<script async src="https://<your-serve-origin>/spar.js" data-spar-key="<your-embed-key>"></script>

Paste both tags into the <head> of every page you want to track. An anti-flicker variant is also available: it briefly hides the page (up to 1.5s) until a running test resolves, then fades in, at the cost of a small render delay.

Script status

The Installation page checks whether the snippet is present on your site and reports one of three states: found in the page source, detected from a recent pageview beacon, or not detected yet. If you install through a tag manager rather than pasting directly into HTML, the page-source check can't see it; rely on the pageview-beacon result instead.

Zero-config tracked events

Once the script is installed, Spar tracks a set of events automatically, with no configuration:

EventFires on
session_started, engaged_sessionSession start and GA4-style engagement (10s active, a second pageview, or any conversion event)
phone_clickClicking any tel: link
form_submitAny form submission (presence only, never field values)
email_captureA form submission where the form contains an email field
scroll_depthReaching the scroll-depth threshold
product_viewedViewing a product page

These cover the lead-gen and engagement objectives with no code changes. Money events (product_added_to_cart, checkout_started, checkout_completed) need one of the paths below, since a non-Shopify site has no built-in signal for a purchase.

Conversion tracking with window.spar.track()

The simplest way to record a conversion is one line on the page where it happens:

window.spar.track("checkout_completed", { value: 49.99, currency: "USD" });

Calls made before the async script finishes loading are queued by the stub and replayed once it's ready. If Spar also has an automatic emitter for the same event (for example a dataLayer purchase push), a manual window.spar.track() call for that event suppresses the automatic one for the rest of the session, so you never get double-counted.

Checkout success page

If your checkout redirects back to a thank-you page on your own domain (true for Stripe's hosted Checkout), you can configure a URL pattern instead of adding a track() call. Spar emits checkout_completed whenever a visitor lands on a URL matching the pattern.

https://yoursite.com/thank-you*

This only covers Stripe's redirect-based hosted Checkout. PayPal's default Smart Payment Buttons and Paddle's overlay checkout can both complete with no redirect at all, so this setting won't see those conversions. Use window.spar.track() on your own success callback, or the server-side conversions API instead. It also yields a conversion count only, with no order value, so it satisfies conversion-rate objectives but not average order value or units per transaction.

Embed key

The embed key in your snippet (data-spar-key) identifies your site to Spar's serve origin. It's public (visible in your page source), so it isn't a secret, but you can rotate it from the Installation page if you ever need to invalidate an old snippet. Rotating requires updating the snippet on your site immediately, since the old key stops working the moment you rotate.

Server API key

For checkouts that never redirect to your site and can't run the embed script at all, generate a server API key from the Installation page. Unlike the embed key, this is a real secret: it authenticates your backend when it posts conversions directly to Spar. See Track conversions server-side for the full setup. The raw key is shown once, at generation time; Spar only ever stores its hash.

Last updated on

On this page