redux-beacon: enhanced ecommerce actions not being fired - google-analytics

I'm using redux-beacon to manage google analytics enhanced ecommerce actions. What I'm noticing is that pageview events are being fired off fine but the enhanced ecommerce actions are not being sent. It's like they are being stored in the datalayer but no network request is being triggered. I'm new to enhanced ecommerce tracking so perhaps I'm missing something?
For example, here I have the events which are triggered when viewing a product:
export const analyticsEcommerceProduct = trackEcommProduct((action) => {
const { product } = action;
return {
id: product.id,
name: product.title,
category: product.type
};
}, CLIENT_TAG);
export const analyticsEcommerceAction = trackEcommAction((action) => {
const { actionType, id, revenue } = action;
return {
actionName: actionType,
id,
revenue
};
}, CLIENT_TAG);
Which are added to my eventMap:
const eventsMap = {
CLIENT_ANALYTICS_PAGEVIEW: clientPageView,
CLIENT_ANALYTICS_ECOMM_PRODUCT: analyticsEcommerceProduct,
CLIENT_ANALYTICS_ECOMM_ACTION: analyticsEcommerceAction
};
const middleware = createMiddleware(eventsMap, GoogleAnalytics(), GoogleTagManager());
Now when I land on the product page the analyticsEcommerceProduct and analyticsEcommerceAction events are firing as expected but no network request is made to send this information:
Is there some sort of event to 'send' the data that I need to add?

Is there some sort of event to 'send' the data that I need to add?
Yes, I believe so. In reading the examples that Google provides here: https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce, it looks like the eCommerce actions set meta data that will be sent along with the next event or pageview. Each example either ends with a ga('send', 'pageview'); or an event call like:
ga('send', 'event', 'Checkout', 'Option', {
hitCallback: function() {
// Advance to next page.
}
});
I'd try going to a new page and inspecting the call made there to see if it includes the data you need. If it does, I'll think of a way to make this easier for redux-beacon users. At the very least I think some documentation/tips are in order. As always, I'm open to suggestions/pr's.

Related

Google analytics 4 events sometimes not arriving

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.

Google analytics tag manager e-commerce dataLayer not sent

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

Redux-becon trackeCommProduct not firing a collect request[redux-beacon]

The following code produces a valid event in the redux-beacon logs. I can see the object getting created appropriately and the code being executed.
I have my analytics set up at a global level to support e-commerce:
ga('create', window.gaKey, 'auto');
ga('require', 'ec');
However, no collect request is actually being fired to GA. I'm having the same problem with trackEcommAction.
All trackEvent collections are going through correctly. What the heck?
case BookingActions.TRACK_BOOK_NOW_ECOMM_PRODUCT:
return trackEcommProduct((eAction, ePrevState) => {
const {
confirmation_token,
pricing,
promotion,
} = eAction.payload;
const { total } = pricing;
return {
category: 'create-reservation',
coupon: promotion,
id: confirmation_token,
name: ePrevState.bookingReducer.activeBooking.pickupLocation.multi_car_display_name,
price: total,
quantity: 1,
};
});
This was a bug in Redux Beacon's Google Analytics Target, and is fixed in the latest version (1.0.2):
npm install #redux-beacon/google-analytics#1.0.2
See here for a more in-depth discussion:
https://github.com/rangle/redux-beacon/issues/254

Track SnapEngage events in Google Analytics when using GTM

I'm trying to have SnapEngage chat events recorded in GA following their instructions here: http://help.snapengage.com/how-do-i-track-snapengage-events-in-google-analytics/
I'm using Universal Analytics through Google Tag Manager and the events are not recorded in GA reports. They mention that in this case the events are not sent from the browser correctly and suggest as solution to set a Tracker Name in GTM's advanced settings. Is this the only way to make this work? GTM says that "Use of named trackers is highly discouraged" - https://support.google.com/tagmanager/answer/2574372#TrackerName
I have no idea what your SnapEngage chat implementation looks like, nor am I familiar with SnapEngage chat, but according to the documentation you referenced, you should just be able to swap out _gaq.push() for dataLayer.push().
For example, this is what SnapEngage gives you (ga.js):
var seAgent;
SnapABug.setCallback('OpenProactive', function(agent, msg) {
seAgent = agent;
_gaq.push(['_trackEvent', 'SnapEngage', 'proactivePrompt', agent]);
});
SnapABug.setCallback('StartChat', function(email, msg, type) {
if (type == 'proactive') {
_gaq.push(['_trackEvent', 'SnapEngage', 'proactiveEngaged', seAgent]);
}
});
To make this GTM compatible, swap-out the _gaq.push's:
var seAgent;
SnapABug.setCallback('OpenProactive', function(agent, msg) {
seAgent = agent;
dataLayer.push({
'event': 'snapEngageEvent',
'eventCategory': 'SnapEngage',
'eventAction': 'proactivePrompt',
'eventLabel': agent
});
});
SnapABug.setCallback('StartChat', function(email, msg, type) {
if (type == 'proactive') {
dataLayer.push({
'event': 'snapEngageEvent',
'eventCategory': 'SnapEngage',
'eventAction': 'proactiveEngaged',
'eventLabel': seAgent
});
}
});
Then, within GTM, you'll have to create a new tag for all of your events:
Note: {{eventCategory}}, {{eventAction}}, and {{eventLabel}} are all dataLayer Variables, so you'll need to create those.
Then and finally, create your rule:

Where find events tracker in google analytics?

I have track event like this.
$('.payment_button').on('click', function() {
var _this = this;
ga('send', 'event', 'Payment', 'Payment', 'Payment Checkout', {
'hitCallback': function() {
$(_this).parents('form').first().submit();
}
});
It's worked good, but I don't know where to view results. In google analitics admin I can view my event only in real time events, but after 30 minuts it's removes and I can't view it.
UPDATE: Google Analytics generally updates reports every 24 hour
On the left side of the reports page where the Report Navigation menus is, it's under
Behavior > Events

Resources