JSFiddle - React, Tailwind, and code Playground

by jstx

HTML

<load class="trigger">loading triggers ga event</load>
<br>
<button class="button1">fire ga event with address</button>
<br>
<button class="button1" id="clickme">multiple events</button>
    <!--simple css loading  -->
    <div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>

CSS

.changeIt {
    color:blue;
}
.trigger {
    margin-left: 25%;
    color:grey;
    font-size:.9em
}
.button1{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius:...

JavaScript

// Unbind default behaviour
	$(document).off("ready.ga").on("ready", function () {
	    //hollow out
	    pageLoc = $(location).attr('href');
	    // Introduce helper functions.

	    (function ($, window, undef) {
	        // ga selector.

	        $.extend($.expr[":"], {
	            ga: function (a) {
	                var attr = a.attributes,
	                    len = attr.length;

	                while (len--) {
	                    if (attr[len].name.indexOf("data-ga-") !== -1) {
	                        return true;
	                    }
	                }

	                return false;
	            }
	        });
 
	        $.gaaApi = {
	            trackEvent: {
	                event: {
	                    value: "_trackEvent",
	                    validation: "isString",
	                    type: "string"
	                },
	                category: {
	                    value: null,
	                    validation: "optString",
	                    type: "currentloc"
	                },
	                action: {
	                    value: null,
	                    validation: "optString",
	                    type: "string"
	                },
	                label: {
	                    value: null,
	                    validation: "optString",
	                    type: "string"
	                },
	                value: {
	                    value: null,
	                    validation: "optInt",
	                    type: "integer"
	                },
	                nonInteraction: {
	                    value: null,
	                    validation: "optBool",
	                    type: "boolean"
	                }
	            },
	            trackPageview: {

	                event: {
	                    value: ["trackPageview", $(location).attr('href')],
	                    validation: "isString",
	                    type: "string"
	                },
	                url: {
	                    value: undef,
	              ...