将AngularJS应用程序与Google Analytics集成

Question

请注意：我确实找到了这个非常相似的问题，但如果你阅读它，你会发现提问者实际上在使用Ruby/Rails作为他们的后端，这并不适用于我的情况。

---

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

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

阅读 GA开发人员文档，我看到了一些关于发送者ID，GoogleService-Info.plist以及google-services.json的提及，但令人惊讶的是，没有真正指导您完成集成技术方面的过程的内容。

有人知道这些方面是什么，使用的文件，如何将您的GA凭据添加到这些文件等，适用于Angular应用程序吗？

- smeeb

---

有几个不同的Angular模块可用于分析集成。建议查看它们的工作方式。 - charlietfl

https://www.lunametrics.com/blog/2016/05/04/integrating-angularjs-google-tag-manager/ - Marco

我的回答有没有帮到你？ - epelc

Answer 1

您最好使用 analytics.js，这是谷歌最新的分析库。谷歌为您提供了一个很好的步骤来将其添加到您的网站中。请参见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)

- epelc

Answer 2

最佳的实现AngularJS应用程序分析方法是使用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函数，并将URL和页面标题作为参数传递给已定义在所有控制器（例如util）可访问的位置。

在公共函数中，注入$rootScope并使其广播事件：

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

在应用配置中，监听广播并将数据推送到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});
    }
 });
 })

- cuckoo