Why my dataLayer is not receiving data?
In my GTM I've created a event trigger for "purchase".
Maybe there's something with structure of my dataLayer code?
I have no idea at this moment.
I would appriciate any help. Thanks in advance
Here's my frontend code:
<Head>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'purchase',
'transactionId': 'transaction.id',
'transactionTotal': transaction.total,
'transactionTax': transaction.tax,
'transactionShipping': transaction.shipping,
'transactionProducts': [
{
'sku': 'product.id',
'name': 'product.name',
'category': 'product.category',
'price': product.price,
'quantity': product.quantity
}
]
});
</script>
</Head>
Is the data not populating in the dataLayer code or gtm is not firing as expected?
If its gtm ensure the dataLayer is placed above the gtm container code or it cant access it.
From the code you provided, it isn't clear what kind of order of operations you have.
Ideally, the order should be this
dataLayer declaration
GTM include script
dataLayer.push()
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'm trying to set up ecommerce tracking using Google Tag Manager however I cannot get the data to appear within google analytics?
Use such code in header.tpl
{if isset($page_name) && $page_name|escape:'html':'UTF-8' == "order-confirmation"}
<script type="text/javascript">
window.dataLayer = window.dataLayer || []
dataLayer.push({ldelim}
'transactionId': '{$id_order}',
'transactionTotal': {$total_paid_tax_incl},
'transactionProducts': [
{foreach from=$products item=product}
{ldelim}
// List of productFieldObjects.
'sku': '{$product.id}',
'name': '{$product.name}', // Name or ID is required.
//'category': '{$product.X}',
'price': {$product.price},
'quantity': 1 // Optional fields may be omitted or set to empty string.
{rdelim}
{if !$smarty.foreach.product.last},{/if}
{/foreach}
]
{rdelim});
</script>
{/if}
But nothing works
Your datalayer declaration needs to be above the GTM snippet.
Also the noscript part of GTM should be immediately after .
I think you should look through the documentation incase you have other implementation issues:
How to install GTM: https://support.google.com/tagmanager/answer/6103696?hl=en&ref_topic=3441530
Ecommerce with GTM: https://support.google.com/tagmanager/answer/6107169?hl=en
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.
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.
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.