JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div data-track-funnelName="qqq" data-track-funnelStep="zzz" data-track-funnelStepNumber="yyy" data-track-productGroup="www">
    <div data-track-funnelName="abc" data-track-funnelStep="lala" data-track-funnelStepNumber="1" data-track-productGroup="testje">
        <div>
            <span>
				<label for="">
					<table>
						<tr>
							<td>1</td>
							<td>
<div id="test" data-track='{"elementName" : "gezinsSamenstelling"}' data-track-event-click="">1231232</div>
							</td>
														<td>
<div id="test1" data-track='{"elementName" : "automaatisch","funnelName":"abcdef","funnelStep":"haha","funnelStepNumber":"5","productGroup":"testen"}' data-track-event-click="">aaaaa</div>
							</td>
						</tr>
					</table>
				</label>
			</span>
        </div>
    </div>
</div>

JavaScript

if (typeof window.Element.prototype.matches != 'function') {
                window.Element.prototype.matches = window.Element.prototype.msMatchesSelector || window.Element.prototype.mozMatchesSelector || window.Element.prototype.webkitMatchesSelector || function matches(selector) {
                    var element = this;
                    var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
                    var index = 0;
                    while (elements[index] && elements[index] !== element) {
                        ++index;
                    }
                    return Boolean(elements[index]);
                };
            }
            if (typeof window.Element.prototype.closest != 'function') {
                window.Element.prototype.closest = function closest(selector) {
                    var element = this;
                    while (element && element.nodeType === 1) {
                        if (element.matches(selector)) {
                            return element;
                        }
                        element = element.parentNode;
                    }
                    return null;
                };
            }
            document.querySelector('#test[data-track-event-click]').addEventListener('click', function(event) {
                console.log(getFunnelInformation(this, this.getAttribute('data-track')));
            })

            document.querySelector('#test1[data-track-event-click]').addEventListener('click', function(event) {
                console.log(getFunnelInformation(this, this.getAttribute('data-track')));
            })

            function getAttributeCheck(element, funnelData) {
                if (element.closest('['+funnelData+']') === null) {
                    return null;
                } else {
                    return element.closest('['+funnelData+']').getAttribute(funnelData);
                }
            }

            function...