A dataLayer implementation for BigCommerce, based upon the Google Analytics 4 Ecommerce specification.
Brought to you by Fueled Inc.
dataLayers provide a uniformed way for tracking and attribution scripts, such as Segment's Analytics.js library, to interact with your BigCommerce site. Implementing a dataLayer will ensure that all scripts use consistent attribution values and calculations. They can also cut down on custom code. Finally, they are exposed to Google Tag Manager, if you choose to implement tracking via GTM.
This dataLayer project implements Google's "Google Analytics v4 Ecommerce Event Specification", as described in the following docs:
- https://developers.google.com/analytics/devguides/collection/ga4/ecommerce
- https://developers.google.com/tag-manager/ecommerce-ga4
This project is installed via BigCommerce's Script Manager. The script should be loaded on all pages.
- From your dashboard open the Storefront settings and under that, click into Script manager.
- Click the "Create Script" button
- Give the script a name and (optional) description, make sure it's running on All Pages and is set to Essential
- Select a script type of Script and in the bellow text box type in following
<script></script> - Paste your compiled script inside the script tags you added.
<script>Your code</script> - Save
To build and bundle the dataLayer from source, run (You will need Node installed):
npm install this will install the required components
npm run build-min this is compile the minified script into the ./dist folder
npm run build this will create a copy of the script using Webpacks eval function
- Product/Item List Views/Impressions
- Product/Item List Clicks
- Product/Item Detail Views
- Adds/Removes from Cart
- View Cart
- Checkout Events exposed to the dataLayer
- The begin_checkout event fires when the /checkout page loads
- The add_payment_info fires when billing info is added during checkout
- Purchases
Additional script variable definitions coming soon.
This script has been designed to work with HTML elements generated by BigCommerce's default theme, Cornerstone. It can be extended to work with custom themes, as well as legacy Blueprint themes, to track additional client interactions.
To modify the selectors the script watches for you can make those changes starting on line 86 of ./src/index.js
var productDetailsButton = document.getElementsByClassName('card-figure__link') || []; //Product card selector
var mainPageAddButton = document.querySelectorAll("[data-button-type='add-cart']") || []; //Add to cart button selector
var productPageAddButton = document.getElementById('form-action-addToCart'); //Add to cart form selector
var cartPageRemoveButton = document.getElementsByClassName('cart-remove') || []; //Remove from cart button selector
var cartButton = document.getElementsByClassName('navUser-item--cart') || []; //Show Cart selector
Once your customizations are made you can follow the build/installation instructions.
As an open source project, this solution is provided as is, without warranty or a commitment to customer support. That said, we are committed to the BigCommerce community and will do our best to answer questions and help you leverage this dataLayer. If you have questions, please feel free to email hello@fueled.io.
This is an open source project, licensed under the GPLv3.