Correct implementation of GA Enhanced Ecommerce addImpression using scroll event

Question

Google's new enhanced ecommerce tracking has some awesome functionality including impression data and a click through rate based off impressions. This is great however the default example given by Google is to set an addImpression for every product on page load. The problem is if a website has large category pages (e.g. 100 products to a page) then many of these products may not actually ever be viewed, and thus the 'impression' really hasn't occurred and the data will be inaccurate.

The addImpression method can also be sent via an event, so my method of getting around this has been to bind a function to the scroll event and use the jQuery Viewport plugin to see if an item is actually in view. If the item is in view, it grabs the information from data attribute tags that I have added to each product, it create an impression for that object and also assign it a class 'impressionSent' so that the product will not be sent again (preventing a double impression on a single page load). At the end of the each function, using .promise().done(), the new impression data is sent off with an event.

The simple script is:

$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 perfectly except for one issue: The number of events which are being fired. In console and using the Google Analytics Debugger I get the following error when 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) Would a js/jquery method be available to limit the amount of events sent per session short of performing a setInterval function and checking if there is new information to send? Something like storing a particular amount in a variable and send it off once it reaches a certain size or on page exit?

(2) For the analytics experts: would this fix my problem or is the 'maximum of 500 events' including the number of 'addImpression' methods included. i.e. If I have 500 products on a single page and send off 500 addImpression's in a single event, would that exceed the maximum?

Answer 1

yes, everytime you detect an impression you can add it to a queue, and a call a function to send an event, and "debounce" it, eg using:

https://lodash.com/docs#debounce

that will do what you want "Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked."

on the debounce function you take everything from the impressions queue, and send it to GA. That will reduce your usage of events, as you can send all the queued impressions in 1 event, eg:

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, less events you'll send (and also more chances some impressions are lost if the user closes the tab/navigates away quickly before the impressions are sent)