feat: add custom event listener for elements in shadow dom

Author: Paulo Júnior

src/index.tsx

@@ -1,7 +1,10 @@
 import App from 'App'
+import { addCustomClickEventListener } from 'utils/addCustomEventListener'
 import registerCustomElement from 'utils/register-custom-element'
 
 registerCustomElement({
   name: 'header-app',
   component: App,
 })
+
+addCustomClickEventListener('custom_click_event')

src/types/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  dataLayer?: Record<string, unknown>[]
+}

src/utils/addCustomEventListener.ts

@@ -0,0 +1,44 @@
+export const addCustomClickEventListener = (eventName: string) => {
+  // Set to false if you want to track all events and not just those in shadow DOM
+  const trackOnlyShadowDom = true
+
+  const callback = function (event: MouseEvent) {
+    if ('composed' in event && typeof event.composedPath === 'function') {
+      // Get the path of elements the event climbed through, e.g.
+      // [span, div, div, section, body]
+      const path = event.composedPath() as (HTMLElement & HTMLAnchorElement & HTMLFormElement)[]
+
+      // Fetch reference to the element that was actually clicked
+      const targetElement = path[0]
+
+      // Check if the element is WITHIN the shadow DOM (ignoring the root)
+      const shadowFound = path.length
+        ? path.filter(function (i) {
+            return !targetElement.shadowRoot && !!i.shadowRoot
+          }).length > 0
+        : false
+
+      // If only shadow DOM events should be tracked and the element is not within one, return
+      if (trackOnlyShadowDom && !shadowFound) return // Push to dataLayer
+
+      if (!window.dataLayer) {
+        window.dataLayer = []
+      }
+
+      window.dataLayer.push({
+        event: eventName,
+        custom_event: {
+          element: targetElement,
+          elementId: targetElement.id || '',
+          elementClasses: targetElement.className || '',
+          elementUrl: targetElement.href || targetElement.action || '',
+          elementTarget: targetElement.target || '',
+          originalEvent: event,
+          inShadowDom: shadowFound,
+        },
+      })
+    }
+  }
+
+  document.addEventListener('click', callback)
+}