使用AngularJS跟踪Google Analytics（分析）页面浏览量

221

我正在使用AngularJS作为前端设置一个新应用。客户端上的所有操作都通过HTML5 pushstate完成，我希望能够在Google Analytics（分析）中跟踪我的页面浏览量。

google-analytics  angularjs 
— dj2
source
— David
2
不推荐使用angulartics。使用angular-google-analytics
— webdev5 '16
5
@ webdev5一个新版本的angulartics已经发布。在以下位置进行
— Devner，2016年

Answers:

240

如果您ng-view在Angular应用中使用，则可以收听$viewContentLoaded事件并将跟踪事件推送到Google Analytics（分析）。

假设您已经在主index.html文件中设置了名称为的跟踪代码，var _gaq并且MyCtrl是您在ng-controller指令中定义的内容。

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

更新： 对于新版本的Google Analytics（分析），请使用此版本

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}
— dj2
source
12
FWIW应该，_trackPageview而不是_trackPageView...花了10分钟的时间挠头：）
— sajal 2012年
123
我会用 $rootScope.$on('$routeChangeSuccess', ...)
— bearfriend
5
@DavidRivers嗯，已经有一段时间了，但是只要浏览一下这个答案和我的评论，似乎将它应用于$rootScope可以保证不会被其他事件或DOM更改删除，并且routeChangeSuccess每次使用时都会触发位置栏会更改，而不仅仅是您每次更改视图源模板时都会更改。那有意义吗？
— 熊友
5
@ dg988在$ routeChangeSuccess事件期间，您可能不知道页面的标题（例如，它可以在处理完RESTful服务中的数据后在控制器内部进行设置）。仅通过这种方式，页面Google Analytics（分析）的URL就会跟踪上一页的标题。
— 康斯坦丁·塔尔库斯
43
如果您使用的是GA新脚本，则该脚本将$window.ga('send', 'pageview', { page: $location.path() });代替$window._gaq...部分。另外，您可能希望ga('send', 'pageview');从原始的GA代码中删除，以防止首次登陆页面时出现重复。
— CWSpear
57

在中加载新视图时AngularJS，Google Analytics（分析）不会将其视为新页面加载。幸运的是，有一种方法可以手动告诉GA将网址记录为新的综合浏览量。

_gaq.push(['_trackPageview', '<url>']); 会做的工作，但如何与AngularJS绑定呢？

这是您可以使用的服务：

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

定义角度模块时，请按以下方式包含分析模块：

angular.module('myappname', ['analytics']);

更新：

您应将新的通用Google Analytics（分析）跟踪代码与以下各项配合使用：

$window.ga('send', 'pageview', {page: $location.url()});
— 哈拉兰·杜波夫（Haralan Dobrev）
source
6
这里要注意的另一件事是您需要在某处包括“分析”服务。我在app.run中做了我的。
— Nix
这种需求会包含在每个模块中还是仅包含初始应用程序？
— designermonkey
2
@Designermonkey如果仅将其包含在主应用程序模块中，则它将起作用。如果您有一个完全独立的模块，尽管该模块不需要您的主模块，则可能需要再次添加它。干杯!
— Haralan Dobrev 2014年
如果使用的是服务，则应使用“ this”关键字定义函数：source。例如，在服务中将是。this.track = function($window.ga('send', 'pageview', {page: $location.url()});这将允许您googleAnalytics.track();在app.run（）函数中使用
— zcoon 2016年
48 
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});
— 德潘达
source
8
注意：如果使用最小化/编译，则需要指定参数名称：app.run(["$rootScope", "$location", function(...
— dplass 2014年
如果您不想在每个控制器中都包含GA代码，则此解决方案非常有用。
— breez 2014年
1
如果您有一个可以动态更改标题的异步代码，那就不太好了，否则就太好了。
— 约翰
40

只是快速补充。如果您使用的是新的analytics.js，则：

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

此外，有一个提示是Google Analytics（分析）不会在localhost上启动。因此，如果您要在localhost上进行测试，请使用以下内容代替默认的create（完整文档）

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
— 文武
source
哦，谢谢。我遇到了奇怪的错误，并注意到我的代码片段中甚至都没有_gaq，呵呵。傻谷歌：更新他们的代码等等！哈哈。
— CWSpear
3
确保使用$window来访问窗口（ga很可能只在Angular内部undefined）。另外，您可能希望ga('send', 'pageview');从原始的GA代码中删除，以防止首次登陆页面时出现重复。
— CWSpear
6
使用ui-router，您可以发送如下页面视图：$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
— pherris
2
添加：如果您在应用中使用搜索参数，则可以使用$location.url()
— Ade
2
我赞成这个答案，因为使用.path（）比.url（）更好，因为您通常想排除查询字符串参数。请参阅：Google Analytics（分析）配置错误2：查询字符串变量
— frodo2975 2015年
11

我创建了一个服务+过滤器，可以帮助您解决此问题，如果将来选择添加它们，也可以与其他一些提供商一起使用。

查看https://github.com/mgonto/angularytics，让我知道如何为您工作。

— on
source
10

合并wynnwu和dpineda的答案对我有用。

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

将第三个参数设置为对象（而不只是$ location.path（））并使用$ routeChangeSuccess代替$ stateChangeSuccess可以达到目的。

希望这可以帮助。

— 佩德罗·洛佩兹（Pedro Lopez）
source
7

我使用上述方法在github上创建了一个简单的示例。

https://github.com/isamuelson/angularjs-googleanalytics

— iBootstrap
source
我添加了一个修复程序以更好地报告路径。因此，如果您现在/account/:accountId 又拥有路径的路径http://somesite.com/account/123，现在它将报告路径为/account?accountId=123
— IBootstrap 2013年
@IBootstrap将路由参数放在查询字符串中有什么好处？
— Pavel Nikolov
@IBootstrap我有同样的问题，将路线参数放在查询字符串中有什么好处？
— Dzung Nguyen
1
并非所有路由都是不同的页面，GA会将每个路由都视为不同的页面。通过将路由转换为查询字符串，您可以选择忽略查询字符串的一部分。
— IBootstrap
5

最好的方法是使用Google跟踪代码管理器根据历史记录监听器触发您的Google Analytics（分析）代码。这些内置在GTM界面中，可以轻松地跟踪客户端HTML5交互。

启用内置的“ 历史记录”变量，并创建触发器以根据历史记录更改触发事件。

— 用户名
source
5

在中index.html，复制并粘贴ga代码段，但删除该行ga('send', 'pageview');

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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-XXXXXXXX-X');
</script>

我喜欢my-google-analytics.js通过自我注入将其赋予自己的工厂文件：

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);
— 伊洛维特
source
我喜欢那种
— 自我注射的
出于好奇，为什么要page使用当前路径设置，然后将其提交为pageview？这样做而不是仅仅这样做有什么区别$window.ga('send', 'pageview', {page: $location.url()});？
— Fizzix '16
1
我不记得TBH，但是通过查看它，我会说它为其他操作或在其他地方记录其他内容留下了灵活性，并且通过显式告知ga当前页面可能更准确，因此ga可以继续准确地起作用，而不是只需记录某个“任意”页面网址的综合浏览量即可。
— ilovett16年
如果您希望实时分析在Google中运行，则应“设置”。：为什么看文档参考developers.google.com/analytics/devguides/collection/...
— fuzzysearch
建议使用“设置”，以便在同一页面上发送的每个匹配（例如用于跟踪用户互动的GA事件）都使用相同的页面路径值发送。与实时分析无关。看到developers.google.com/analytics/devguides/collection/...
— 打开搜索引擎优化
5

我发现该gtag()功能有效，而不是ga()功能。

在index.html文件的<head>部分中：

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

在AngularJS代码中：

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

替换TrackingId为您自己的跟踪ID。

— 布伦特·沃什伯恩
source
4

如果有人想使用指令来实现，则在index.html中标识（或创建一个div）（在body标签下，或在相同的DOM级别）

<div class="google-analytics"/>

然后在指令中添加以下代码

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});
— 编码员
source
3

