Capturing Product Names and Values

Hi Marviene,

The add to cart event only includes one product per event thus using ecommerce.add.products.0.name should be sufficient.

On the checkout page you can have multiple products in the cart and the ecommerce action is not add thus this variable will not work:

ecommerce.add.products.1.name

You may want to try

ecommerce.checkout.products.1.name

… but to get all the product names you can create a custom JS variable on the GTM UI and use this function:

function() {
  var ecom = {{ecommerce}},
      prod_names = [];

  for( var i=0; i<ecom.checkout.products; i++ ) {
    prod_names.push(ecom.checkout.products[i].name);
  }

  return prod_names.join(",");
}

For this code to work you need to also create a GTM data layer variable where you read the ecommerce datalayer item and set it to “Version 1”.

This is really interesting… Can you be a little more specific about how to implement this?

I would be interested in doing something similar! ??

Hi @myatix,

Which part of my previous post needs more explanation? ??
I would like to help but I need to know where to be more specific?

Not clear on where and how to implement the JavaScript code? Sorry I’m not a developer! :/

Thanks, it is now more clear to me how I can help you.

The mentioned codes are to create GTM variables. If you open GTM UI and click on the Variables item on the left pane you will see so called GTM variables that can be used to customize and improve your tags and triggers with custom data.

Clicking on the New button on that page you will need to select a variable type. With “add to cart” you will only have to read one product ID/Name as only one product can be added to the cart at a time.
Because of this you can select the “Data Layer Variable” here and enter ecommerce.add.products.0.name (or .id at the end)

On the checkout page the “products” list could contain multiple products thus you need a more complicated code the get the names or IDs of products in your cart.

In that case, while creating a GTM variable you will need to select the “Custom JavaScript Variable” type and enter the JS code below.

After you have created those variables, you can use them for example to pass this data to a GA event tag that is being fired on the gtm4wp.addProductToCartEEC event.

Does this makes things more clear for you?

I think I have it! Thank you so much for the JavaScript Custom Variable. I’d have done it the long hard way otherwise.

If I understand it correctly then once I have these two new variables in place I am done since I have already created separate triggers for each of these (that are attached to tags):
gtm4wp.addProductToCartEEC
gtm4wp.productClickEEC
gtm4wp.removeFromCartEEC
gtm4wp.checkoutOptionEEC
gtm4wp.changeDetailViewEEC

… on a somewhat related tangent… I don’t understand the difference between checkout option and change detail view.

I’m really new at this and until your plugin I struggled for years with GTM. Your plugin and clear way of answering questions has been invaluable to me. Thank you so much! You are amazing.

• This reply was modified 7 years ago by Marviene.
• This reply was modified 7 years ago by Marviene.

I am getting errors. I think I am not understanding how to do this:

“For this code to work you need to also create a GTM data layer variable where you read the ecommerce datalayer item and set it to “Version 1”.”

I created a data layer variable with ecommerce.checkout.products.1.name using Version 1 and I’m still getting errors. Same thing with ecommerce.checkout.products.name.

This is the error, thrown on the Custom JavaScript variable: Unknown variable ‘ecommerce’ found in another variable. Edit the variable and remove the reference to the unknown variable.

I copied and pasted it exactly, which is why I think I messed up elsewhere:
function() {
var ecom = {{ecommerce}},
prod_names = [];

for( var i=0; i<ecom.checkout.products; i++ ) {
prod_names.push(ecom.checkout.products[i].name);
}

return prod_names.join(“,”);
}

• This reply was modified 7 years ago by Marviene.
• This reply was modified 7 years ago by Marviene.
• This reply was modified 7 years ago by Marviene.