JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div id="topic">
    <div class="wikified">
        <h1 data-report-event="Headers/Topic-Header">Brad Pitt</h1>
        <a href="#" data-report-event="Catalogs/Topic-Wikified" data-report-pagename="topic" class="post-title">Title</a>
    </div>
</div>

JavaScript

// Imagine this is part of ClickManager...
document.addEvent('click', function(event) {
    var el = event.target;

    // these will be empty strings if the attribute isn't there...
    var eventReport = el.get('data-report-event');
    var pagenameReport = el.get('data-report-pagename');
    
    // which allows us to do this
    if (eventReport) ga.clickReportEvent(eventReport);
    if (pagenameReport) ga.clickReportPagename(pagenameReport);
});


var ga = {
    clickReportEvent:function(eventReport){
        window.console && console.log('Reporting event', eventReport);
    },
    clickReportPagename:function(pagenameReport){
        window.console && console.log('Reporting pagename:', pagenameReport);
    },
}