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

Correct implementation of GA Enhanced Ecommerce addImpression using scroll event

本文关键字：GA 增强型 电子商务 addImpression 实现 滚动 事件      更新时间：2023-09-26

谷歌新增强的电子商务跟踪功能非常棒，包括印象数据和基于印象的点击率。这很好，但谷歌给出的默认示例是为页面加载上的每个产品设置一个addImpression。问题是，如果一个网站有大的类别页面（例如，一个页面上有100种产品），那么其中许多产品实际上可能永远不会被浏览，因此"印象"真的没有发生，数据也会不准确。

addImpression方法也可以通过事件发送，所以我解决这个问题的方法是将一个函数绑定到滚动事件，并使用jQuery Viewport插件查看项目是否真的在视图中。如果项目在视图中，它会从我添加到每个产品的数据属性标签中获取信息，为该对象创建印象，并为其分配一个类"impressionSent"，这样产品就不会再次发送（防止单页加载时出现双重印象）。在每个函数的末尾，使用.proise（）.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 Debugger，我在浏览网站时遇到以下错误：
Exceeded rate limit for sending hits. Aborting hit.

根据谷歌的说法，每个会话最多可以发送500个事件。

所以我的问题是：（1） 除了执行setInterval函数和检查是否有新的信息要发送之外，js/jquery方法是否可以限制每个会话发送的事件数量？类似于将特定数量存储在变量中，并在达到特定大小或页面退出时将其发送？

（2） 对于分析专家来说：这会解决我的问题吗？还是"最多500个事件"，包括"addImpression"方法的数量。即，如果我在一个页面上有500个产品，并且在一个事件中发送500个addImpression，这会超过最大值吗？

是的，每次检测到印象时，都可以将其添加到队列中，并调用一个函数来发送事件，然后"取消反弹"，例如使用：

https://lodash.com/docs#debounce

这将做你想做的"创建一个反跳函数，延迟调用func，直到自上次调用反跳函数以来等待了毫秒之后。"

在debounce函数中，您从印象队列中获取所有内容，并将其发送给GA。这将减少你对事件的使用，因为你可以在一个事件中发送所有排队的印象，例如：

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

取消跳动延迟越高，发送的事件就越少（如果用户在发送印象之前关闭选项卡/快速导航，则丢失一些印象的可能性也就越大）

很棒的代码，但它会发送太多空点击。我做了一些改变。

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));
  });
};
相关文章：