track product name multiple products

Question

I've very limited Javascript skills, and I am trying to put together a script that goes beyond my skills.

I am using Google Tag Manager in order to setup a script that captures the product name of a product that a user adds to his/her shopping cart.

So the thought is that when a user clicks an "add to cart" button, I also capture the name of the product that the user adds and store it in a variable. My problem is that I've no idea on how to do this when there are multiple products on the same page.

What would the script look like in order to capture the name of the product that is being added to the cart?

Page example can be found here: cxshop.azurewebsites.net

Answer 1

First of all you need to crate variable, which will find your product name

1) Go to Variables -> User-Defined Variables -> New

2) Type -> Custom JavaScript

3) Name: Product Name

4) Code:

function(){    
    var element = {{Click Element}};
    return $.trim($('h2.product-title, h1[itemprop="name"]',element.closest('div[data-productid]')).text());
}

Create trigger

1) Go to Triggers -> New

Name: Add to cart trigger

Type: Click - All elements

Click Element - matches CSS selector - .product-box-add-to-cart-button, .add-to-wishlist-button

Create tag

1) Go to Tags -> News

Name: Add to cart tag

Type: Universal Analytics

Track type: Event

Fill data, what you want to send into GA. For example:

Category: Add to cart

Action: Click

Label: {{Product Name}}

Set trigger: "Add to cart trigger"