JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<button data-ga-name-id="hello-1">
  hello
</button>
<button data-ga-name-id="hello-2">
  hello
</button>

JavaScript

GoogleEvent.prototype = {};
GoogleEvent.prototype.report = function(report){
    var parent = this;
    console.log('send', {
        hitType: 'event',
        eventCategory: parent.sessionID,
        eventAction: report.action,
        eventLabel: report.label,
        eventValue: parseInt(report.value) || 0
    });
};
GoogleEvent.prototype.getNameId = function(elem){
	return elem.data("ga-name-id");
};
GoogleEvent.prototype.sessionID = (function(){
    var base64 = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
    var amount = 7;
    var id = "";
    var oldId = sessionStorage.getItem('gaSessionId') || false;
    
    if(oldId){
        return oldId;
    } 
    
    createId()
    storeId()
    return id;
    
    function createId(){
        for(var i = 0, x = amount; i < x; i++){
            id += random(2,1) > 1 ? randomChar().toUpperCase() : randomChar();
        }
    }
    function randomChar(){ 
        return base64[random(base64.length-1)];
    }
    function random(max, min){
        min = min || 0;
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function storeId(){
        sessionStorage.setItem("gaSessionId", id);
    }
})();

function GoogleEvent(trigger, emitter, action, category, label, value, dynamic){
    var parent = this;
    this.category = category;
    this.action = action;
    this.label = label;
    this.value = value || 0;
    this.dynamic = dynamic || 0;
    $(trigger).on(emitter, function(){
        var elem = $(this);
        var reportValues = {
            category: category,
            action: action,
            label: label,
            value: value,
        };
        if(parent.dynamic){
        	reportValues[dynamic.replace] = parent[dynamic.replaceValue](elem)
        }
        parent.report(reportValues)
    });
}

var defineGoogleEvent = function(emitter, action){
    return function(trigger, category, label, value, dynamic){
        new GoogleEvent(trigger, emitter, action, category, label,...