如果您使用的是ui-router，则可以订阅$ stateChangeSuccess事件，如下所示：

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

有关完整的工作示例，请参阅此博客文章。

— 杰森
source
3

使用Google Analytics（分析）“设置”可确保选择路线以进行Google实时分析。否则，随后对GA的调用将不会显示在实时面板中。

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Google强烈建议采用这种方法，而不是在“发送”中传递第三个参数。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

— 模糊搜索
source
3

对于使用AngularUI Router而不是ngRoute的用户，可以使用以下代码来跟踪页面视图。

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});
— 凯文·M
source
3

我在html5模式下使用AngluarJS。我发现以下解决方案最可靠：

使用angular-google-analytics库。用类似下面的命令初始化它：

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

之后，在$ stateChangeSuccess上添加侦听器并发送trackPage事件。

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

在任何时候，当您吸引用户时，您都可以在其中注入Google Analytics（分析）并拨打电话：

Analytics.set('&uid', user.id);
— 马莱塔
source
2

我正在使用ui-router，我的代码如下所示：

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

这样，我可以跟踪不同的状态。也许有人会觉得有用。

— 米哈（MihaEržen）
source
1

我个人喜欢使用模板URL而不是当前路径来设置分析。这主要是因为我的应用程序具有许多自定义路径，例如message/:id或profile/:id。如果要发送这些路径，那么在分析中就会看到很多页面，那么很难检查用户访问量最大的页面。

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

现在，我在自己的分析中获得了整洁的页面浏览量，例如user-profile.html和，message.html而不是许多页面profile/1，profile/2并且profile/3。现在，我可以处理报告，以查看有多少人正在查看用户个人资料。

如果有人对为什么这是分析中的不良做法有任何异议，我将很高兴听到它。使用Google Analytics（分析）挺陌生的，所以不太确定这是否是最好的方法。

— Fizzix
source
1

我建议使用细分分析库并遵循我们的Angular快速入门指南。您将可以使用单个API跟踪页面访问并跟踪用户行为操作。如果您有SPA，则可以允许RouterOutlet组件在页面呈现时进行处理并用于ngOnInit调用page调用。下面的示例显示了一种执行此操作的方法：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

我是https://github.com/segmentio/analytics-angular的维护者。如果您有兴趣尝试使用多种分析工具（我们支持超过250个目的地），而无需编写任何其他代码，则使用细分功能，您可以通过轻按一下开关来切换不同的目的地。🙂

— 威廉
source
0

与Pedro Lopez的答案进一步融合，

我将此添加到了ngGoogleAnalytis模块中（我在许多应用中都重复使用了该模块）：

var base = $('base').attr('href').replace(/\/$/, "");

在这种情况下，我的索引链接中有一个标签：

  <base href="/store/">

在angular.js v1.3上使用html5模式时非常有用

（如果您的基本标记未以斜杠/结束，请删除replace（）函数调用）

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);
— 费利佩·索萨（Felipe Sousa Iketani）
source
-3

如果您希望完全控制Google Analytics（分析）的新跟踪代码，则可以使用我自己的Angular-GA。

它ga可以通过注入获得，因此易于测试。除了在每个routeChange上设置路径外，它没有任何作用。您仍然必须像这样发送综合浏览量。

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

另外，还有一条指令ga允许将多个分析功能绑定到事件，例如：

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>
— 拉法·林德曼
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.