BigCommerce

BigCommerce is a leading e-commerce platform for online stores. You can integrate Rybbit Analytics to track visitor behavior and conversions.

How to Add Rybbit to BigCommerce

Using Script Manager

The easiest way to add Rybbit to BigCommerce is through the Script Manager.

Access Script Manager

Log in to your BigCommerce admin panel
Go to Storefront > Script Manager
Click Create a Script

Configure the Script

Fill in the following settings:

Name: Rybbit Analytics
Description: Rybbit Analytics tracking script
Placement: Head
Location: All pages
Script category: Analytics
Script type: Script

In the Script contents box, paste:

<script>
(function() {
  var s = document.createElement('script');
  s.src = 'https://app.rybbit.io/api/script.js';
  s.defer = true;
  s.setAttribute('data-site-id', 'YOUR_SITE_ID');
  document.head.appendChild(s);
})();
</script>

Replace YOUR_SITE_ID with your actual Site ID.

Save the Script

Click Save to activate the script on your store.

Editing Theme Files

You can also add the script directly to your theme files for more control.

Editing theme files requires some technical knowledge. Make a backup of your theme before making changes.

Access Theme Files

Go to Storefront > Themes
Click Advanced on your current theme
Select Edit Theme Files

Edit the Header Template

Navigate to templates > components > common
Open head.html
Add the following code before the closing </head> or at the end of the file:

<script>
(function() {
  var s = document.createElement('script');
  s.src = 'https://app.rybbit.io/api/script.js';
  s.defer = true;
  s.setAttribute('data-site-id', 'YOUR_SITE_ID');
  document.head.appendChild(s);
})();
</script>

Save and Apply

Click Save to apply the changes to your live store.

Tracking E-commerce Events

To get the most out of Rybbit with BigCommerce, you can track key e-commerce events like product views and purchases.

Track Purchases

To track completed purchases, create another script in Script Manager with these settings:

Placement: Footer
Location: Order Confirmation
Script type: Script

<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() {
    // BigCommerce provides order data via Handlebars
    {{#if checkout.order}}
    window.rybbit.event('purchase', {
      transaction_id: '{{checkout.order.id}}',
      value: {{checkout.subtotal.value}},
      currency: '{{checkout.currency.code}}'
    });
    {{/if}}
  }, 5000);
})();
</script>

BigCommerce uses Handlebars templating. The {{}} syntax is processed by BigCommerce to inject order data.

Troubleshooting

Script not loading

Check Script Manager to ensure the script is enabled
Clear your store's cache: Server Settings > Store-level caching > Purge cache
Check the browser console for any errors

E-commerce events not tracking

Make sure the purchase tracking script is set to Order Confirmation location
Verify the Handlebars variables match your BigCommerce version
Test by completing a test order

On this page