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:
| Event | Fires on |
|---|---|
session_started, engaged_session | Session start and GA4-style engagement (10s active, a second pageview, or any conversion event) |
phone_click | Clicking any tel: link |
form_submit | Any form submission (presence only, never field values) |
email_capture | A form submission where the form contains an email field |
scroll_depth | Reaching the scroll-depth threshold |
product_viewed | Viewing 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