Отслеживание событий кликов в Google Analytics в chrome Сценарий расширения содержимого (Shadow DOM)

Question

Я создаю расширение Chrome с пользовательским интерфейсом, внедренным в DOM страниц с помощью скрипта содержимого.

Я ввел код в тень Root, чтобы предотвратить CSS кровотечение - и все на самом деле начинает выходить действительно хорошо: -)

НО Я немного борюсь с аналитикой Google. Я хотел бы отслеживать сочетание различных событий нажатия на кнопки в скрипте содержимого (+ на странице настроек), чтобы лучше понять, как пользователи перемещаются по расширению (+, конечно, посещений страницы).

Я борюсь с документацией о передаче сообщений в фоновый скрипт от Google и не смог найти реальных примеров.

Я не уверен, как это будет работать - и что я должен на самом деле пройти через фоновый скрипт в первую очередь? , Будет ли скрипт содержимого отправлять сообщение в фоновый режим при каждом щелчке, или будет передаваться только объект с информацией о событии для отслеживания из фонового скрипта?

Я немного растерялся: мое понимание сообщения -переход между content-script и фоном, как это, довольно ограничен ...

У меня есть 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',
});

PS Вы можете использовать отладчик devtools для фактического просмотра того, что происходит, что отправляется и принимается, устанавливая точку останова в приемнике (фоновый сценарий devtools открывается через chrome : // страница расширений ).