If you're using Google Tag Manager to manage your website's tracking and marketing tags, chances are high you are using the dataLayer object. The dataLayer is a JavaScript object that stores information about the page and its interactions, which can be used to pass data to tracking and marketing tags.
When it comes to tracking and analyzing your ecommerce data in Google Analytics, the products and services you sell are at the center of it all. To accurately track and measure the performance of these items, the dataLayer will push an items array. To accurately track this items array in GA4, a certain nomenclature needs to be followed. However, the way your dataLayer is built up, might not be following the exact nomenclature GA4 needs to track items data. In this article, we'll look at how to alter dataLayer dimension values in an items array in Google Tag Manager.
Here’s an example of how your items array might look like:
items: [
{
id: SKU_12345,
product_type_name: "Apparel",
product_name: "Stan and Friends Tee",
platform_name: "Google Merchandise Store",,
brand_name: "Google",
list_id: “related_products”,
list_name: "Related Products",
variant: "green"
price: 9.99,
quantity: 1
}
]
As you’ll notice, this array is not using the right references as it is needed to measure your ecommerce data in GA4. Following Google’s documentation, here’s how the array should actually look like:
items: [
{
item_id: SKU_12345,
item_category: "Apparel",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
brand: "Google",
item_list_id: “related_products”,
item_list_name: "Related Products",
item_variant: "green"
price: 9.99,
quantity: 1
}
]
The easiest solution would be to make changes to the dataLayer object directly, however, this might not always be possible. The dataLayer often has multiple stakeholders, and the naming convention used by GA4 might not be the one that fits the business best. How do you alter the dimensions of the array without having to change the dataLayer object?
There’s a simple custom Javascript function that will allow you to exactly do so. Here’s the function applied to my custom array:
function() {
var matches = {
id: 'item_id',
product_type_name: 'item_category',
product_name: 'item_name',
platform_name: 'affiliation',
brand_name: 'brand',
list_id: 'item_list_id',
list_name: 'item_list_name',
variant: 'item_variant',
}
var old_array = {{Items array}}
var new_array = []
for (var i = 0; i < old_array.length; i++) {
for (var property in old_array[i]) {
var new_property = matches[property]
if (new_property) {
old_array[i][new_property] = old_array[i][property]
delete old_array[i][property]
}
}
new_array.push(old_array[i])
}
return new_array
}
When applied to a variable in Google Tag Manager, this function will allow you to push the new values into the newly created variable and create an array that follows GA4’s nomenclature.
By using the custom JavaScript function, you can modify the dataLayer object to conform to the required nomenclature for GA4, without having to make direct changes to the dataLayer itself. This allows you to segment and analyze your data in a way that is meaningful to your business, while still following best practices for tracking ecommerce data in GA4.
Robbe Desmyttere
| LinkedinThis email address is being protected from spambots. You need JavaScript enabled to view it.