I'm using Google Tag Manager to implement Google Analytics. I couldn't be able to have e-commerce data.
I'm sending the ecommerce data within the dataLayer object:
dataLayer = dataLayer || [];
dataLayer.push({
PageType: "Confirmation",
ProductID: "2222",
ProductGroup: "",
ProductName: "Test1",
CheckInDate: "2017-09-10",
CheckOutDate: "2017-09-11",
NumberOfAdults: "2",
NumberOfChildren: "0",
NumberOfRooms: "1",
NumberOfNights: "1",
TransactionID: "11111",
Revenue: 60.00,
Destination: "London",
Event: "Purchase",
'transactionId': "11111",
'transactionAffiliation': "Test1",
'transactionTotal': 60.00,
'transactionProducts': [{
'sku': '2222',
'name': 'Test1',
'category': 'Hostel',
'price': 60.00,
'quantity': 1,
}]
});
This object is created before tag manager snippet.
In Google Tag Manager I have only one tag that fires all pages and track type is Page View. I didn't add another tag for transaction since the object occurs before snippet. Enhanced Ecommerce Features is not enabled (I tried when it's enabled but didn't change anything.
In Google Analytics I have enabled Ecommerce but Enhanced Ecommerce.
Dimensions that I have except ecommerce are mapped but ecommerce variables are not.
What should I do to make ecommerce work properly? What do I missing?
The code works properly with the configuration.
What you have to do is create the tag of transaction, this because the dataLayer used is for standard ecommerce and with that technology the transaction hit is send separated. (In Enhance ecommerce this info is send on attached to another hit).
So in this case doesn't matter if the data is pushed before or after the pageview, because is sent with their own trigger.
Greetings
Related
I have an e-commerce site built on Nuxt.js and tracking set up in Google Tag Manager with Analytics. Whenever someone checks out, on the confirmation page I push to the dataLayer the checkout event (code below).
My problem is that sometimes the transaction is duplicated, sometimes the next day. The confirmation page cannot be reloaded or revisited and I get about 2 or 3 duplicates a week. I have seen creating custom tasks in analytics to prevent duplicate transactions but thought there has to be a simpler answer.
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'id': product.id,
'name': product.name,
'category': product.category,
'price': product.price.replace(/,/g, ""),
'quantity': 1
}
},
});
It seems that for some users the it was caching the ecommerce object and pushing on other events. To avoid this I just put the following code after pushing my purchase event:
dataLayer.push({ ecommerce: null });
I have a production site in which my transactions are all recorded in google analytics correctly. Recently we have decided to create a staging environment which will be a replica of production. For this staging environment I created a new google account and hooked it up with Anaytics and Google tag manager. I then updated the code in staging environment to use this UA and GTM account ids.
When I look at my staging GA dashboard now, I see data, however I do not see a 'transactions' heading under 'ecommerce' and there is nowhere I can see my transactions. I have enabled 'ecommerce' for this GA dashboard from Account > Settings. Is there anything else I need to configure to see transactions in the dashboard?
Here is the official GTM dataLayer GA Enhanced Ecommerce spec:
https://developers.google.com/tag-manager/enhanced-ecommerce
Transactions are referred to as "purchase":
https://developers.google.com/tag-manager/enhanced-ecommerce#purchases
<script>
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': '' // Optional fields may be omitted or set to empty string.
},
...
The spec documentation isn't of the highest quality, so for a happy implementation I recommend the following best practices
dataLayer.push not working after GTM script
Always initialize the dataLayer
Always set the "event" property
To facilitate your life even more, you can do:
Event = ecommerce_{action}
Category = Ecommerce
Action = {action} (eg purchase, click...)
The event naming convention will allow you to create 1 single GTM trigger (Event REGEX ecommerce_.*) and therefore 1 single tag to capture all your Ecommerce events (having to create separate triggers/tags for each Ecommerce action is unnecessary and painful)
Once that's done, create a GTM Google Analytics Event tag with the above trigger, and enable Ecommerce in the GA settings:
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 preparing a developer brief to implement Google Tag Manager with Datalayer and Enhanced ecommerce data included in it. I referred to Google Tag manager Enhanced ecommerce guide and Enhanced ecommerce data types specification.
What I want to know is whether the Enhanced ecommerce data pushed via data layer object called "ecommerce" is also available as variables further on in Tag manager, or is it being pushed solely for the purpose of setting up Google Analytics tag in GTM? I want to use those parameters with other tags in GTM also.
The thing is I want to track more parameters about the product for example than the Google Tag manager Enhanced ecommerce guide is specifying. The article says that in order to track more product parameters, you can do that via custom dimensions ( 'dimension1': 'Additional parameter' ), but I assume those parameters are not available as variables in Tag manager later?
So is the correct way to specify those additional parameters outside the data layer object "ecommerce" or inside it?
Thank you.
You can use the e-commerce dataLayer for other tags, as long as the push to the dataLayer contains an event (i.e. a key/value pair where the key is "event" and the name is used to create a custom event trigger). Some parts of the e-commerce dataLayer already have an event (i.e. for productClicks it's {'event': 'productClick'}), others have not (i.e. the e-commerce object for productImpressions). You can then use the e-commerce-object in all tags that are triggered at that event, or after it.
The same goes for any custom dimensions in the dataLayer. You would create the custom dimension in the GA backend in product scope and then add it to each product:
dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {
'list': 'Search Results'
}, // Optional list property.
'products': [{
'name': "test", // Name or ID is required.
'id': "1234",
'price': 12.33,
'brand': "brand1",
'category': "category1",
'dimension1': "customValue1"
}, {
'name': "test", // Name or ID is required.
'id': "1235",
'price': 9.23,
'brand': "brand2",
'category': "category2",
'dimension1': "customValue4"
}]
}
});
You can then access the custom dimension values as part of the product object - e.g. for the custom dimension of the first product you could create a dataLayer variable "ecommerce.products.0.dimension1" ecommerce.click.products.0.dimension1 (that's not a typo - GTM uses an unusual notation for array indicies, namely that you access the index via the dot notation and not via brackets).