add GA event tracking

Author: Cory Wright

index.html

@@ -47,14 +47,14 @@ <h1>Cooking the trifle&hellip;</h1>
 
       <article class="card hidden">
         <header>
-          <h3><a href="#" target="_blank">Cooking the trifle&hellip;</a></h3>
+          <h3><a href="#" target="_blank" data-ga-action="watch">Cooking the trifle&hellip;</a></h3>
         </header>
   <!--       <p>
           Episode description&hellip;
         </p> -->
         <footer>
-          <a class="button" href="#" target="_blank">Watch on Netflix</a>
-          <button class="warning">Another!</button>
+          <a class="button" href="#" target="_blank" data-ga-action="watch">Watch on Netflix</a>
+          <button class="warning" data-ga-action="another">Another!</button>
         </footer>
       </article>
 

script.js

@@ -39,9 +39,30 @@ var getRandomEpisode = function() {
   // Update the header
   $('h1').text(randomItem(headings));
 
+  // Update the elements for data tracking
+  $('a, button', '.card').data({
+    episode: episode.episode + ' - ' + episode.title,
+    season: season.season
+  });
+  
   // TODO: Add episode descriptions to JSON and load them into card
 };
 
+// event tracking
+var trackCardClick = function($target) {
+  var action = $target.data('gaAction');
+  var label  = $target.data('episode');
+  var value  = $target.data('season');
+  var event  = {
+    eventCategory: 'Card Click',
+    eventAction: action, // button or link action
+    eventLabel: label, // episode number and name
+    eventValue: value // season
+  };
+
+  window.ga('send', 'event', event);
+};
+
 // I don't love this name. What's better, or is there a better way to do this altogether?
 var init = function() {
   getRandomEpisode();
@@ -50,6 +71,10 @@ var init = function() {
   $('.card.hidden').removeClass('hidden');
 
   // Bind UI handlers
+  $('a, button', '.card').on('click', function() {
+    trackCardClick($(this));
+  });
+  
   $('.card button').on('click', function() {
     getRandomEpisode();
   });