将 AngularJS 应用程序与 Google Analytics 集成答案

【问题标题】：Integrating AngularJS apps with Google Analytics将 AngularJS 应用程序与 Google Analytics 集成
【发布时间】：2018-06-24 07:59:44
【问题描述】：

请注意：我确实找到了这个very similar question，但如果你读到它，问它的人实际上是在使用 Ruby/Rails 作为他们的后端，这根本不适用于我的情况。

我正在构建一个 AngularJS (Angular v1) 应用程序，它将实时分析发送到 Google Analytics (GA)。我刚刚设置了我的 GA 帐户，它给了我一个跟踪 ID。

我想知道如何将我的 Angular 应用程序与我的 GA 帐户集成？我需要在我的应用中放入哪些文件？如何使用我的 Tracking ID 或其他凭据自定义这些文件？

阅读GA developer docs 我看到有人提到Sender ID、GoogleService-Info.plist 以及google-services.json，但令人惊讶的是，没有任何东西可以真正指导您完成集成的技术方面的过程。

有人知道 Angular 应用程序的这些方面、使用的文件、如何将 GA 凭据添加到这些文件等吗？

【问题讨论】：

分析集成有几种不同的角度模块。建议看看他们是如何工作的
lunametrics.com/blog/2016/05/04/…
我的回答好运吗？

标签： javascript angularjs google-analytics integration

【解决方案1】：

您很可能希望使用analytics.js，它是 google 的最新分析库。谷歌提供了一个很好的演练，将它添加到您的网站。见https://developers.google.com/analytics/devguides/collection/analyticsjs/

<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', 'https://www.google-analytics.com/analytics.js', 'ga');
  ga('create', 'UA-XXXXXXXX-X', 'auto');
</script>

将 UA-XXXXXXXX-X 替换为您在谷歌分析中的属性 ID。

您可以在控制器、组件等中使用$window.ga 访问 ga api。

为当前登录的用户设置账户ID的示例。

$window.ga('set', '&uid', 12312353)

【讨论】：

【解决方案2】：

在 AngularJS 应用中实现分析的最佳方式是使用 Google Tag Manager (GTM)。在索引文件中包含 GTM 脚本（总是第一次加载）：

<!-- Google Tag Manager -->
<script>
var dataLayer = [];
</script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

然后为虚拟页面视图配置 GTM。请浏览 GTM 的文档。

在您的控制器中，调用定义在所有控制器（例如 util）可访问的某个位置的函数 updateGoogleTagManager，并将 URL 和页面标题作为参数。

在通用函数中，注入 $rootScope 并让它 $broadcast 事件：

 $rootScope.$broadcast('$viewContentLoaded', { 'myUrl': myUrl, myTitle: myTitle, modeType: 'myCustomDefined' });

在 App Config 中收听广播并将数据推送到 Google Tag Manager

angular.module('app.core')
.run((function($rootScope, $window, $location, GoogleTagManager) {
    $rootScope.$on('$viewContentLoaded', function(event,data) {
    if(data.modeType == 'myCustomDefined'){
        GoogleTagManager.push({ 'event': 'vpv', 'page.url':encodeURIComponent(data.myUrl), 'page.title' : data.myTitle});
    }
 });
 })

【讨论】：