Using Google Analytics in a Backbone or Marionette Application

## Google Analytics with Backbone or Marionette
This Gist illustrates how to use Google Analytics with a Backbone or Marionette application router.

The code is described in detail in this YouTube video: http://youtu.be/ElMT7ChrQ9M

Visit leanstacks.com for more information.

## Application.coffee
# Create the Application
window.SkeletonApp = new Backbone.Marionette.Application

# Navigate to a route
SkeletonApp.navigate = (route, options) ->
  options || ( options = {} )
  Backbone.history.navigate route, options
  if not options.trigger
    SkeletonApp.trackPage()

# Handle Backbone History 'route' Events
Backbone.history.on 'route', (router, route, params) ->
  SkeletonApp.trackPage()

# Send Page Tracking Data to Google Analytics
# https://developers.google.com/analytics/devguides/collection/analyticsjs/pages
SkeletonApp.trackPage = ->
  if ga?
    page = Backbone.history.root + Backbone.history.fragment
    ga 'send', 'pageview', page

## index.html
<html>
  <body>
    <section id="header"></section>
    <section id="main"></section>
    <section id="footer"></section>

    <!-- ... -->

    <script src="assets/app/js/app-templates-1.0.0.js"></script>
    <script src="assets/app/js/app-1.0.0.min.js"></script>
    <!-- Add Google Analytics JavaScript at Bottom of Page Body -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-12345678-1', 'auto');
    </script>
  </body>
</html>