I'm trying to set up ecommerce tracking using Google Tag Manager however I cannot get the data to appear within google analytics?
https://support.google.com/tagmanager/answer/6107169?hl=en
From using the example provided on the above link, this is my code:
<html>
<head>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'transactionId': '1238393768',
'transactionAffiliation': 'Website Name',
'transactionTotal': 105.78,
'transactionTax': 21.156,
'transactionShipping': 18.00,
'transactionProducts': [
{
'sku': '97',
'name': 'Test Product 1',
'category': 'Test Category One, Test Category Two',
'price': 13.99,
'quantity': 24
},
{
'sku': '97',
'name': 'Test Product 2',
'category': 'Test Category One, Test Category Two',
'price': 3.99,
'quantity': 22
},
]
});
</script>
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-CODE');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-CODE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
</body>
</html>
Can anyone advise why this isn't working and how I can get the data to appear within Google Analytics?
One thing I don't understand is how / where it knows to add the data to my analytics account? Is there anything else I need to do or any configuration needed within GTM or GA?
Thanks.
You can not push before the scripts of tag manager. It should be a initialization of the variable. Like:
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
EDIT: Documentation https://developers.google.com/tag-manager/devguide
Related
I am trying to integrate GTM into my single page NextJS app. I inject my script into the _document.js as suggested:
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];`
}} />
<script
dangerouslySetInnerHTML={{
__html: `(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=
' https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${getGtmTrackingId()}');`,
}} />
</Head>
<body>
<noscript
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${getGtmTrackingId()}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
}}
/>
<Main />
</body>
</Html>
My question is this: every time i navigate through pages, I see that dataLayer still contains the events that were fired on previous pages. Do I need to reset my dataLayer on every url change? Do I reach the limits of GTM if I do not reset my dataLayer on url change or is it okay to include all events that fired?
I tried resetting the dataLayer like this, but if I do that gtm stops sending events.
In my _app.js file:
useEffect(() => {
router.events.on('routeChangeStart',() => {window.dataLayer = []});
}, [router.events]);
Thanks.
try this on before you push a page view event:
window.dataLayer.push(() => {
window.google_tag_manager["your_container_id"].dataLayer.reset()
})
I've an ecommerce site and I'm tracking the Orders in the Thank-you page sending all the transaction data within the DataLayer variable.
The transaction data is been sent and recorded but I'm getting this error message when debugging with Tag Assitant Chrome Extention:
Event hits must be sent after a pageview hit, but this event hit was
not preceded by a pageview
HTML of Thank-you page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Stickers Gallito Perú">
<meta name="google-site-verification" content="fGkwUY2RcijkVzB6DiwIuAToP1y5xw8ECXQQabRAOIM"/>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<title>Stickers Gallito</title>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'eec.purchase',
ecommerce: {
currencyCode: 'PEN',
purchase: {
actionField: {
id: 5,
affiliation: 'Stickers Gallito E-Commerce',
revenue: 250.00,
shipping: 15.00,
coupon: ''
},
products: JSON.parse('[{"id": 5, "sku": "S5", "name": "Stickers cuadrados", "price": "250.00", "size": "3cm x 3cm", "quantity": 1}]')
},
}
});
</script>
<!-- Google Tag Manager -->
<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 =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-TPXWL88');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TPXWL88"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
#Rest of HTMl body...
I thought that the DataLayer should be before the Google Analytics code, Am I wrong? Or How should I fix this?
The dataLayer can be filled before the GTM script, but an event is best associated to a yet fired pageview (not mandatory but recommended).
You could associate your e-commerce data to a pageview instead of an event, and remove the part event: 'eec.purchase', to do so.
I am absolutely not enable to get Enhanced e-commerce working.
Please do not send be google tutorials I went like 10 times over them. (Please send me some tutorials for absolute dumb people how to set it really step by by step)
I am using a debugger and not seeing a thing.
NOTE: I can see a page view inside Google Analytics. But adding a item to a cart or purchasing a transaction I can not see inside Google analytics UI.
<head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-1', 'auto'); // this is hidden UA
ga('send', 'pageview'); /*FIRST PAGE VIEW CALLED HERE */
ga('require', 'ec');
ga('ec:addProduct', { // Provide product details in an productFieldObject.
'id': 'P12345', // Product ID (string).
'name': 'Android Warhol T-Shirt', // Product name (string).
'category': 'Apparel', // Product category (string).
'brand': 'Google', // Product brand (string).
'variant': 'black', // Product variant (string).
'price': '29.20', // Product price (currency).
'coupon': 'APPARELSALE', // Product coupon (string).
'quantity': 1 // Product quantity (number).
});
ga('ec:setAction', 'purchase', { // Transaction details are provided in an actionFieldObject.
'id': 'T12345', // (Required) Transaction id (string).
'affiliation': 'Google Store - Online', // Affiliation (string).
'revenue': '37.39', // Revenue (currency).
'tax': '2.85', // Tax (currency).
'shipping': '5.34', // Shipping (currency).
'coupon': 'SUMMER2013' // Transaction coupon (string).
});
ga('send', 'pageview');
</script>
</head>
This si example from their tutorial. https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-transactions
I have got this code inside my head attribute.
Thanks for help.
I am successfully using Google analytics ecommerce to track my orders/transactions but I am having difficulty reversing the test orders I have made. I have followed the instructions as per Google and created the following plain HTML page to run and counter these transactions:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Pilgrim 55</title>
<meta charset="UTF-8" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxxx-x', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<script>
ga('require', 'ecommerce', 'ecommerce.js');
ga('ecommerce:addTransaction', {
'id': '16',
'affiliation': 'Pilgrim 55',
'revenue': '-35.99',
'shipping': '0.00',
'tax': '0.00',
'currency': 'GBP'
});
ga('ecommerce:addItem', {
'id': '16',
'sku': 'p55serumfacialaloeretinol',
'name': 'Aloe Retinol Facial Serum',
'category': '',
'price': '35.99',
'quantity': '-1',
'currency': 'GBP'
});
ga('ecommerce:send');
ga('ecommerce:clear');
</script>
</body>
</html>
There are no js errors when I run this page. I have checked the transaction ID.
Basically, nothing happens in Google analytics.
I am trying to implement ecommerce tracking for a site i am working on but running into some problems. I have read the docs, debugged with the plugin for chrome, but I just can't seem to get it working.
This is the test code I have written (this will eventually be generated by PHP which isn't a problem):
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('require', 'ecommerce', 'ecommerce.js');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');
<?php
//log product details view
echo "ga('ecommerce:addTransaction', {
'id': 'P129945',
'affiliation': 'test item',
'revenue': '10.00',
'shipping': '5.00',
'tax': '1.00'
});";
echo "ga('ecommerce:addItem', {
'id': 'P129945',
'name': 'test item',
'category': 'Apparel',
'brand': 'abc',
'variant': 'red'
});";
echo "ga('ecommerce:send');";
?>
</script>
The analytics debugging tool shows all the transaction & item information and everything looks to be working, however nothing shows up in analytics. Other events are registered as normal. I also tried using the new enhanced ecommerce suite & commands but ran into the same problem.
Any help with this would be greatly appreciated!
Are you sure that ecommerce is enabled in the viewsettings? It's disabled by default.
Make sure you're using the 'raw' view. (Admin -> View -> RAW (from select field)).
There might be some filters applied, like IP exclusion (hides all transactions made from certain ip). There shouldn't be anything here by default, but if someone else was managing analytics before you, there might be.
Also, it may take up to 24 hours for the data to appear.