Big news! The walker is now open-source. Open GitHub

How-to GuideLearn how to send E-Commerce events to GA4 with Google Tag Manager

This guide will explain the entire workflow from tagging your HTML with walker.js, creating tags, triggers and variables in GTM and finally viewing the data in GA4. This example will focus on the e-commerce event of firing a product view.

To be able to follow along with the guide, a GTM and GA4 setup, as well as basic knowledge in both applications, are assumed.

Walker.js implementation

Your site is already tagged? Jump to GTM configuration

Using walker.js you can track every user interaction without writing a single line of JavaScript. You just have to add the HTML attributes to your site.

In this guide you will learn how to tag your HTML, configure your tags in GTM and view the data in GA4. Example: product view

Product view

That's how the implementation could look like: <div elb="product" elbaction="load:view" elb-product="id:1"> <p class="name" elb-product="name:Bermuda Shorts Lisa"> Bermuda Shorts Lisa </p> <span class="producer" elb-product="brand:Discover">Discover</span> <span class="variant" elb-product="variant:Slim fit">Slim fit</span> <button elbaction="click:remove"></button> <div class="category" elb-product="category:Shorts">Shorts</div> <div class="price" elb-product="price:29">€ 29</div> <p class="description">...</p> <input type="text" class="qantity" value="1" name="quantity" elb-product="quantity:#value" /> <button elbaction="click:add">Add to cart</button> </div>

Once a page is loaded by a user all property values from the element as well as all child elements of the entity container and their parents will be collected. In the background a dataLayer.push will be generated with the following structure: dataLayer.push({ event: 'product view', data: { id: 1, name: 'Bermuda Shorts Lisa', brand: 'Discover', variant: 'Slim fit', category: 'Shorts', price: '29', quantity: 1, }, globals: { language: 'en', test: 'darkmode', }, user: { device: 'cookieid', }, nested: [], id: '1647968113641-b4b9h9-5', trigger: 'load', entity: 'product', action: 'view', timestamp: 1647968113641, timing: 13.37, group: 'b4b9h9', count: 2, walker: true, });

GTM configuration

The Google Tag Manager is used to send the collected product data to GA4.

Tag

To create the product view tag in GTM, you have to create a new GA4 Event Tag.

tag

The Event Name field of the tag should always be set to the correct value. Mismatches between the given name and the parameter map will lead to the loss of data. Checkout all GA4 events.

In this example, we only need the event parameter items given by Google.
It is recommended to use the parameters value and currency if you want to set the event as a conversion. We will set a custom-created variable as items value, which we are going to create later in this guide.

Trigger

You have to ensure to use a trigger on the newly created tag. The trigger has to fire when the productsView is pushed into the dataLayer.

trigger

The Event name of the trigger should always be set to the name of the entity + the selected trigger (in your HTML tagging).

Variable

In this case, three Variables have to be created to make sure that the pushed data is showing how expected in GA4.
1. Custom JavaScript variable with the following code:
function () { var productMapping = {{DLV - product.mapping}}; var data = {{DLV - walker.data}}; var items = Object.keys(data).reduce(function (props, key) { props[productMapping[key]] = data[key]; return props; }, {}); return [items]; }
This function is used to map the data of the pushed dataLayer into the GA4 syntax. The var productMapping and data need to be created manually:
2. Data (Data Layer variable)
This variable is containing the values of the pushed item

dataVariable

The Data Layer variable name should always be set to data. A mismatch will lead to a loss of data.

The name of the variable itself needs to be {{DLV - walker.data}}. If you want it to have a different name, it is important to allocate it to the var data in the code snippet.

3. ProductMapping (custom JavaScript variable)
The productMapping variable is used in the mapping function mentioned above. It is used as “dictionary” to know how the pushed keys are named in GA4. function () { return { id: "item_id", name: "item_name", affiliation: "affilation", coupon: "coupon", currency: "currency", discount: "discount", index: "index", brand: "item_brand", category: "item_category", category2: "item_category2", category3: "item_category3", category4: "item_category4", category5: "item_category5", list_id: "item_list_id", list_name: "item_list_name", variant: "item_variant", location_id: "location_id", price: "price", quantity: "quantity" }; }

The name of the variable itself needs to be {{DLV - product.mapping}}. If you want it to have a different name, it is important to allocate it to the var productMapping in the code snippet.

All keys of the variable have to match the keys used in the dataLayer.push but are free to define. Unused pairs can be removed.
The values on the other hand are predefined GA4 values. Changing them will lead to a loss of data.

Pushing multiple products

Pushing multiple products requires small changes to the mapping JavaScript function, aswell as the Data Layer variable. productMapping stays the same.

In this case, three variables have to be created to make sure that the pushed data is showing how expected in GA4
1. Custom JavaScript variable with the following code:
function () { var productMapping = {{DLV - product.mapping}}; var nested = {{DLV - walker.nested}}; return nested.reduce(function (items, entity) { var item = Object.keys(entity.data).reduce(function (props, key) { props[productMapping[key]] = entity.data[key]; return props; }, {}); items.push(item); return items; }, []); }
2. Nested (Data Layer variable)
This variable is containing the values of the pushed item

dataVariable

GA4

If you have enabled debug mode , the fired view_item should be visible in the second stream of the view, containing the pushed item(s). It is now possible to check whether all parameters were fired correctly.

itemsGA4

In the E-commerce reports section, you can see the pushed item in the category “E-commerce purchases and item views”. (can take up to 48 hours)

debugViewGA4

As you can see, the item was not added to a basket yet. In this case, the next step would be to implement the add_to_cart event. Since we already have a tagged button on our product detail page, we only need to create a GTM tag equipped with a trigger. Refering to GA4 docs the add_to_cart event only requires the items parameter, which we initialized earlier.

Now you could move on with events like add_to_wishlist, add_payment_info, begin_checkout and so on.

That's it! 🥳
With this guide, you created the foundation for your tracking journey with walker.js & GA4!

Want to learn more about the walker.js? Got feedback?
Check out our GitHub repo (and give us a star if you like what we do), leave us a comment on LinkedIn or write to us at hello@elbwalker.com.

Ready to dive in?Set up elbwalker in under 30 minutes.

Company name

Simplifying Data Collection. Enabling Growth.

© 2022 elbwalker GmbH | crafted in Hamburg, Germany