I am running a single page checkout and the pagevies are showing fine. however the purchase transactions doesn't seem to be being processed in Google analytics.
I have the data layer up
and it seems to be registering the purchase event,
I have tag enabled with a page view on gtm.dom which has the enhanced ecommerce tag ticked,
but still nothing .
Here is the output from the Datalayer if any one can help would be really appreciative :
[
{
"ecommerce":{
"purchase":{
"actionField":{
"id":"145000010",
"revenue":295,
"tax":"0.0000",
"shipping":"5.0000",
"coupon":""
},
"products":[{
"id":"ace002",
"name":"perfume10Lt",
"price":"295.0000",
"quantity":"1.0000"
}]
},
"currencyCode":"USD"
},
"event":"purchase"
},
{
"gtm.start":1438797700099,
"event":"gtm.js"
},
{
"ecommerce":{
"impressions":0,
"promoView":0
}
},
{
"event":"gtm.dom"
},
{
"event":"gtm.load"
}
]
Added as requested by comments: The tag seems be being called at GTM.dom so i know its definitely running.
Here is the tracking tag:
Here is the image from the trigger
Change your trigger to fire the tag on the 'purchase' event instead. It may be failing because the ecommerce data layer hasn't been pushed yet before the gtm.Dom event happens.
Related
I am tracking purchases on a site in google analytics by sending a custom event from JavaScript to Google Tag Manager on the "successful purchase" page. Most of the time this works perfectly, but in some cases it seems the event just doesn't arrive to Google Analytics.
Initially I thought that maybe visiting the success page couldn't be relied on, but then I added an additional call after triggering the event that logs the sending of the event to my database. To my surprise, the events so far always get logged to my database, but they still sometimes don't show up in analytics. This is the code that does this:
const event = {
'event': 'purchase',
'ecommerce': {
'transaction_id': orderData.id,
'value': orderData.price,
'currency': 'EUR',
'coupon': orderData.CouponCode,
"items": orderData.services.map(elem => ({
'item_id': elem.id,
'item_name': elem.name,
'price': elem.price,
'item_type': elem.type,
'quantity': 1,
})),
}
};
// Send GA4 purchase event
dataLayer.push(event);
// Log to my db
fetch("/ajax/trackAnalytics", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
event,
cleaning_id: orderData.id
})
})
Let's take the 2nd of December as an example. According to google analytics these were the incoming purchases:
But in my database I received the following logs (I redacted the "items" field because it contained customer information but it shouldn't matter):
{
"event":"purchase",
"ecommerce":{
"transaction_id":6520,
"value":73.89,
"currency":"EUR",
"coupon":null
},
"timestamp":"2022-12-02T15:10:47+00:00"
}
{
"event":"purchase",
"ecommerce":{
"transaction_id":6519,
"value":67.99,
"currency":"EUR",
"coupon":null
},
"timestamp":"2022-12-02T15:57:44+00:00"
}
{
"event":"purchase",
"ecommerce":{
"transaction_id":6487,
"value":197.05,
"currency":"EUR",
"coupon":null
},
"timestamp":"2022-12-02T19:17:54+00:00"
}
As you can see, everything matches up except the transaction with ID 6520.
I tried creating orders that contained the exact elements 6520 did but I wasn't able to reproduce the issue that way. I also tried doing the same with a tracker blocker enabled on my browser but still the data came through.
The tag manager setup is the following:
Purchase trigger:
Purchase tag:
Sometimes if the user installed the ad block extension on their browser.
These kind of the analytic tags will not fire at all.
You said you tried installed some kind of this and it will work. This mean you might installed the different blocker as the user's.
Not every kind of blocker will block GA request. But still some of them did.
There are still many reasons cause the GA4 hit not sent. But if we are using the client side GTM container. It will always have some different with backend data. Just more or less.
As Darrellwan suggested, adding the line window.dataLayer = window.dataLayer || []; before dataLayer.push seems to have solved the problem, but it's not 100% clear.
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
In "FullCalendar" I could add an event using "addEventSource" by array manually, however, I could not succeed adding the event through Google Calendar ID.
$('#calendar').fullCalendar("addEventSource",{
events: [
{
title : 'event1',
start : '2019-02-01'
}
]
});
THE BELOW SNIPPET NOT GETTING THROUGH. PLS ASSIST
$('#calendar').fullCalendar("addEventSource",{
events: {
googleCalendarId: 'abcd1234#group.calendar.google.com',
}
});
FYI by FUllcalendar: Source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar.
Firstly please ensure you followed all the steps in the documentation (https://fullcalendar.io/docs/google-calendar) beforehand otherwise it won't work.
Secondly, your object structure is wrong. The events wrapper should not be there when specifying an event source. Perhaps you confused the events option in fullCalendar as being part of the structure required for an event source object, which is documented here: https://fullcalendar.io/docs/event-source-object
Specifically it documents the structure for a google calendar to be the source:
{
googleCalendarId: 'abcd1234#group.calendar.google.com',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
So I suggest you change your code as follows, to match the documented object structure. Basically you just remove the erroneous events bit:
$('#calendar').fullCalendar("addEventSource", {
googleCalendarId: 'abcd1234#group.calendar.google.com',
});
The FullCalendar docs show the following for multiple Google calendars:
eventSources: [
{
googleCalendarId: 'abcd1234#group.calendar.google.com'
},
{
googleCalendarId: 'efgh5678#group.calendar.google.com',
className: 'nice-event'
}
]
This does not work:
eventObject.push({
googleCalendarId
});
eventSources: [ eventObject ]
How do I turn this into an array that will show multiple google calendars that I would dynamically be able to add?
What does work is:
eventObject.push({
id: eventId[i],
title: name[i],
start: startTime[i],
end: endTime[i],
description: evDes[i].description
});
eventSources:
[
{
events: eventObject
}
]
But this is not the same thing. Importantly, I want to be able to use both and have both the google calendar and the json source that I'm parsing out this way. How do I do that?
Ok, figured it out. So if I'm iterating through a list of google calendars, I would have this: (I'm using C# and MVC to get the list of calendars into the Javascript - that's what "model" refers to here)
CalendarId = model.data[i].calendar_source;
gcalObject.push({
googleCalendarId: CalendarId,
And then, in the calendar init, I'd have this:
eventSources: gcalObject,
And then I can separately have events that do not come from a Google calendar in the regular events object:
events: eventsObject
So problem solved. Google calendar events go in eventSources and other events go in events. And eventSources sits at the same hierarchical level as events.
I'm using Google Tag Manager tag to push checkout data to Universal Analytics.
Tag
Tag Type: Universal Analytics
Track Type: Event
Category: Ecommerce
Action: Checkout
Enhanced E-commerce: true
Data Layer: true
Fire On: Checkout
Trigger
Name: Checkout
Event: Custom Event
Fire On: checkout
JavaScript
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': step, 'option': option }
}
}
});
Chrome Tag Assistant extension reports show that all values are passed to Universal Analytics collect action.
In Behavior > Events > Top Events I can see that events were properly registered by UA:
Unfortunately Conversions > E-commerce > Shopping Analysis > Checkout Behavior doesn't show any data... my question is: "Why ?"
It looks like you are not passing product data in your dataLayer push
https://developers.google.com/tag-manager/enhanced-ecommerce#checkoutstep (edited)