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

What is a Data Layer? Why do I need one?

Data layers 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 data layer 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 data layer is based upon the Google Analytics v4 eCommerce specification?

There are many ways to define custom events and data attributes within a data layer implementation. We decided to base our data layer 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, data layers for BigCommerce.

How does this data layer work? How do I install it?

If you’re interested in leveraging this data layer on your BigCommerce website, you can simply copy/paste the compiled script into your Scripts Manager, following [these instructions](https://github.com/fueled-io/bigcommerce-data layer#installation).

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 data layers together.

---

Originally published on Medium.