JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div>
  <ul>
    <li>
      <a href="#" data-tracking="true" data-category="A" data-action="B" data-label="C">Anchor</a>
    </li>
    <li>
      <span data-tracking="true" data-category="D" data-action="E" data-label="F">Span</span>
    </li>
  </ul>
</div>

<div data-tracking="true" data-category="G" data-action="H" data-label="I" class="grey">
  Div
</div>

CSS

div {
  padding: 20px;
}

JavaScript

const __DEV__ = true;

(function() {
  // Find matches
  const triggers = document.querySelectorAll('[data-tracking="true"]');

  triggers.forEach((element) => {

    element.addEventListener('click', (event) => {
      trackEvent({
        category: element.getAttribute('data-category'),
        action: element.getAttribute('data-action'),
        label: element.getAttribute('data-label'),
      })
    })

  });

})();


function trackEvent(params) {
  const data = {
    hitType: 'event',
    eventCategory: params.category,
    eventAction: params.action,
    eventLabel: params.label,
  };

  __DEV__ && console.log('send', params);

  !__DEV__ && ga('send', params);

}