使用滚动事件正确实施GA增强型电子商务addImpression

时间:2014-11-05 07:14:16

标签: javascript jquery google-analytics

Google新的增强型电子商务跟踪功能包括一些非常棒的功能,包括展示数据和基于展示次数的点击率。这很好,但默认example given by Google是为页面加载时的每个产品设置addImpression。问题是如果一个网站有大的类别页面(例如,一个页面有100个产品),那么这些产品中的许多可能实际上都没有被查看过,因此“印象”确实没有发生,数据也不准确。

addImpression方法也可以通过一个事件发送,所以我的解决方法是将一个函数绑定到scroll事件,并使用jQuery Viewport plugin查看一个项目是否实际在视图中。如果该项目在视图中,它会从我添加到每个产品的数据属性标记中获取信息,它会为该对象创建一个展示,并为其指定一个类“impressionSent”,以便不再发送该产品(阻止单页加载上的双重印象)。在每个函数的最后,使用.promise()。done(),新的展示数据将通过事件发送。

简单的脚本是:

$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});     
          });
        });

在Dev中,除了一个问题之外,这种方法可以正常工作:被触发的事件数。在控制台和使用Google Analytics调试程序时,我在浏览网站时收到以下错误:
Exceeded rate limit for sending hits. Aborting hit.

根据Google的说法,每个会话最多可以发送500个事件。

所以我的问题是: (1)js / jquery方法是否可用于限制每个会话发送的事件数量,而不是执行setInterval函数并检查是否有新信息要发送?比如将某个特定金额存储在变量中并在达到一定大小或页面退出时将其发送出去?

(2)对于分析专家:这会解决我的问题,还是“最多500个事件”,包括“addImpression”方法的数量。即如果我在一个页面上有500个产品并在一个事件中发送500个addImpression,那么会超过最大值吗?

2 个答案:

答案 0 :(得分:1)

出色的代码,但它将发送过多的空匹配。我做了一些改变。

var send_ga = false;
$(window).bind("scroll", function() {
  $('p.grid-link__meta:in-viewport').not('.impressionSent').each(function(){
    $(this).addClass('impressionSent');  
    ga("require", "ec");
    ga('ec:addImpression', {
      'id': $(this).attr('data-sku'),
      'name': $(this).attr('data-name'),
      'list': '{{ collection.title | escape | replace: "'", "'" }}',
      'position': $(this).attr('data-position')                     
    }); 
    console.log($(this).attr('data-position'));
    send_ga = true;
  }).promise().done( function() {
    if(send_ga){
      ga('send', 'event', 'scroll', 'impression', {'nonInteraction': true});  
      send_ga = false;
    }
  });
});
});

如果需要,可以使用setTimeout

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

答案 1 :(得分:0)

是的,每当您检测到一次展示时,您就可以将其添加到队列中,并调用一个函数来发送一个事件,并且"去抖动"它,例如使用:

https://lodash.com/docs#debounce

将执行您想要的操作"创建一个去抖动函数,该函数会延迟调用func,直到自上次调用去抖动函数后经过等待毫秒为止。"

在去抖动功能中,您可以从展示次序排队中获取所有内容,并将其发送给GA。 这将减少您对事件的使用,因为您可以在1个事件中发送所有排队的展示次数,例如:

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();
}

去抖延迟越高,您发送的事件就越少(如果用户在发送展示之前快速关闭标签/导航,则会有更多机会丢失一些展示次数)