Stuck with adding GA standard ecommerce transaction throught GTM - google-analytics

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?

Answer 1

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
});