We currently have a hotel website which uses Tag Manager to post data into GA4. The Tag Manager embed code is included in the <head> of all pages. On the booking confirmation page there is some inline code, below, which posts generic purchase details to the data layer, from which an Analytics Tag fires in Tag Manager and the purchase event is logged in GA4. This works fine.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'purchase',
ecommerce: {
currency: 'EUR',
value: 123.45,
tax: 0.00,
shipping: 0.00,
affiliation: 'Some Affiliation',
transaction_id: 'ID234',
coupon: '',
items: [{
item_name: 'Item 1',
item_id: 'SKU1',
price: '123.00',
item_brand: 'Our Brand',
item_category: 'Some Category',
quantity: '1'
},
{
item_name: 'Item 2',
item_id: 'SKU2',
price: '0.45',
item_brand: 'Our Brand',
item_category: 'Some Category',
quantity: '1'
}],
facebook_pixel_ecommerce_tracking: 'true',
content_name: 'Content Name',
content_ids: 222,333,444
}
});
Now we would like to use Conversion Tracking for Hotel Campaigns to log conversions in Google Ads and I'm finding it hard to understand how to do this in our implementation from that documentation.
The docs suggest calling the following code on the purchase confirmation page:
gtag('event', 'purchase', {
'send_to': [
'AW-GOOGLE_CONVERSION_ID/GOOGLE_CONVERSION_LABEL'
'transaction_id': 'BOOKING_ID',
'value': PRICE,
'currency': 'CURRENCY',
'items': [{
'id': 'PARTNER_HOTEL_ID',
'start_date': 'CHECK_IN_DATE',
'end_date': 'CHECK_OUT_DATE'
}]
});
Questions:
Am I correct in saying that both snippets of code are effectively required - the first will continue to trigger the GA4 event and the second will trigger the Ads conversion? i.e. We can't merge them into a single event?
We're using the Tag Manager embed code globally across the site, which does not give us access to gtag, so actually using the second code snippet above will error in our case. Assuming we don't want to replace our global Tag Manager embed code with a GTAG script, how can we get the second snippet to work without affecting any existing tags etc?
Many thanks.
Related
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 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.
Im trying to add custom metrics to transactions on google analytics. It must be per transaction. Currently I'm adding transactions like this.
ga('ecommerce:addTransaction', {
'id': '',
'affiliation': '',
'revenue': '',
'tax': '',
'currency': ''
});
ga('ecommerce:addItem', {
'id': '',
'name': '',
'sku': '',
'category': '',
'price': '',
'currency': '',
'quantity': ''
});
Now what I was thinking was adding the following to the transaction but don't quite know if its the right way to do it.
ga('ecommerce:addProduct', {'metric1': hasTransacted});
I know with page views custom metrics can be added to page view like this
ga('set', 'metric1', '1');
ga('send', 'pageview');
But Im trying to add it to a transaction instead.
Any advice would be greatly appreciated.
You should be able to add the metric to the transaction hit, just like in your example with addProduct. Here is a similar question asked here is it possible to send custom variables to Google analytics while using ecommerce extension.
I just switched over to using Google Tag Manager so everything is mostly in one place. I have to say I love it so far, but I think I have a problem with the analytics ecommerce values.
In Google's documentation they show this as an example as per doc using the dataLayer :
<script>
dataLayer = [{
'transactionId': '1234',
'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>
The above is what I followed. Using Tag Assistant plugin for Chrome shows everything working fine and the values come in as expected, BUT... today I have had a few sales and the data is not showing in my GA account...
I also found this page in the help doc which shows a completely different method for adding the ecommerce data with completely different values. Here they use something like this which is how I was doing it with the regular Google Analytics script (not the tag manager) :
ga('ecommerce:addTransaction', {
'id':'1234',
'affiliation':'some site',
'revenue':100.00,
'currency':'USD'
});
ga('ecommerce:addItem', {
'id': '1234',
'name': 'some product',
'sku': 'some sku',
'price': 150.00,
'quantity': 1
});
So, what is the correct method to specify these values when using the Google Tag Manager?
you are mixing two types of tracking - 1) using GTM and then 2) using the actual JavaScript in source code to send the data to GA.
I would stick with GTM, it just makes everything easier. It seems that you have everything ready in DataLayer with product names, so now you just need to create a new Tag with those attributes:
Tag Type = Google / Universal Analytics
Track Type = Transaction
add any other configuration fields you are using across your website...
Then just create a rule when to fire this tag (usually a conversion page - probably the same as your Goal URL in GA setup).
That should do the trick - if a visitor makes a purchase successfully, then after loading the conversion page, GTM will send 1 pageview reqeust and 1 transaction request (they needs to be fired separately).
Also, you might be interested in new version of E-commerce tracking, named Enhanced Ecommerce. It add tons of new and very useful stuff (apart from measuring transaction, it's focused on the whole process of purchasing - browsing products, adding to carts etc.). Here is the manual how to set it up using GTM. It's a bit more difficult, but worth the effort in my opinion.
Hope this helps.
For anyone interested this is what I came up with for my needs. Works fine, values are just examples of course. Sorry for the late response on this one.
//repeat for each product
myProducts.push({
'name': 'some name',
'id': 'some id',
'price': 100.00,
'category': 'some category',
'brand': 'some brand',
'quantity': 10
});
//full push for the dl
dataLayer.push({
'event': 'TrackOrderComplete',
'google_conversion_value': 100.00,
'google_conversion_currency': 'USD',
'ecommerce': {
'purchase': {
'actionField': {
'id': 'some id',
'affiliation': 'some affiliation',
'revenue': 100.00,
'tax': 5.00,
'shipping': 10.00,
'coupon': 'some coupon'
},
'products': myProducts
}
}
});