Question

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

我正在构建一个AngularJS（Angular v1）应用程序，该应用程序将向Google Analytics（GA）发送实时分析。我刚刚设置了GA帐户，该帐户为我提供了跟踪ID 。

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

阅读GA developer docs我已经看到提及发件人ID ， GoogleService-Info.plist 以及 google-services .json ，但令人惊讶的是，没有什么能够真正指导您完成整合技术方面的过程。

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

Answer 1

您最有可能想使用来自Google的最新分析库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替换为google analytics中的您的媒体资源ID。

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

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

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

Answer 2

在AngularJS App中实施分析的最佳方式是使用Google跟踪代码管理器（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的文档。

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

在常用功能中，注入$ rootScope并让它广播事件：

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

在App Config中，收听广播并将数据推送到Google跟踪代码管理器

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

将AngularJS应用与Google Analytics集成

2 个答案: