trga-analytics demo

Quick Reference

1. Add Google Analytics code

2. Import trga-analytics JavaScript

3. Define Zone By CSS

Define the zones which will be record as 'category' in the Google Analytics

        <navbar class="trga-zone" data-trga-zone="zone_name">
          ....
          ....
        </navbar>

4. Define Events By CSS which will be record as 'action' in the Google Analytics

Tracking Zone 1

track click with label `click-1`


                  <button type="button" class="button is-info  trga-trigger-by-click" data-trga-label="click-1">track click 'click-1'</button>

track click without label - get the default event name from the text


                  <button type="button" class="button is-info  trga-trigger-by-click">click-1</button>

Tracking Zone 2

track mouseover with label `mouseover-1`


            <button type="button" class="button is-success  trga-trigger-by-mouseover" data-trga-label="mouseover-1">track mouseover</button>

Input element - track focus, focusout, keypress once with label `input 1`


                  <input class="input trga-trigger-by-focus  trga-trigger-by-focusout trga-trigger-by-keypress-once" data-trga-label="input 1" type="text" placeholder="set and track input events">

track select change and scroll events


                  <select multiple size="4" class="trga-trigger-by-scroll trga-trigger-by-change" data-trga-label="select 1">

5. Debugging Functionality

Highlight Tracking Zone and Tracked Elements


            trga.hiliteDebug()

Show Console log of tracked data. Make sure to open the browser's console to see the log.


            trga.setDebug()