title: Event based tracking using data attributes in gtm
body: <p>We are trying to track social events on our company's intranet site. Not social as in facebook or twitter, but our own social type of events like the following for each social event we want to record the following <code>action:label:value</code></p>
  
  <ul>
  <li>share:email:{# of people emails}</li>
  <li>share:invite:{# of people invited}</li>
  <li>discuss:post:1</li>
  <li>discuss:answer:3</li>
  <li>rate:stars:--</li>
  <li>rate:like:--</li>
  <li>tagged:item:--</li>
  </ul>
  
  <p>We have universal analytics and google tag manager set up on the page. And I followed <a href="http://www.digitalbalance.com.au/our-blog/event-based-tracking-using-html5-custom-data-attributes/" rel="nofollow">this tutorial on event tracking using data attributes</a> and it is working. I set it up like this:</p>
  
  <pre><code>&lt;ol data-ua-event-social data-ua-action="rate" data-ua-label="stars"&gt;
    ...interactive star elements go in here
  &lt;/ol&gt;
  
  &lt;div data-ua-event-social data-ua-action="share" data-ua-label="email" data-ua-value="3"&gt;
    // some javascript on the page sets the data-ua-value node
    // as the user picks who/how many to share with.
  &lt;/div&gt;
  </code></pre>
  
  <p>I set up data layer variables to get <code>gtm.element.dataset.uaAction</code>, <code>gtm.element.dataset.uaLabel</code>, and <code>gtm.element.dataset.uaValue</code>. There is a click - all elements trigger which matches the css selector [data-ua-event-social].</p>
  
  <p>And finally a tag which fires on the trigger and uses the custom variables to fill in the action, label, and value for the ua event. I'm seeing this work in tag manager preview and analytics real-time events.</p>
  
  <p>But it seems like adding three or four data elements on every html trackable html element is adding a lot of bloat to my page.</p>
  
  <p>Is there some way combine that up or streamline it?</p>
  
  <p>Should I be doing this in some completely different way? Can you recommend a tutorial that shows other ways of doing this?</p>
  
  <p>We also have other categories of events such as <code>navigation</code>, <code>media</code> , etc. where we will face similar issues. So I need something that is expandable to all kinds event of tracking.</p>