BigCommerce

BigCommerce's Script Manager adds scripts to every storefront page without theme edits. It is also where the order-confirmation purchase event goes. Editing the theme's head.html works too.

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

Track purchases

Create a second script in Script Manager with Placement: Footer, Location: Order Confirmation, and Script type: Script. BigCommerce runs Script Manager contents through Handlebars, so expressions such as checkout.order.id are filled in with real order data:

<script>
(function () {
  function waitForOnyx(callback, timeout) {
    var start = Date.now();
    (function check() {
      if (window.onyx && typeof window.onyx.event === 'function') {
        callback();
      } else if (Date.now() - start < timeout) {
        setTimeout(check, 100);
      }
    })();
  }

  waitForOnyx(function () {
    {{#if checkout.order}}
    window.onyx.event('purchase', {
      transaction_id: '{{checkout.order.id}}',
      value: {{checkout.subtotal.value}},
      currency: '{{checkout.currency.code}}'
    });
    {{/if}}
  }, 5000);
})();
</script>

waitForOnyx polls until the tracking script from the head has defined window.onyx, so the event is not lost if the confirmation page runs the footer script first.

Troubleshooting

• Script not on the page: confirm it is enabled in Script Manager, then purge the cache under Server Settings > Store-level caching > Purge cache.
• Purchase event missing: the script must use the Order Confirmation location. The checkout.order, checkout.subtotal, and checkout.currency objects depend on your checkout version, so place a test order to confirm the event arrives.

Next steps

• Track custom events such as signups, purchases, and clicks.
• Identify users to tie sessions to accounts.
• Proxy the script through your own domain to get past ad blockers.
• Script attributes let you skip or mask URLs and tag events.