Stuck with adding GA standard ecommerce transaction throught GTM

Question

We use GTM to add GA to our website. Standard eCommerce tracking is enabled in GA. To start this project I am testing in our DEV environment which uses the same GTM/GA accounts. Only data from the live site shows up in GA so DEV is filtered out (I'm not sure how this is done yet). I have two problems.

How do I set up the 'transactionProducts' to loop through the items in the cart and display them separately instead of all smooshed together?
What do I do to see results in GA from the DEV site - I can't test this live - unless I create a noindex/nofollow static page on the live site with fake data to see if it will send it to GA.

I created the GTM eCommerce tag per GA directions: Tag Type: Google Analytics: Universal Analytics Track Type: Transaction Google Analytics Settings: Enable overriding settings in this tag (we have a GA variable but I've decided to not use it incase it might interfere) Tracking ID: UA-########-#

I created the GTM eCommerce trigger per GA directions: Trigger Type: Page View (the DataLayer comes way after the GTM script) This trigger fires on: Some Page Views Fire this trigger...: Page URL contains /order/confirmation

The confirmation page is it's own page that comes after submit order page.

The DataLayer is thus:

<script>
    if(window.location.pathname == "/order/confirmorder"){

    // capture values from the spans with the following classes
    var GAtransactionId = jQuery(".lblOrderNumber").text();
    var GAtransactionTotal = jQuery(".lblTotal").text();
    var GAtransactionTax = jQuery(".lblTax").text();
    var GAtransactionShipping = jQuery(".lblShippingHandling").text();

    // transactionProducts data from the spans with the following classes
    var GAsku = jQuery(".lblProductSKU").text();
    var GAname = jQuery(".lblProductSKU").text();
    var GAprice = jQuery(".lblYourPrice").text();
    var GAquantity = jQuery(".lblOrderItemQty").text();

    // Checking my variables before they go thru
    alert("GAtransactionId: " + GAtransactionId + " GAtransactionTotal: " + GAtransactionTotal + " GAtransactionTax: " + GAtransactionTax + " GAtransactionShipping: " + GAtransactionShipping + " GAsku: " + GAsku + " GAname: " + GAname + " GAprice: " + GAprice + " GAquantity: " + GAquantity);

    window.dataLayer = window.dataLayer || [];
            dataLayer.push({
                 'transactionId': GAtransactionId,
                 'transactionTotal': GAtransactionTotal,
                 'transactionTax': GAtransactionTax,
                 'transactionShipping': GAtransactionShipping,
                 'transactionProducts': [{
                         'sku': GAsku, // returns each item - but smooshed together
                         'name': GAname, // returns each item - but smooshed together
                         'price': GAprice,  // returns each item - but smooshed together
                         'quantity': GAquantity // returns each item - but smooshed together
                 }]
            });
        }
    </script>

In GTM Preview mode I do see the Current values of the Data Layer: but if I have more than one item in my cart the 'transactionProducts' items get all smooshed together.

transactionProducts: [
{
    sku: 'ABCDEFGHIJK''
    name: 'Blue CoatRed Coat',
    price: '$30.99$31.99',
    quantity: '11'
}
]

How do I loop through 'transactionProducts' to show each item in the cart separately? I guess a for loop might do but how would I set it up and then where would I add it to the DataLayer so it doesn't break anything? Also, do I need to remove the '$' sign from the result (I know how to do that)?

And where might I find a filter that prevents data from the DEV site from being sent through - so I can temporarily disable it while I test? And do I need to publish the GTM tag/trigger to have it actually send data or can I use Preview mode and expect to see DataLayer data in GA Conversions > Ecommerce > Overview?

Someone dinged me for not showing research effort. Here is where it all begins: https://support.google.com/tagmanager/answer/6107169?hl=en. After that it's Googling my problem that has taken me to Simo Ahava's blog, Optimize Smart blog, Analytics Mania and many other posts and StackOverflow articles that don't solve the issue in the end. — S. Jensen, Feb 25 '20 at 21:29

score 0 · Answer 1 · answered Feb 26 '20 at 12:48

you have to construct your items object looping through product elements in your cart instead of getting combined text value of all spans: some sample code might look like:

var items = []
$('.some-product-selector').each(function () {
  items.push({
    'sku': $(this).find('.lblProductSKU').text(),
    'price': $(this).find('.lblYourPrice').text()
    // the same pattern for other fields
  })
})
// ...
dataLayer.push({
        'transactionId': GAtransactionId,
        'transactionTotal': GAtransactionTotal,
        'transactionTax': GAtransactionTax,
        'transactionShipping': GAtransactionShipping,
        'transactionProducts': items // use your items here
});

Awesome. You solved problem one: How do I loop through the items in the cart and send that data. — S. Jensen, Feb 26 '20 at 15:44

Stuck with adding GA standard ecommerce transaction throught GTM

1 Answers1