Angular SPA集成Google Analytics无法追踪路由页面及视图渲染问题求助

Hey there, let’s work through your two main issues—getting Google Analytics (GA) to track all routes and fixing the {{ title }} rendering in your ui-view—one by one.

1. Fixing Google Analytics Route Tracking #

Right now, GA only tracks your homepage because your route change listener might not be set up correctly, or there’s an issue with how you’re initializing GA. Here’s what to check and fix:

a. Verify UI-Router Version & Route Change Listener #

If you’re using an older version of UI-Router (pre-1.0), $transitions isn’t available—you’ll need to use the $stateChangeSuccess event instead. Update your run block like this:

app.run(['$location', '$window','$rootScope', function($location, $window, $rootScope){
  // Initialize GA
  $window.ga('create', 'UA-2121548-23', 'auto');
  
  // Send pageview for the initial homepage load
  $window.ga('send', 'pageview', $location.path());
  
  // Listen for successful state changes to send pageviews
  $rootScope.$on('$stateChangeSuccess', function() {
    $window.ga('send', 'pageview', $location.path());
  });
}])

If you are using UI-Router 1.0+, double-check that you’ve injected $transitions correctly and there are no typos in the event name.

b. Check for JavaScript Errors #

Open your browser’s developer console (F12) and look for critical errors like:

• ga is not defined: This means the GA analytics.js script failed to load. Confirm the script URL in your index.html is correct and accessible.
• $transitions is undefined: Ensure you’ve added the UI-Router transitions dependency if you’re using that version.

c. Test with GA Debugging Tools #

Use the Google Analytics Debugger extension for Chrome. When enabled, it logs every GA event to your console—you should see a pageview hit every time you navigate to a new route.

2. Fixing {{ title }} Rendering in <div ui-view></div> #

The missing {{ title }} content points to an issue in your app-test.js that’s breaking your controllers. Here’s how to debug:

a. Check the setCurrentNavItem Function #

Your controllers call setCurrentNavItem('main') and setCurrentNavItem('request'), but if this function isn’t defined anywhere, it will throw a JavaScript error. This stops the rest of the controller code (including $scope.title = '...') from running.

• Either define setCurrentNavItem globally, wrap it in a service/factory, or comment out the calls temporarily to test if {{ title }} renders without them.

b. Fix Syntax Errors in app-test.js #

Your code snippet ends with ....—make sure all your state definitions are properly closed with parentheses and commas. For example:

myApp.config(['urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider){ 
  'use strict'; 
  $urlRouterProvider.otherwise('/main'); 
  $stateProvider 
    .state("main", { 
      url: "/main", 
      templateUrl: "main.html", 
      controller: function ($rootScope, $scope) { 
        $rootScope.title = 'SCIS, Sorenson Community Interpreting Services...'; 
        $rootScope.metaDescription = 'Sorenson Community Interpreting Services...'; 
        // Temporarily comment this out if setCurrentNavItem is undefined
        // setCurrentNavItem('main'); 
        $scope.title = 'This is the homepage' 
      } 
    })
    .state("request", { 
      url: "/request", 
      templateUrl: "views/request-interpreter.html", 
      controller: function ($rootScope, $scope) { 
        $rootScope.title = 'text here'; 
        $rootScope.metaDescription = 'text here'; 
        // setCurrentNavItem('request'); 
        $scope.title = 'This is the request interpreting page' 
      }
    }); // Don't forget this closing semicolon for $stateProvider
}]); // Don't forget to close the config function and array

Missing closing brackets or commas will break your entire Angular app, preventing controllers from executing.

c. Verify Template Files Exist #

Ensure main.html and views/request-interpreter.html are in the correct locations relative to your index.html. If the template can’t be loaded, the ui-view won’t render anything.

Final Steps #

1. Fix any syntax errors in app-test.js first—this will resolve the {{ title }} issue if that’s the root cause.
2. Update your GA run block to use the correct route change listener for your UI-Router version.
3. Test each route and check the console for GA hits and errors.

内容的提问来源于stack exchange，提问作者Christian Luneborg