JSFiddle - React, Tailwind, and code Playground

by nicomiceli

HTML

<a href="google.com" data-g-event='abc' data-g-event='abc' data-g-action='cde' data-g-dimension='alksjdfasf'>test</a>
<div data-g-event='b1' data-g-action='hello' data-g-label='world'>
<div>
  <button>hello world</button>  
</div>
</div>

JavaScript

[].forEach.call(document.querySelectorAll('[data-g-event]'), function(el) {
    el.addEventListener('click', function(e) {
        var t = e['target'],
            i = 0,
            attr,
            dl = {};
        while (t && i < 5) {
            if (t.getAttribute('data-g-event')) {
                dl = {
                    'event': 'click',
                    'eventCategory': t.getAttribute('data-g-event'),
                    'eventAction': t.getAttribute('data-g-action'),
                    'eventLabel': t.getAttribute('data-g-label')
                }
                alert(JSON.stringify(dl))
                for (i = 0; i < t.attributes.length; i++) {
                    attr = t.attributes[i];
                    if (/data\-g\-/i.test(attr.nodeName) && !/g\-(event|action|label)/i.test(attr.nodeName)) {
                        dl[attr.nodeName] = attr.nodeValue;
                    }
                }
                window.dataLayer.push(dl);
                break;
            }
            t = t.parentElement;
            i++;
        }
    });
});