Question

我已经在互联网上搜索了如何将google analytics添加到离子项目中。 Cordova等有很多不同的插件，但是没有一个可以工作。也许我做错了什么，希望有人可以提供帮助。

我现在得到的离子服务--lab选项。但不是当它安装在手机上。我也没有在控制台中出现任何错误（ - lab和Phone）。与inspect连接时，调试也不会加载。所以我不确定这里有什么......

的index.html

 <head>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova-mocks.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="cordova.js" ></script>
    <script src="js/openfb.js"></script>
    <script src="js/ngopenfb.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter" ng-controller="AppCtrl">

  <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', 'js/analytics.js', 'ga');

            ga('create', 'XX-XXXXXXX-XX', 'auto');
  </script>
</body>
</html>

App.js

.config(function ($stateProvider, $urlRouterProvider) {

          $stateProvider
                  .state('tab', {
                    url: '/tab',
                    abstract: true,
                    templateUrl: 'templates/tabs.html',
                  })

                  .state('tab.dash', {
                    url: '/dash',
                    views: {
                      'tab-dash': {
                        templateUrl: 'templates/tab-dash.html',
                        controller: 'DashCtrl'
                      }
                    },
                    pageTitle: '[app] Dashboard'
                  })

Controller.js

angular.module('starter.controllers', [])
        .controller('AppCtrl', function ($rootScope, $scope, $window, $http, FB) {
          $rootScope.token = window.localStorage.getItem("token");
          $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
            $window.ga('send', 'pageview', {page: toState.pageTitle})
          })

Answer 1

Angulartics是一个很好的库，用于将谷歌分析与角度整合。它可以以简单的方式与Ionic一起使用。首先，添加库。

ionic plugin add cordova-plugin-google-analytics --save
bower install angulartics-google-analytics --save

在index.html中包含angulartics脚本。诀窍是使用（尚未）未记录的angulartics cordova谷歌分析插件。

 <!-- angulartics -->
<script src="bower_components/angulartics/src/angulartics.js"></script>
<script src="bower_components/angulartics/src/angulartics-ga-cordova-google-analytics-plugin.js"></script>

<!-- angulartics google analytics -->
<script src="bower_components/angulartics-google-analytics/lib/angulartics-ga.js"></script>

然后，在您的app.js中，包含模块并在配置块中设置跟踪ID

angular.module('app', [
  'ionic',

  // Include angulartics modules    
  'angulartics',
  'angulartics.google.analytics',
  'angulartics.google.analytics.cordova'
])

// Add config block    
.config(function (googleAnalyticsCordovaProvider) {
  googleAnalyticsCordovaProvider.trackingId = "UA-******-*";
})

就是这样。它现在应该可以正常工作。

Answer 2

我得到了它的工作，但我认为它不是最好的做法。

在主控制器中。

function _waitForAnalytics() {
        if (window.analytics) {
          window.analytics.startTrackerWithId('XX-XXXXXXX-XX');
          window.analytics.trackView('Start');
          console.log("Analytics success");
        } else {
          console.log("Analytics not loaded");
          setTimeout(function () {
            _waitForAnalytics();
          }, 10000);
        }
      }
      _waitForAnalytics();

奇怪，因为准备就绪的设备应该这样做。

离子与谷歌分析

2 个答案: