Как Piwik отслеживает ссылки на события кликов?

Question

Я лично не пользуюсь Пивиком. Я разработал инструмент/библиотеку JavaScript для создания системы меню в SharePoint, и кто-то, кто использует мою библиотеку, спрашивал о включении Piwik.

Из того, что я прочитал, я вижу, что Piwik ловит/отслеживает click событий. Я подозреваю, что это делает по умолчанию для <a> тегов, которые имеют атрибут href.

My JS library создает <div> элементы с событием onclick. Я прочитал и понял, что я могу вручную запустить событие click с помощью функции функции Piwik trackLink. Я хотел избежать этого по многим причинам.

Так что я хотел видеть, как именно Piwik отслеживает события кликов, поэтому я могу выяснить, как я могу включить его в более общий способ. Я подумал, что, возможно, я мог бы сделать свое фальшивое событие onclick, создав элемент <a> и выполнив его событие click, но не был уверен, что это сработает.

Answer 1

Посмотрите на Piwik's JS tracker source code.

Например:

• enableLinkTracking()

  поведение по умолчанию использовать фактические события щелчка. Однако некоторые браузеры (например, Firefox, Opera и Konqueror) не генерируют события кликов для средней кнопки мыши.

  Чтобы захватить больше «кликов», псевдо-клик-манипулятор использует события mousedown + mouseup. Это не отраслевой стандарт и уязвим для ложных срабатываний (например, событий перетаскивания).

• addClickListener()

  function addClickListener(element, enable) { 
       addEventListener(element, 'click', clickHandler(enable), false); 
  
       if (enable) { 
        addEventListener(element, 'mouseup', clickHandler(enable), false); 
        addEventListener(element, 'mousedown', clickHandler(enable), false); 
        addEventListener(element, 'contextmenu', clickHandler(enable), false); 
       } 
      } 
  

Answer 2

IMTheNachoMan, вы были очень близки к решению. Matomo (Piwik) есть Javascript trackEvent(category, action, [name], [value]) в комплекте. С событием onclick и _paq.push(['trackEvent', 'Event Category', 'Event Action', 'Event Name']) вы можете его использовать.

Смотреть это решение здесь с фрагментами кода и скриншоты: http://pen-ultima.blogspot.com/2018/01/matomo-internal-link-track.html