JSFiddle - React, Tailwind, and code Playground

by alkos333

HTML

<h1 data-ga-category="search" data-ga-action="result" data-ga-label="leotards">leotards</h1>
<ol data-ga-category="ecommerce">
    <li>
        <span data-ga-category="event" data-ga-action="click">Add product to click</span>
    </li>
    <li>
        <span data-ga-category="event" data-ga-action="mouseenter">Something to hover</span>
    </li>
    <li>
        <span data-ga-category="event" data-ga-action="click">Something to click</span>
    </li>
</ol>

JavaScript

var dd = dd || {};
dd['ga'] = dd.ga || {};

dd.ga.func = {
    ecommerce: function() { alert('ecommerce call'); },
    timing: function() { alert('timing call'); },
    event: function() { alert('event call'); },
    search: function (data) {
        alert('search');
        console.dir(data);
        console.log($('[data-ga-value]').length);
        //ga('send', 'search', data.category, data.action, data.label, $('[data-ga-value]').length);
    }
};

dd.ga.func_action = {
    ecommerce: [],
    timing: [],
    event: ['click', 'mouseenter'],
    search: ['result']
}

$('[data-ga-category]').each(function(){
    var element = $(this),
        data = {
            element: element,
            category: element.closest('[data-ga-category]').data('ga-category'),
            action: element.closest('[data-ga-action]').data('ga-action'),
            label: element.closest('[data-ga-label]').data('ga-label')
        };
    
    for(var type in dd.ga.func_action){
        if(dd.ga.func_action.hasOwnProperty(type)
          && $.inArray(data.action, dd.ga.func_action[type]) > -1){            
            element.on(data.action, data, function(event){
                console.log(data.element);
                event.stopPropagation();
                dd.ga.func[type](event.data);
            });
        }
    }
    
    $('[data-ga-category]').trigger('search');
});