谷歌分析与 AngularJS答案

【问题标题】：Google Analytics with AngularJS谷歌分析与 AngularJS
【发布时间】：2018-01-05 22:54:20
【问题描述】：

我正在尝试为我的 angularjs 网站设置新的谷歌分析标签。

我基本上把这个添加到我的index.html:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GOOGLE-ID'); //remove in order to avoid sending hits on index twice
</script>

这是我的 script.js：

var app = angular.module('app', ['plangular','ngRoute', 'ngSanitize', 'slick', 'chart.js', 'ngMeta']);

我补充说：

app.run(['ngMeta', '$rootScope' , '$location', '$window', function(ngMeta,$rootScope , $location, $window) { 
  ngMeta.init();


        $window.gtag('create', 'GOOGLE-ID', 'auto');


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

}]);

但我在分析页面上看不到任何点击，除了索引。

【问题讨论】：

标签： angularjs google-analytics

【解决方案1】：

看看https://github.com/angulartics/angulartics。它运行良好，并有详细的安装说明。您甚至可以将事件发送到多个分析服务。

【讨论】：

感谢您的提示，gtag 无法正常工作，但我切换到了旧的 Google Analytics（分析）sn-p，现在它运行良好。我关注了这个文档：github.com/angulartics/angulartics-google-analytics/blob/master/…

【解决方案2】：

在你的 index.html 中：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GOOGLE-ID', { 'send_page_view': false });
</script>

这将确保索引在加载时不计为综合浏览量。然后在你的$stateChangeSuccess:

app.run(['ngMeta', '$rootScope', '$location', '$window', function(ngMeta, $rootScope , $location, $window) { 
  ngMeta.init();

  $rootScope.$on('$stateChangeSuccess', function (event) {
      $window.gtag('config', 'GOOGLE-ID', {'page_path': $location.path()});
      $window.gtag('event', 'page_view');
  });

}]);

您的代码现在应该会针对每个状态更改触发综合浏览量。 Gtag 没有 create 或 send 处理程序。我认为它只支持js、config、set和event作为第一个参数。

有关在 SPA 中使用 Gtag 的更多信息，请参阅 https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications。

【讨论】：

这不起作用，没有路由发送到分析
对不起！编辑添加“page_view”事件的答案。
'event, 'page_view' 只是一个自定义事件，它是发送实际页面视图的上一行。仅供查看此内容的任何人注意

【解决方案3】：

我建议将Segment script 嵌入您的index.html，将分析库扩展到window 对象，并将跟踪调用添加到(click) 事件处理程序：

@Component({
  selector: 'app-signup-btn',
  template: `
    <button (click)="trackEvent()">
      Signup with Segment today!
    </button>
  `
})
export class SignupButtonComponent {
  trackEvent() {
    window.analytics.track('User Signup');
  }
}

我是https://github.com/segmentio/analytics-angular 的维护者。如果您想通过使用一个单一的 API 来管理您的客户数据并能够集成到任何其他分析工具（我们支持超过 250 多个目的地）来解决这个问题，我建议您检查一下 - 无需编写任何额外的代码。 ?

【讨论】：