Merge pull request #86 from ngoldman/analytics

add analytics

bower.json

@@ -14,7 +14,8 @@
     "leaflet-dist": "~0.7.2",
     "angular-ui-router": "~0.2.10",
     "angular-md": "~1.0.0",
-    "marked": "~0.3.2"
+    "marked": "~0.3.2",
+    "angulartics": "~0.15.19"
   },
   "resolutions": {
     "marked": "~0.3.2",

static/app/index.html

@@ -51,7 +51,10 @@
       </div>
 
       <div class="navbar-right" ng-cloak>
-        <button type="button" class="btn btn-create btn-primary navbar-btn pull-left" ng-click="create()"><i class="fa fa-magic"></i> Create a New Geobin</button>
+        <button type="button" class="btn btn-create btn-primary navbar-btn pull-left"
+          analytics-on="click"
+          analytics-event="Create Geobin"
+          ng-click="create()"><i class="fa fa-magic"></i> Create a New Geobin</button>
       </div>
     </div>
   </div>
@@ -69,6 +72,13 @@
   </div>
 </footer>
 
+<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-44963317-4', 'geobin.io');
+</script>
 <script src="/static/app/components/jquery/dist/jquery.min.js"></script>
 <script src="/static/app/components/tinystore/tinystore.min.js"></script>
 <script src="/static/app/components/leaflet-dist/leaflet.js"></script>
@@ -78,6 +88,8 @@
 <script src="/static/app/components/angular-ui-router/release/angular-ui-router.min.js"></script>
 <script src="/static/app/components/angular-loading-bar/build/loading-bar.min.js"></script>
 <script src="/static/app/components/angular-md/dist/angular-md.min.js"></script>
+<script src="/static/app/components/angulartics/dist/angulartics.min.js"></script>
+<script src="/static/app/components/angulartics/dist/angulartics-ga.min.js"></script>
 <script src="/static/app/components/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="/static/app/js/app.js"></script>
 <script src="/static/app/js/services.js"></script>

static/app/js/app.js

@@ -7,13 +7,20 @@
     'Geobin.directives',
     'Geobin.controllers',
     'chieffancypants.loadingBar',
-    'yaru22.md'
+    'yaru22.md',
+    'angulartics',
+    'angulartics.google.analytics'
   ])
 
-  .config(['$locationProvider', '$stateProvider', '$urlRouterProvider',
-    function ($locationProvider, $stateProvider, $urlRouterProvider) {
+  .config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$analyticsProvider',
+    function ($locationProvider, $stateProvider, $urlRouterProvider, $analyticsProvider) {
       $locationProvider.html5Mode(true);
 
+      // analytics
+      // prevent double reporting of initial pageview
+      // drawback is redirects are not tracked (e.g. /api/asdf -> /doc/api)
+      $analyticsProvider.firstPageview(false);
+
       // Redirects
       $urlRouterProvider.when(/^\/api(.*)?/, '/doc/api');
       $urlRouterProvider.otherwise('/');
@@ -62,12 +69,4 @@
     }
   ]);
 
-  // temporary tooltip workaround
-  // @TODO: replace jquery/bootstrap elements w/ angularUI
-  // http://angular-ui.github.io/bootstrap/
-  // $('body').tooltip({
-  //     container: 'body',
-  //     selector: '[data-toggle=tooltip]'
-  // });
-
 })();

static/app/partials/list.html

@@ -68,7 +68,10 @@ <h4><i class="fa fa-warning"></i> Geobin "{{binId}}" Not Found!</h4>
   <p>Either this bin has expired, or it never existed! Either way there's nothing to see here. You can either go back home or create a new geobin.</p>
   <hr>
   <p>
-    <button type="button" class="btn btn-primary" ng-click="create()"><i class="fa fa-magic"></i> Create a New Geobin</button>
+    <button type="button" class="btn btn-primary"
+      analytics-on="click"
+      analytics-event="Create Geobin (expired)"
+      ng-click="create()"><i class="fa fa-magic"></i> Create a New Geobin</button>
     <a href="/" class="btn btn-link"><i class="fa fa-home"></i> Go Back Home</a>
   </p>
 </div>