Javascript Angularytics（Google Analytics for AngularJS指令）仅适用于生产环境

我在AngularJS web应用程序中使用Angularytics。它工作得很好，但是，我有三个环境（开发、测试和生产），它从这两个环境收集统计数据。我只想展示生产环境的分析

我分析了很多选择，但都有一些问题。现在，我想编辑angularytics.js脚本以添加一个条件，因此，代码仅在$rootScope.ENVIRONMENT常量为Production时执行

比如：

(function () {
  angular.module('angularytics', []).provider('Angularytics', function () {
    if($rootScope.ENVIRONMENT == 'Production') {
    var eventHandlersNames = ['Google'];
    this.setEventHandlers = function (handlers) {
      if (angular.isString(handlers)) {
        handlers = [handlers];
      }
      eventHandlersNames = [];
      angular.forEach(handlers, function (handler) {
        eventHandlersNames.push(capitalizeHandler(handler));
      });
    };
    var capitalizeHandler = function (handler) {
      return handler.charAt(0).toUpperCase() + handler.substring(1);
    };
    var pageChangeEvent = '$locationChangeSuccess';
    this.setPageChangeEvent = function (newPageChangeEvent) {
      pageChangeEvent = newPageChangeEvent;
    };
    this.$get = [
      '$injector',
      '$rootScope',
      '$location',
      function ($injector, $rootScope, $location) {
        var eventHandlers = [];
        angular.forEach(eventHandlersNames, function (handler) {
          eventHandlers.push($injector.get('Angularytics' + handler + 'Handler'));
        });
        var forEachHandlerDo = function (action) {
          angular.forEach(eventHandlers, function (handler) {
            action(handler);
          });
        };
        var service = {};
        service.init = function () {
        };
        service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
          forEachHandlerDo(function (handler) {
            if (category && action) {
              handler.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
            }
          });
        };
        service.trackPageView = function (url) {
          forEachHandlerDo(function (handler) {
            if (url) {
              handler.trackPageView(url);
            }
          });
        };
        service.trackTiming = function (category, variable, value, opt_label) {
          forEachHandlerDo(function (handler) {
            if (category && variable && value) {
              handler.trackTiming(category, variable, value, opt_label);
            }
          });
        };
        $rootScope.$on(pageChangeEvent, function () {
          service.trackPageView($location.url());
        });
        return service;
      }
    ];
  }});
}());
(function () {
  angular.module('angularytics').factory('AngularyticsConsoleHandler', [
    '$log',
    function ($log) {
      var service = {};
      service.trackPageView = function (url) {
        $log.log('URL visited', url);
      };
      service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
        $log.log('Event tracked', category, action, opt_label, opt_value, opt_noninteraction);
      };
      service.trackTiming = function (category, variable, value, opt_label) {
        $log.log('Timing tracked', category, variable, value, opt_label);
      };
      return service;
    }
  ]);
}());
(function () {
  angular.module('angularytics').factory('AngularyticsGoogleHandler', function () {
    var service = {};
    service.trackPageView = function (url) {
      _gaq.push([
        '_set',
        'page',
        url
      ]);
      _gaq.push([
        '_trackPageview',
        url
      ]);
    };
    service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
      _gaq.push([
        '_trackEvent',
        category,
        action,
        opt_label,
        opt_value,
        opt_noninteraction
      ]);
    };
    service.trackTiming = function (category, variable, value, opt_label) {
      _gaq.push([
        '_trackTiming',
        category,
        variable,
        value,
        opt_label
      ]);
    };
    return service;
  }).factory('AngularyticsGoogleUniversalHandler', function () {
    var service = {};
    service.trackPageView = function (url) {
      ga('set', 'page', url);
      ga('send', 'pageview', url);
    };
    service.trackEvent = function (category, action, opt_label, opt_value, opt_noninteraction) {
      ga('send', 'event', category, action, opt_label, opt_value, { 'nonInteraction': opt_noninteraction });
    };
    service.trackTiming = function (category, variable, value, opt_label) {
      ga('send', 'timing', category, variable, value, opt_label);
    };
    return service;
  });
}());
(function () {
  angular.module('angularytics').filter('trackEvent', [
    'Angularytics',
    function (Angularytics) {
      return function (entry, category, action, opt_label, opt_value, opt_noninteraction) {
        Angularytics.trackEvent(category, action, opt_label, opt_value, opt_noninteraction);
        return entry;
      };
    }
  ]);
}());

我知道一点角度，但是，我认为我没有足够的技能在这个脚本中注入$rootScope。我总是得到

$rootScope未定义

更新 关于以下评论，我更新了帖子： 有条件地添加脚本是我的第一种方法。这可以在如下控制器中完成：

if ($rootScope.ENVIRONMENT == 'Production') {    
            var head = document.getElementsByTagName('head')[0];
            var js = document.createElement("script");    
            js.type = "text/javascript";
            js.src =   "lib/plugins/angularytics-yanpy.js";
            head.appendChild(js);           
        }

