Working with Fueled’s Shopify Data Layer

Overview

Fueled provides a lightweight data layer and data layer listeners that can be leveraged with Google Tag Manager, or used to create your own event tracking scripts/events.

Why Leverage Fueled’s Data Layer?

If a merchant needs to set up multiple client-side attribution scripts to run on their Shopify store, leveraging our data layer can help ensure that the same event data is sent to all destinations. Our data layer defines a data model in one place for consistent tracking and metrics.

Enabling Fueled’s Data Layer

Fueled’s data layer is enabled whenever the Theme App Extension is enabled for our Google Analytics 4 Connector App.

The App Extension settings can be found in your theme, as see below:

A screenshot of the App Extension settings for the Fueled app.

Note: You do not have to check the “Track client events” box in the App Extension Settings to utilize our data layer. In fact, if you’d like to leverage our data layer in combination with our client-side event library to manage all of your own client-side events, you would disable this checkbox.

Data Layer Object Definitions

Visit:

GA4 Shopify App Event Definitions

Leveraging Fueled’s Data Layer with Google Tag Manager

⚠️ We are not fans of GTM here at Fueled… While Google Tag Manager remains a popular way for marketing teams to inject and manage attribution tags and other scripts on their website, GTM is highly problematic:

• Google Tag Manager is stripped from websites by ad blockers up to 12% of the time in the United States.

• It’s difficult to document and control attribution configuration with GTM.

• It’s difficult to debug errors in attribution scripts that are managed via GTM.

That said, you can still leverage Google Tag Manager with our data layer to help ensure consistent tracking and client-side metrics.

Fueled’s data layer is instantiated in the DOM’s window.dataLayer object, as a variable called fueled.

Inside your Google Tag Manager instance, you can map the data layer to the variables you need for GTM events.

Go “Variables” and click “New” to to create new user-defined variables.

Google Tag Manager UI for adding user-defined data layer variables.

Then click “Data Layer Variable” as seen below.

Google Tag Manager UI for adding a custom data layer variable.

An example of how you would access properties of Fueled’s data layer are described in the screenshot below.

Google Tag Manager UI for naming a custom data layer variable

fueled is the javascript variable to which we populate all of our event and data layer data. To access customer-related data (when a shopper is logged in), you’d select values such as:

• fueled.customer.first_name

  • fueled.customer.email

Getting Assistance with Fueled’s Data Layer

For help working with our data layer, please consider joining our Community Slack Channel.