Extension for trackEvents() using an MutationObserver. (#167)

Added MutationObserver to MatomoTracker
Added dynamically adding buttons to example (test MutationObserver)
Exposed trackEvents function to useMatomo

Author: geier1993

packages/js/bundle.min.js

@@ -27,6 +27,15 @@
       Track me!
     </button>
 
+    </br>
+
+    <button
+      onclick="addDynamicButton()"
+    >
+      Add dynamic button
+    </button>
+    <div id="buttonContainer"></div>
+
     <script src="../bundle.min.js"></script>
     <script>
       const MatomoInstance = new window.MatomoTracker.default({
@@ -35,6 +44,21 @@
       })
 
       MatomoInstance.trackEvents()
+
+      var buttonNum = 0
+      function addDynamicButton(data) {
+        buttonNum += 1
+        var button = document.createElement("button");
+        button.setAttribute("data-matomo-event", "click")
+        button.setAttribute("data-matomo-category", "sample-page")
+        button.setAttribute("data-matomo-action", "click-event")
+        button.setAttribute("data-matomo-name", "testDynamicButton")
+        button.setAttribute("data-matomo-value", buttonNum)
+        button.innerHTML = `Track Event ${buttonNum}`;
+
+        var buttonContainer = document.getElementById("buttonContainer");
+        buttonContainer.appendChild(button);
+      }
     </script>
   </body>
 </html>

packages/js/example/index.html

@@ -13,6 +13,8 @@ import {
 } from './types'
 
 class MatomoTracker {
+  mutationObserver?: MutationObserver
+
   constructor(userOptions: UserOptions) {
     const options = { ...defaultOptions, ...userOptions }
     if (!options.urlBase) {
@@ -78,11 +80,7 @@ class MatomoTracker {
     window._paq.push(['enableLinkTracking', active])
   }
 
-  // Tracks events based on data attributes
-  trackEvents() {
-    const elements = Array.from(
-      document.querySelectorAll<HTMLElement>('[data-matomo-event="click"]'),
-    )
+  private trackEventsForElements(elements: HTMLElement[]) {
     if (elements.length) {
       elements.forEach((element) => {
         element.addEventListener('click', () => {
@@ -109,6 +107,49 @@ class MatomoTracker {
     }
   }
 
+  // Tracks events based on data attributes
+  trackEvents() {
+    const matchString = '[data-matomo-event="click"]'
+    let firstTime = false
+    if (!this.mutationObserver) {
+      firstTime = true
+      this.mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          // Iterate over NodeList by indices (es15 does not allow using 'let node of mutation.addedNodes')
+          mutation.addedNodes.forEach((node) => {
+            // only track HTML elements
+            if (!(node instanceof HTMLElement)) return
+
+            // check the inserted element for being a code snippet
+            if (node.matches(matchString)) {
+              this.trackEventsForElements([node])
+            }
+
+            const elements = Array.from(
+              node.querySelectorAll<HTMLElement>(matchString),
+            )
+            this.trackEventsForElements(elements)
+          })
+        }
+      })
+    }
+    this.mutationObserver.observe(document, { childList: true, subtree: true })
+
+    // Now track all already existing elements
+    if (firstTime) {
+      const elements = Array.from(
+        document.querySelectorAll<HTMLElement>(matchString),
+      )
+      this.trackEventsForElements(elements)
+    }
+  }
+
+  stopObserving() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect()
+    }
+  }
+
   // Tracks events
   // https://matomo.org/docs/event-tracking/#tracking-events
   trackEvent({

packages/js/src/MatomoTracker.ts

@@ -2,6 +2,7 @@ import { types } from '@datapunt/matomo-tracker-js'
 
 export interface MatomoInstance {
   trackEvent?: Function
+  trackEvents?: Function
   trackPageView?: Function
   trackSiteSearch?: Function
   trackLink?: Function

packages/react/src/types.ts

@@ -18,6 +18,8 @@ function useMatomo() {
   const trackEvent = (params: TrackEventParams) =>
     instance.trackEvent && instance.trackEvent(params)
 
+  const trackEvents = () => instance.trackEvents && instance.trackEvents()
+
   const trackSiteSearch = (params: TrackSiteSearchParams) =>
     instance.trackSiteSearch && instance.trackSiteSearch(params)
 
@@ -28,6 +30,7 @@ function useMatomo() {
 
   return {
     trackEvent,
+    trackEvents,
     trackPageView,
     trackSiteSearch,
     trackLink,