Chrome扩展内容脚本（Shadow DOM）中的Google Analytics（分析）点击事件跟踪

Question

我正在通过用户脚本通过内容脚本将Chrome浏览器扩展程序插入页面DOM中。

我已将代码注入到影子根目录中以防止CSS出血-实际上一切都开始变得非常好：-）

但是我在Google分析方面有些挣扎。我想跟踪内容脚本中按钮上不同点击事件的混合情况（设置页面上的+），以更好地了解用户如何浏览扩展程序（当然是页面访问量）。

我很难处理将消息从Google传递到后台脚本的文档，并且无法找到一些现实生活中的示例。

我不确定这将如何工作-首先我应该实际传递给后台脚本什么？ 。内容脚本会在每次单击时向后台发送消息，还是仅传递带有事件信息的对象以从后台脚本进行跟踪？

我在这里有点迷失：我对内容脚本和背景之间的消息传递的理解非常有限...

到目前为止，我有2个“进行中的”代码段可与...一起使用...

到目前为止的背景脚本代码：

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXXX']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/u/ga_debug.js';     // ----> 'https://ssl.google-analytics.com/ga.js'
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

// here I receive the message from the content script page
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {

      //track event - create
      if(request.action == "analytics_add_item"){
          _gaq.push(['_trackEvent',
              request.action,
              request.item_name.toLowerCase(),
              request.item_stat,
              request.item_number
          ]);
      }

}）;

内容脚本：

function trackButtonClick(e) {
 console.log('action: "analytics_add_item"', e.target.name);
    chrome.runtime.sendMessage({analytics_add_item: e.target.name});
    _gaq.push(['_trackEvent', e.target.id, 'clicked']);
}

// let lotsUnitsSlider already defined elsewhere in code (this is a toggle-button)
lotsUnitsSlider.name = lotsUnitsSlider;
lotsUnitsSlider.addEventListener('click', trackButtonClick);

谁能在我的途中对我有所帮助-谢谢：-）

Answer 1

您的内容脚本正在发送具有analytics_add_item属性的对象，但是侦听器检查action属性，并需要一堆其他属性，而这些属性您不会发送。

将缺少的属性添加到消息对象：

chrome.runtime.sendMessage({
  action: 'analytics_add_item',
  item_name: e.target.name,
  item_stat: 'foo',
  item_number: 'bar',
});
P.S。您可以使用devtools调试器通过在侦听器中设置断点来实际查看发生的情况，正在发送和接收的内容（后台脚本devtools为opened through chrome://extensions page）。