Correct implementation of GA ecommerce extended extension using scroll event
Google's new advanced ecommerce tracking has some awesome features including impression data and impression-based click-through rates. This is great, but the default example provided by Google is to install addImpression for each product on page load. The problem is that the website has pages with large categories (eg 100 products per page), so many of these products are never actually viewed, and thus the "impression" did not really happen and the data will be inaccurate.
The addImpression method can also be dispatched via an event, so my method to work around this was to bind a function to the scroll event and use the jQuery Viewport plugin to see if the element is actually in view. If the element is in view, it grabs information from the data attribute tags I added to each product, makes an impression for that object, and also assigns it the "impressionSent" class to prevent the product from being submitted again (preventing a double impression on one page load) ... At the end of each function using .promise (). Done (), new impression data is sent with an event.
Simple script:
$j(window).bind("scroll", function() {
$j('li.item:in-viewport').not('.impressionSent').each(function(){
$j(this).addClass('impressionSent');
ga('ec:addImpression', {
'id': $j(this).attr('data-sku'),
'name': $j(this).attr('data-name'),
'category': $j(this).attr('data-category'),
'brand': $j(this).attr('data-brand'),
'list': 'Category',
'position': $j(this).attr('data-position')
});
}).promise().done( function() {
ga('send', 'event', 'scroll', 'impression', {'nonInteraction': true});
});
});
In Dev, this method works great except for one problem: the number of events that are fired. In the console and using the Google Analytics debugger, I get the following error while browsing the site:Exceeded rate limit for sending hits. Aborting hit.
According to Google, a maximum of 500 events can be sent per session.
So my question is: (1) Will there be a js / jquery method available to limit the number of events sent per session, other than executing the setInterval function and checking if there is new information to send? Something like storing a specific amount in a variable and sending it after reaching a specific size or page exit?
(2) For analytics experts: this will fix my problem or there will be a "maximum of 500 events" including the number of "addImpression" methods included. those. if i have 500 products on one page and send 500 addImpression in one event, will this exceed the maximum?
source to share
yes, every time you encounter an impression, you can add it to the queue, and call the function to dispatch the event and "debounce", for example using:
https://lodash.com/docs#debounce
which will do what you want "Creates a debounced function that delays the function call until it has timed out in milliseconds since the last debounced call."
in the debounce function, you grab everything from the impression queue and send it to GA. This will reduce your event usage since you can send all queues in one event, for example:
impressionQueue = [];
function filterDuplicates(impressions) {
// TODO: return impressions array without duplicates
}
var sendImpressions = _.debounce(function() {
filterDuplicates(impressionsQueue).forEach(function(impression) {
ga('ec:addImpression', impression);
});
impressionQueue.length = 0;
ga('send', 'pageview');
}, 2000); // debounce for 2 seconds
// call this for every product that enters the viewport
function trackProductImpression(impression) {
impressionQueue.push(impression);
sendImpressions();
}
the higher the debounce delay, the fewer events you will send (and also the more chances that some impressions will be lost if the user quickly closes the tab / moves forward before sending prints)
source to share