I just installed an addToCart event that appears like this in the preview function of Google Tag Manager :
{
event: 'addToCart',
ecommerce: {
currencyCode: 'EUR',
add: {
products: [{
id: '6',
price: 30.5,
variant: '31',
quantity: '1'
}]
}
}
}
The problem is that nothing appears in Google Analytics eCommerce features in Product Adds.
Anyone know why? I call the function directly in the addcart.js in Prestashop.
Edit: Here is the full code:
sendToGA : function(id_product, id_combination, quantity, price){
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': {
'products': [{
'id': id_product,
'price': price,
'variant': id_combination,
'quantity': quantity
}]
}
}
});
}
The dataLayer.push() looks correct. Did you add a GA Event tag to your live container version that fires based on a custom event trigger set to "addToCart" and that is configured with the following options?
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
For instructions see :https://developers.google.com/tag-manager/enhanced-ecommerce#add
Also, ga-debug is a useful Chrome plugin to see if your tag is actually sending data to GA, and what it is sending.
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
I need your help about GTM and UA.
Like this exemple i catch the Event in Google Analytics that's work fine :
// Measure the removal of a product from a shopping cart.
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'remove': { // 'remove' actionFieldObject measures.
'products': [{ // removing a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
In Analytics i can catch the "Event" but where is products data ?
Thanks in advance for your help.
The products data is in the datalayer. You can set set the GA tag to read the dataLayer (alternatively you can set it to use an E-commerce-Variable containing the product data). This is just not very visible in the documentation, you need to click the little green arrow below the code example to expand the description of how to configure your tag (the example assumes you are using and event to send e-commerce data):
If you use a GA setting variable you might need to click "override settings" in the GA tag first.
I have problems organizing a proper GTM debugging for a new project. I was trying to setup a basic tag from their docs, using:
<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({
'event': 'gtm.load',
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
console.log("Pushed");
</script>
as tracking code, and also setting up the basic GTM tag, as suggested by the example: https://developers.google.com/tag-manager/enhanced-ecommerce#details
And using the Window Loaded event type for trigger.
The gtm debugger shows that events are triggered.. But nothing appears in google analytics.
I was also checking, if some messages are being sent to GA using the firebug, and looks like they are sent:
Sent beacon:
v=1&_v=j47d&a=681300097&t=pageview&_s=1&dl=http%3A%2F%2F192.168.0.107%2F%3Fproduct%3Dtest-product&ul=en-us&de=UTF-8&dt=test%20product&sd=24-bit&sr=1366x768&vp=1351x415&je=0&fl=22.0%20r0&_u=SCCAAAALI~&jid=&cid=247695807.1477915334&tid=UA-73812011-1>m=GTM-TWQ9DJ&pal=Apparel%20Gallery&pa=detail&pr1nm=Triblend%20Android%20T-Shirt&pr1id=12345&pr1pr=15.25&pr1br=Google&pr1ca=Apparel&pr1va=Gray&z=280618779
There are a couple of options here, depending on how much control you have with the page code. If you have full control, and if you want you load the ecom data on page load, then you do a dataLayer declaration with that data just before your GTM container:
dataLayer = [{
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
}];
Doing it this way allows you to capture the data on page load with your pageview tag.
You shouldn't do it with an event push, not especially with an event named gtm.load as that is the built-in event that gets pushed when the page assets have completely loaded, so you are probably not seeing data as there is a conflict with your 'page load' since there are now two gtm.load events being pushed.
If you still prefer an event, then just use a different name, eg. myEvent, and then create an event tag to fire on that event.
Lastly don't forget to enable your tag to use the dataLayer in order to capture the ecom info.
Which of these is more optimal?
I have a thank-you page, and I need to load all of my transaction sale info into this page to post it to Google Analytics through Google Tag Manager.
Do I declare the dataLayer using the code below and post it before my GTM code?
dataLayer = [{
'ecommerce': {
'purchase': {
'actionField': {
'id': '40008',
'revenue': '90.00',
},
'products': [{
'name': 'Clothes',
'price': '9.00',
'category': 'Shirt',
'quantity': 10.00,
}]
}
}
}];
or do I push the data into the dataLayer which is created automatically and post it after my GTM code?
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': '40008',
'revenue': '90.00',
},
'products': [{
'name': 'Clothes',
'price': '9.00',
'category': 'Shirt',
'quantity': 10.00,
}]
}
}
});
What is the difference? I will take the data from the dataLayer to Google with a "DOM Ready" event.
You declare the dataLayer above the GTM tag for information that needs to be available immediately on page load. You use dataLayer.push for information that is added after the GTM tag.
I frankly do not think it makes that much difference in most use cases, but if you want to make sure data is available when the page loads you should declare a dataLayer. DOM ready means any push event within the source code has already happened, so it probably does not make a difference for you.
I'm trying to figure out how google enhanced ecommerce tracking works together with google tag manager. I have the following json I'm trying to send with ProductClickEvent:
dataLayer.push({
event: 'ProductClickEvent',
eventCategory: 'Link',
eventAction: 'Product Name',
ecommerce: {
click: {
actionField: {list: 'TopProducts', action: 'click'},
products: [
{
name: 'Product Name',
category: 'category/another category',
id: '8722095',
position: 1,
price: '5.85'
}
]
}
}
});
but when I look at the overview and click on and try to get category list (enhanced ecommerce) I get 'Not set' on all the products.
Do I have to add something to tag manager to hook this up?