Announcing the Release of an Open-Source dataLayer for BigCommerce

Published in

Fueled, Inc.

2 min readDec 30, 2021

Silly cat image, just for some color on the article.

Today, Fueled is excited to share that we’ve published a release candidate of our open-source dataLayer for BigCommerce, based upon the Google Analytics v4 eCommerce specification.

What is a dataLayer? Why do I need one?

dataLayers provide a uniformed way for tracking and attribution scripts, such as Segment’s Analytics.js framework or Google Analytics, to interact with data and events surfaced on your website. Implementing a dataLayer ensures that all scripts (and all developers…) use consistent attribution values and calculations. They can also cut down on custom code. Finally, they are natively exposed to Google Tag Manager, if you choose to implement tracking via GTM.

What does it mean that this dataLayer is based upon the Google Analytics v4 eCommerce specification?

There are many ways to define custom events and data attributes within a dataLayer implementation. We decided to base our dataLayer on the Google Analytics v4 eCommerce specification because of its universality. GAv4 is event-based rather than hit-based (the way that Google Universal Analytics is), aligning it better with other, modern attribution measurement solutions like Segment, Amplitude, and so forth.

Why did you open source this code?

Because we want this project to thrive — and we want both BigCommerce merchants and agencies to benefit from, and embrace, dataLayers for BigCommerce.

How does this dataLayer work? How do I install it?

If you’re interested in leveraging this dataLayer on your BigCommerce website, you can simply copy/paste the compiled script into your Scripts Manager, following these instructions.

If you’re a developer, and you want to modify this JavaScript, we’ve included the source code, which can then be easily compiled via Webpack. This is handy if you want to add events, modify event properties, or target different HTML elements in your theme for event tracking.

Are there any other nifty features of this project?

Why, yes! Thank you for asking. One of the aspects of this project that we’re most proud of is the fact that we leverage MutationObserver in JavaScript to listen for each step in the Checkout flow for BigCommerce. This means that we can fire off events as a customer checks out, such as the Add_Payment_Info event — without having to modify checkout.js directly.

What’s Next?

Let’s iterate on this project together. If you’re an agency or developer responsible for a BigCommerce website, let’s collaborate to continually advance dataLayers together.