我正在尝试根据正在查看页面的环境动态更改我的 GA 跟踪 ID (UA-XXXXXXXX-X)，但我似乎无法找到真正“有 Angular ”的方式来做到这一点。我正在使用 Angulartics，但我无法运行 Angulartics 可以执行任何操作之前需要的基本 GA 代码。如果我只是将 GA 代码放在页面底部，它会按预期工作，但这不是很像 Angular，而且它仍然不允许我动态设置 GA ID。

我已经尝试创建一个指令，但是当将跟踪代码放入指令的 Controller 中时，跟踪代码似乎没有运行。我已经创建了一个 Controller ，它从 rest 调用中获取环境，然后根据返回的环境分配一个 GA 代码，但是当我运行指令时，它会提前运行并且 GA 代码不会触发，或者在跟踪 ID 为仍然未定义。我还尝试将 GA 代码放入指令模板中，但由于某种原因，将代码放置在 ngAnalytics.html 模板内的脚本标签内时根本不会触发代码，即使我可以看到它在 dom 后被正确添加到页面中已加载。我是 Angular 的新手，所以我知道有一个解决方案，但我没有看到。我的指令如下:

angular.module('ngAnalytics', [])
.directive('ngAnalytics', function( servicesSrvc) {
    return {
        restrict: 'A',
        templateUrl: 'js/directives/ngAnalytics.html',
        controller: ['$scope', function($scope) {
            $scope.trackingID;
            $scope.getEnvDetails = function() {
                var currentEnv = servicesSrvc.getEnv();
                var env;
                currentEnv.then(function(data) {
                    env = JSON.stringify(data.environment);
                    switch(env)
                {
                    case 'local':
                        $scope.trackingID = 'disabled'; // DEV
                        break;
                    case 'dev':
                        $scope.trackingID = 'UA-XXX-X'; // DEV
                        break;
                    ...
                        $scope.trackingID = 'UA-XXX-X'; // Default to dev
                }
                (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', $scope.trackingID, { 'cookieDomain': 'none' }); // For localhost testing
                //ga('create', $scope.trackingID, 'test.com'); // For dev, qa, prod etc...
                //ga('send', 'pageview'); // MUST BE DISABLED when using Angulartics
            });
        }

    }],
    link: function(scope, iElement, iAttrs, ctrl) {

    }
}
});

最佳答案

我可能误解了你的问题。这听起来像是指令架构的普遍问题。您正在寻找这样的东西吗？ Live demo (click).

<div analytics="trackingId"></div>

JavaScript:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  //set this however you want, the directive doesn't care - or you can move this into the directive if you want
  //$scope.trackingId = 'UA-XXX-X';
  $scope.trackingId = 'disabled';
});

app.directive('analytics', function() {
  return {
    restrict: 'A',
    scope: {
      id: '=analytics'
    },
    link: function(scope, iElement, iAttrs) {
      (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');

      scope.$watch('id', function(newId, oldId) {
        if (newId) {
          console.log(newId);
          ga('create', scope.id, { 'cookieDomain': 'none' });
        }
      });
    }
  };
});

这里重要的部分是:

scope.$watch('id', function(newId, oldId) {
  if (newId) {
    ga('create', scope.id, { 'cookieDomain': 'none' });
  }
});

这表示仅当 scope.id 有值时才运行该函数，如果设置或更改该值，该函数将再次运行。我不确定你在用 servicesSrvc 做什么，但你可以使用该服务从 Controller 或在指令本身中设置 scope.id，无论哪种方式，如果您已经设置了 $watch，该函数将在您确定 scope.id 的值时运行。我的回答是基于您的评论，即该函数将在未定义值时运行。这就是你避免这种情况的方式。

更新

由于您仍然无法理解该过程，我创建了另一个演示，其中包含一些 console.log 来指导您。 <强> Demo here (click).

var app = angular.module('myApp', []);

app.factory('myService', function($q, $timeout) {
  var myService = {
    getId: function() {
      var deferred = $q.defer();

      console.log('getting id');
      $timeout(function() {
        //deferred.resolve('UA-XXX-X');
        deferred.resolve('disabled');
      }, 2000);

      return deferred.promise;
    }
  };
  return myService;
});

app.directive('analytics', function(myService) {
  return {
    restrict: 'A',
    link: function(scope, iElement, iAttrs) {
      (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');

      var id;
      scope.$watch(
        function() {
          return id; 
        }, 
        function(newId, oldId) {
          if (newId) {
            console.log('watch is calling function');
            ga('create', newId, { 'cookieDomain': 'none' });
          }
        }
      );

      myService.getId().then(function(response) {
        id = response;
        console.log('id set to ' +response);
      });
    }
  };
});

关于javascript - AngularJS 和谷歌分析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20792325/