Using Google Analytics in a Backbone or Marionette Application
|
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. |
|
# 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 |
|
<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> |