chrome 扩展内容脚本 (Shadow DOM) 中的 Google Analytics 点击事件跟踪

Question

我正在构建一个 Chrome 扩展程序，其用户界面通过内容脚本注入到页面 DOM 中。

我已将代码注入到 Shadow Root 中以防止 CSS 溢出 - 实际上一切都开始变得非常好:-)

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

我在从 Google 向后台脚本传递消息的文档中苦苦挣扎，并且无法找到一些现实生活中的示例。

我不确定这将如何工作 - 以及我应该首先将什么传递给后台脚本？ .内容脚本会在每次点击时向后台发送消息，还是只会传递一个包含事件信息的对象以从后台脚本跟踪？

我有点迷失了：我对这样的内容脚本和背景之间的消息传递的理解相当有限......

到目前为止，我有 2 个“正在进行的”代码 sn-ps 可以使用...

到目前为止的后台脚本代码：

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',
});

附：您可以使用 devtools 调试器实际查看发生了什么，通过在侦听器中设置断点来发送和接收什么（后台脚本 devtools 是 opened through chrome://extensions page）。