这是angularytics yanpy：

(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-59702007-1', 'auto');

另一方面，您必须将angularytics脚本添加到主页：

I think this will work in production environment. However, now in development a got a javascript error. Because angularytics.js needs the ga object created in the angularytics-yanpy.js. As this script is not created because is in development environment a get the javascript error.

我还以友好的方式添加了

。但是我得到了一个新的错误，因为这个脚本定义了一个在app.js文件中定义的angularytics提供程序

因此，错误是链接的，这就是为什么我尝试更新angularytics.js脚本以保留提供程序，但如果环境不同，则生产环境不应改变

---

也许我不太清楚，但这不容易解释。如果您需要更多说明，请告诉我。

您可能需要在Google Analytics数据视图中设置一个过滤器

单击添加过滤器

给你的过滤器起个名字

将过滤器类型设置为

Custom

选择

include

按钮，将过滤器字段设置为

Hostname

然后像这样设置模式：

www\.yourdomain\.com$

（当然，如果 您不使用“.com”，而是使用实际使用的TLD）

选择要启用此筛选器的配置文件

---

这可能是做你想做的事情最简单的方法。您可以过滤掉任何不来自域的数据。

您不应该在

$rootScope

中设置环境，最好使用grunt ng constant（）将其设置为常量

回答你的问题。您可以使用以下命令将rootScope注入提供程序：

.provider（'Angularytics'，函数（$rootScope）{}）

然而，这并不是解决您整体问题的好办法

一个好方法是检测主机名并为以下内容设置单独的谷歌分析属性：


发展
登台
生产

在html google analytics脚本中添加此切换语句

var gaProp;

switch (window.location.hostname) {
    case 'www.domain.com':
        gaProp = 'UA-123456'; // production
        break;
    case 'staging.domain.com':
        gaProp = 'UA-654321'; // staging
        break;
    default:
        gaProp = 'UA-000000'; // development
}

// Google Analtics
(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', gaProp, 'auto');

注意：我正在ga事件中设置gaProp（最后一行）

通过这种方式，您可以为每个属性设置不同的目标和过滤器，并且您的所有测试数据不会相互干扰。
当您使用Grunt构建应用程序时，我在我的一个工作应用程序中成功实现了一种方法

我在Google Analytics中生成了两个跟踪代码，一个用于测试环境，一个用于生产环境。我知道你们并没有计划跟踪你们的环境，这也是我最初的计划。不过，测试谷歌分析的所有功能是否正常也很好，而且如果你开始跟踪自定义事件（比如有多少用户点击某个按钮等等），这将非常有用。幸运的是追踪代码是免费的

我习惯于有条件地编写适当的代码

在我的
index.html
中，我将我的GA代码放在底部，如下所示：

  <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');

  <!-- @if DEV -->
  ga('create', 'UA-554030000-1', 'auto');
  <!-- @endif -->
  <!-- @if PRODUCTION -->
  ga('create', 'UA-554030000-2', 'auto');
  <!-- @endif -->
  </script>  

然后运行
grunt preprocess:production
或
grunt preprocess:dev
将剥离未使用的代码并构建适当的文件。然后，这个任务可以包含在构建过程中（我使用像
grunt build--dev
这样的标志将脚本指向正确的路径）。
它应该像打开开发模式停止发送跟踪信息一样简单。直接从文档中，它说要在应用程序配置中执行以下操作

对于不希望发送跟踪的两个环境，将其设置为true，在推送到生产环境时，使用构建脚本将其设置为false

$analyticsProvider.developerMode(true);

$rootScope
在配置阶段不可用..并且提供程序在配置阶段初始化您可以选择包含此脚本吗？请查看我的更新。简单的解决方法是让脚本运行，但对Google Analytics数据视图应用一个过滤器，该视图只包含来自生产环境的数据。@rober他的意思是你在咕噜/咕噜吗？对不起，我不明白你的意思。点击添加过滤器？哪里请考虑一下，到目前为止，我正在尝试使用AngularJs指令进行分析，这就是Angularytics。我应该在哪里添加过滤器？进入谷歌分析的管理页面。单击“所有过滤器”，然后按照上面的步骤操作。您可以让指令保持原样，并使其在生产和开发环境中运行。谷歌链接：我没有想到这个方法，这是另一个很好的解决方案，你得到了我的支持。是的，我绝对喜欢这个方法。这就是我要找的。实际上，关键是要有不同的跟踪代码。我从“大雄”那里得到了这把钥匙。只是一个小问题。我可以用同一个Analytics帐户设置多个跟踪代码，还是应该创建多个帐户？您保留同一个帐户，但有多个属性。查看我的网站这里的主要客户是经营该品牌的公司，例如，酒店是该品牌的网站/地点。我想一个帐户最多可以有50个。如果你把这个和上面的答案结合起来，你可以做
$analyticsProvider.developerMode（ENV.name！=“production”）正确，也可以这样做，如果
$analyticsProvider.developerMode(true);