I'm using Google Tag Manager tag to push checkout data to Universal Analytics.
Tag
Tag Type: Universal Analytics
Track Type: Event
Category: Ecommerce
Action: Checkout
Enhanced E-commerce: true
Data Layer: true
Fire On: Checkout
Trigger
Name: Checkout
Event: Custom Event
Fire On: checkout
JavaScript
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': step, 'option': option }
}
}
});
Chrome Tag Assistant extension reports show that all values are passed to Universal Analytics collect action.
In Behavior > Events > Top Events I can see that events were properly registered by UA:
Unfortunately Conversions > E-commerce > Shopping Analysis > Checkout Behavior doesn't show any data... my question is: "Why ?"
It looks like you are not passing product data in your dataLayer push
https://developers.google.com/tag-manager/enhanced-ecommerce#checkoutstep (edited)
Related
I am trying to send e-commerce events to google analytics using gtm (Google Analytics : Universal Analytics), this is my code
const loadGa = (next, retry) => {
if (!retry) retry = 0;
if (typeof ga === 'function') {
return next(null);
}
if (retry > 10) return next(new Error('Can not load google analytics'));
retry++;
setTimeout(() => loadGa(next, retry), 500);
}
const addProductGa = product => {
loadGa((err) => {
if (err) return console.error(err);
dataLayer.push({
event: 'addToCart',
ecommerce: {
currencyCode: 'EUR',
add: {
products: [{
name: product.name,
id: product.id,
price: product.acquisitionAmount / 100,
quantity: 1
}]
}
}
});
})
}
const purchaseGa = (charge, product) => {
loadGa((err) => {
if (err) return console.error(err);
dataLayer.push({
ecommerce: {
currencyCode: 'EUR',
purchase: {
actionField: {
id: charge.id,
revenue: charge.amount
},
products: [{
name: product.name,
id: product.id,
price: product.acquisitionAmount / 100,
quantity: 1
}]
}
}
});
})
}
For the example if I call the addProductGa
call to GTM
call to analytics
send basic tracking data
It seems that my e-commerce data are not sent, I can not see them in the network call to analytics server and I have no data on Google Analytics
What I can say:
By default dataLayer.push doesn't send data anywhere, it just feeds the dataLayer. You need GTM triggers and tags to send the data, which brings me to the next point
Missing event key in some of your dataLayer.push calls (eg purchase): I know you're following examples given in the GTM ecom spec but IMO it's confusing: some of them show an event-based collections (with the event key set), others pageview-based collection (without the event key set). To simplify your setup you should:
Always set the event key
Configure a trigger to handle those events
Full setup: once you have an event property on all your dataLayer calls, you can generically track them all using a setup similar to the one shown below (you should change the trigger to be a regex matching all your ecommerce events, also don't forget to enable Enhanced Ecommerce in the GA settings).
If the issue persists you should enable the GTM preview/debug which will tell you why certain tags aren't firing and will show you the debug of the dataLayer values it contains
If GTM confirms tags are firing but you don't see GA tracking on the network, you want to use the Chrome GA debugger which will show you in details what's happening and potentially why hits are not sent.
Don't forget to publish GTM once you have it all troubleshooted and working
how to implement google tag manager add to cart event using code ?
I want to implement add to cart event tracking using code in my Wordpress website.
You can track events on Google Tag Manager by sending a dataLayer.push event from your website, by using JavaScript.
If you are trying to implement add to cart on enhanced ecommerce you could use the following template from Google's documentation:
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
Once you implement this code on your website, all you need to do is to create an event tag, enable overriding settings, set the Enable Enhanced Ecommerce Features value to True and check the Use dataLayer box.
The trigger to this tag should be a custom event, and the event name should be addToCart, the same name you sent in the dataLayer.
Now, if all you want to do is to track the add to cart event, and you are not interested on enhanced ecommerce, you could send something like:
dataLayer.push({
'event': 'addToCart',
});
This way you wont need to enable overriding settings or to send information about the products.
To learn more about Enhanced Ecommerce take a look at: Enhanced Ecommerce (UA) Developer Guid
I want to use GTM to track eCommerce transactions. This is a test for client environments where the code might be placed after the GTM code snippet which is why using Dom Ready as a trigger for the transaction tag is not reliable.
This is my test code:
<body>
<!-- Google Tag Manager -->
<script>window.dataLayer = window.dataLayer || [];</script>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M4RNT2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<div class="container">
<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
'transactionId': '32698',
'transactionAffiliation': 'Acme Clothing',
'transactionTotal': 38.26,
'transactionTax': 1.29,
'transactionShipping': 5,
'transactionProducts': [{
'sku': 'DD44',
'name': 'T-Shirt',
'category': 'Apparel',
'price': 11.99,
'quantity': 1
},{
'sku': 'AA1243544',
'name': 'Socks',
'category': 'Apparel',
'price': 9.99,
'quantity': 2
}]
});
</script>
</body>
As you can see the eCommerce code is taken straight from the Google documentation here.
I made sure that the pageview tag I'm firing works and I can see myself on the realtime view.
The issue is that no matter what I do to trigger the transaction tag, no eCommerce transactions are shown in Google Analytics.
Here is what I've tried:
Using 'event': 'eCommerce' right after the transaction products or in a separate script tag after the transaction code push and then using that event as a trigger
I've created a dataLayer variable in GTM that references transactionId and defaults it to false and then using event gtm.dom as a trigger with a filter for transactionId does not equal false
The frustrating part is that I have the GTM preview window open and it looks perfectly like it should work.
In attempt 1 above it shows a sequence of pageview, message, eCommerce DOM ready, page load where the dataLayer after message is correctly filled with transaction data and the eCommerce tag firing on the eCommerce event (i.e. data is in the dataLayer for sure.
In attempt 2 the dataLayer after Message is filled with transaction data and the eCommerce tag is fired on the DOM Ready event.
This has been going on for days now so it isn't a case of "the data hasn't shown up in GA yet". I am using the right UA tag since both tags reference the sasme onstant GTM variable and since I see myself in realtime the pageview tag uses the right UA and therefore so does the transaction tag. And yes eCommerce is obviously enabled in the view settings.
Simply pushing the transaction data to the data layer will not trigger the tracking to work. You need an action such as a pageview to pick up the transaction data and send it.
If you are unable to add the data layer before the GTM snippet, my recommendation would be the following:
Convert your code to be in the Enhanced Ecommerce format (provided below)
Add a custom event, in this case it is named trackTrans.
Add an event tag in GTM, labeled similar to Send Transaction. You can specify whatever values you'd like the for the event category/action/label.
In the event tag go to more settings > Ecommerce Features, enable Enable Enhanced Ecommerce Feature and Use data layer
Setting the trigger to be a Custom Event and specify trackTrans for the value
In your view settings make sure to enbable enhanced ecommerce tracking
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': ''
}]
}
},
'event' : 'trackTrans'
});
With what I have described above, the page will load then an event will fire and send the ecommerce transaction data with it.
As per your reference to the Google documentation, you need to
Place this code above the Google Tag Manager container snippet so that the data layer is ready when Google Tag Manager fires the Google Analytics tag asynchronously.
I have found a way to make it work. Ryan's answer was close but our experience with using event based triggers was spotty at best. I am now using the following setup that essentially guarantees transaction pickups by GTM unless the code is dynamically injected after page load via JS.
Here is how:
I created a dataLayer Variable which references transactionId and set its default to false
I created a trigger of type Custom Event, set the event to gtm.dom and a filter for the dataLayer variable I created to be not equal to false.
This ensures an actual transaction on the page overwrites the default value of false in that GTM variable and the gtm.dom trigger ensures that all code has loaded.
We have already tested this with clients on varying degrees of awfullness in terms of GTM implementations.
I am running a single page checkout and the pagevies are showing fine. however the purchase transactions doesn't seem to be being processed in Google analytics.
I have the data layer up
and it seems to be registering the purchase event,
I have tag enabled with a page view on gtm.dom which has the enhanced ecommerce tag ticked,
but still nothing .
Here is the output from the Datalayer if any one can help would be really appreciative :
[
{
"ecommerce":{
"purchase":{
"actionField":{
"id":"145000010",
"revenue":295,
"tax":"0.0000",
"shipping":"5.0000",
"coupon":""
},
"products":[{
"id":"ace002",
"name":"perfume10Lt",
"price":"295.0000",
"quantity":"1.0000"
}]
},
"currencyCode":"USD"
},
"event":"purchase"
},
{
"gtm.start":1438797700099,
"event":"gtm.js"
},
{
"ecommerce":{
"impressions":0,
"promoView":0
}
},
{
"event":"gtm.dom"
},
{
"event":"gtm.load"
}
]
Added as requested by comments: The tag seems be being called at GTM.dom so i know its definitely running.
Here is the tracking tag:
Here is the image from the trigger
Change your trigger to fire the tag on the 'purchase' event instead. It may be failing because the ecommerce data layer hasn't been pushed yet before the gtm.Dom event happens.
Is the following setup of Google Tag Manager and Analytics correct regarding the variable use, naming etc.
Tag: GA tracking code
Tag: Goals w. macro below
Macro: (As specified in post) Event Action > eventAction; Event Category > eventCategory; Event Label > eventLabel etc.
Rules: GA Event > GAevent
Triggered by JS: dataLayer.push({ 'event':'GAevent', 'eventCategory':'Forms', 'eventAction':'Send', 'eventLabel':'Request' })
In Google Analytics:
1st Goal: Category > Forms; Action > Send; Label > Request Form
2nd Goal: Category > Forms; Action > Send; Label > Contact Form
Have you created a tag for Google Analytics Event?
You'll have to map the event category to eventCategory, etc. And then set the rule to GA Event equal to GAevent.(see attached)