BigCommerce

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

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

Track custom events

Purchase

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 the order data before the page is served:

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

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

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

Troubleshooting

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

Next steps

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