title: Using Angulartics and Google Analytics for Dynamic and Unique URLs
body: <p>I am attempting to use <a href="https://luisfarzati.github.io/angulartics/" rel="nofollow">angulartics</a> and <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications" rel="nofollow">Google Analytics</a> in my AngularJS SPA such that I will be able to aggregate pageviews even though the URLs constructed are unique when the user is in the app. As a user is moving from page to page (and state to state), the URL will continue to build upon itself including GUIDs. Please see below for an example:</p>
  
  <ol>
  <li>Page 1: localhost:9000/selectListing </li>
  <li>Page 2: localhost:9000/34ea85a0-84db-4443-b40b-f7e0b6b0b096/selectFiles</li>
  <li>Page 3: localhost:9000/34ea85a0-84db-4443-b40b-f7e0b6b0b096/addUser/ceb1639a-1ba4-4f09-a175-474bea0fe3bf</li>
  </ol>
  
  <p>When I look at this information on google analytics, I see a unique URL for every time a user is on the selectFiles page under the list of realtime page views. For example:</p>
  
  <ol>
  <li>localhost:9000/34ea85a0-84db-4443-b40b-f7e0b6b0b096/selectFiles</li>
  <li>localhost:9000/0c006d26-bff4-43da-aaee-d332f92b05db/selectFiles</li>
  </ol>
  
  <p>I would just like to see it aggregated so that there would be a user count on the /selectFiles page instead</p>
  
  <p>Here is my google analytics code in my index.html file:</p>
  
  <pre><code>if (window.location.host.indexOf('cats.kittens.com') &gt;=0){
          (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-5555555-5', 'auto');
          $window.ga('send', 'pageview', { page: $location.url() });
  </code></pre>
  
  <p>Here is the code I implemented in my app.js file:</p>
  
  <pre><code>angular.module('myApp', [
      'ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls', 'ngTable', 'ngSanitize', 'angularFileUpload','angular.filter', 'angulartics', 'angulartics.google.analytics',
      ])
  /* Angulartics configuration */
  .config(['$analyticsProvider', function ($analyticsProvider) {
      $analyticsProvider.firstPageview(false); /* Records pages that don't use $state or $route */
      $analyticsProvider.withAutoBase(true);  /* Records full path */
  }])
  .config(['$stateProvider', '$urlRouterProvider', '$logProvider', function ($stateProvider, $urlRouterProvider, $logProvider) {
      'use strict';
  
      // global $log.debug setting
      $logProvider.debugEnabled(true);
  
  }]);
  </code></pre>
  
  <p>I have tried this solution with google analytics and ui-router with no success: <a href="http://www.arnaldocapo.com/blog/post/google-analytics-and-angularjs-with-ui-router/72" rel="nofollow">http://www.arnaldocapo.com/blog/post/google-analytics-and-angularjs-with-ui-router/72</a></p>
  
  <p>Please let me know anything else I might be able to try. Thanks in advance!</p>