Verfolgen von Google Analytics-Seitenaufrufen mit AngularJS

Ich richte eine neue App mit AngularJS als Frontend ein. Alles auf der Clientseite wird mit HTML5 Pushstate erledigt und ich möchte meine Seitenaufrufe in Google Analytics verfolgen können.

Wenn Sie ng-viewin Ihrer Angular-App verwenden, können Sie auf das $viewContentLoadedEreignis warten und ein Tracking-Ereignis an Google Analytics senden.

Angenommen, Sie haben Ihren Tracking-Code in Ihrer Hauptdatei index.html mit dem Namen var _gaqund MyCtrl eingerichtet, wie Sie es in der ng-controllerDirektive definiert haben .

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

UPDATE: Verwenden Sie für eine neue Version von Google Analytics diese

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

Wenn eine neue Ansicht geladen wird AngularJS, zählt Google Analytics sie nicht als neue Seitenladung. Glücklicherweise gibt es eine Möglichkeit, GA manuell anzuweisen, eine URL als neuen Seitenaufruf zu protokollieren.

_gaq.push(['_trackPageview', '<url>']); würde den Job machen, aber wie kann man das mit AngularJS binden?

Hier ist ein Dienst, den Sie nutzen können:

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

Wenn Sie Ihr Winkelmodul definieren, fügen Sie das Analysemodul folgendermaßen hinzu:

angular.module('myappname', ['analytics']);

UPDATE :

Sie sollten den neuen Universal Google Analytics-Tracking-Code verwenden mit:

$window.ga('send', 'pageview', {page: $location.url()});

app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

Nur eine kurze Ergänzung. Wenn Sie die neue Datei analyse.js verwenden, gilt Folgendes:

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

Ein Tipp ist außerdem, dass Google Analytics nicht auf localhost ausgelöst wird. Wenn Sie also auf localhost testen, verwenden Sie anstelle der Standarderstellung Folgendes ( vollständige Dokumentation ).

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

Ich habe einen Service + Filter erstellt, der Ihnen dabei helfen kann, und vielleicht auch bei einigen anderen Anbietern, wenn Sie diese in Zukunft hinzufügen möchten.

Schauen Sie sich https://github.com/mgonto/angularytics an und lassen Sie mich wissen, wie dies für Sie funktioniert.

Das Zusammenführen der Antworten von Wynnwu und Dpineda hat für mich funktioniert.

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

Das Festlegen des dritten Parameters als Objekt (anstelle von nur $ location.path ()) und die Verwendung von $ routeChangeSuccess anstelle von $ stateChangeSuccess haben den Trick ausgeführt.

Hoffe das hilft.

Ich habe ein einfaches Beispiel für Github mit dem obigen Ansatz erstellt.

https://github.com/isamuelson/angularjs-googleanalytics

Der beste Weg, dies zu tun, ist die Verwendung von Google Tag Manager, um Ihre Google Analytics-Tags basierend auf Verlaufs-Listenern auszulösen. Diese sind in die GTM-Oberfläche integriert und ermöglichen auf einfache Weise die Verfolgung clientseitiger HTML5-Interaktionen.

Aktivieren Sie die integrierte History Variablen und erstellen Sie einen Trigger ein Ereignis ausgelöst , basierend auf der Geschichte ändert.

index.htmlKopieren Sie das ga-Snippet und fügen Sie es ein , aber entfernen Sie die Liniega('send', 'pageview');

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-X');
</script>

Ich gebe ihm gerne eine eigene Factory-Datei my-google-analytics.jsmit Selbstinjektion:

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);

Ich fand die gtag()Funktion funktioniert, anstelle der ga()Funktion.

In der Datei index.html im <head>Abschnitt:

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

Im AngularJS-Code:

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

Ersetzen Sie TrackingIddurch Ihre eigene Tracking-ID.

Wenn jemand mithilfe von Anweisungen implementieren möchte, identifizieren (oder erstellen) Sie ein div in der index.html (direkt unter dem Body-Tag oder auf derselben DOM-Ebene).

<div class="google-analytics"/>

und fügen Sie dann den folgenden Code in die Direktive ein

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});

Wenn Sie einen UI-Router verwenden, können Sie das Ereignis $ stateChangeSuccess wie folgt abonnieren:

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

Ein vollständiges Arbeitsbeispiel finden Sie in diesem Blogbeitrag

Verwenden Sie GA 'set', um sicherzustellen, dass Routen für Google-Echtzeitanalysen erfasst werden. Andernfalls werden nachfolgende Anrufe bei GA nicht im Echtzeitfenster angezeigt.

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Google empfiehlt diesen Ansatz generell dringend, anstatt einen dritten Parameter in "Senden" zu übergeben. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Wenn Sie AngularUI Router anstelle von ngRoute verwenden, können Sie den folgenden Code verwenden, um Seitenaufrufe zu verfolgen.

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});

Entwickler , die Einzelseitenanwendungen erstellen, können Autotrack verwenden , das ein urlChangeTracker- Plugin enthält, das alle in diesem Handbuch aufgeführten wichtigen Überlegungen für Sie behandelt. Anweisungen zur Verwendung und Installation finden Sie in der Autotrack-Dokumentation .

Ich benutze AngluarJS im HTML5-Modus. Ich fand folgende Lösung als am zuverlässigsten:

Verwenden Sie die Angular-Google-Analytics- Bibliothek. Initialisieren Sie es mit etwas wie:

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

Fügen Sie danach den Listener für $ stateChangeSuccess 'hinzu und senden Sie das trackPage-Ereignis.

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

Wenn Sie Ihren Benutzer initialisiert haben, können Sie jederzeit Analytics dort injizieren und einen Anruf tätigen:

Analytics.set('&uid', user.id);

Ich benutze UI-Router und mein Code sieht folgendermaßen aus:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

Auf diese Weise kann ich verschiedene Zustände verfolgen. Vielleicht findet es jemand nützlich.

Ich persönlich möchte meine Analyse mit der Vorlagen-URL anstelle des aktuellen Pfads einrichten. Dies liegt hauptsächlich daran, dass meine Anwendung viele benutzerdefinierte Pfade wie message/:idoder hat profile/:id. Wenn ich diese Pfade senden würde, würden so viele Seiten in Analytics angezeigt, dass es zu schwierig wäre, zu überprüfen, welche Seite Benutzer am häufigsten besuchen.

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

Ich erhalte jetzt saubere Seitenaufrufe in meinen Analysen, z. B. user-profile.htmlund message.htmlstatt vieler Seiten profile/1, profile/2und profile/3. Ich kann jetzt Berichte verarbeiten, um zu sehen, wie viele Personen Benutzerprofile anzeigen.

Wenn jemand Einwände dagegen hat, warum dies eine schlechte Praxis in der Analytik ist, würde ich mich sehr freuen, davon zu hören. Ganz neu in der Verwendung von Google Analytics, daher nicht sicher, ob dies der beste Ansatz ist oder nicht.

Ich empfehle, die Segmentanalysebibliothek zu verwenden und unserer Angular-Kurzanleitung zu folgen . Mit einer einzigen API können Sie Seitenbesuche und Benutzerverhaltensaktionen verfolgen. Wenn Sie eine SPA haben, können Sie die erlauben RouterOutletKomponente Griff , wenn die Seite macht und die Nutzung ngOnInitaufzurufen pageAnrufe. Das folgende Beispiel zeigt eine Möglichkeit, wie Sie dies tun können:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

Ich bin der Betreuer von https://github.com/segmentio/analytics-angular . Mit Segment können Sie verschiedene Ziele durch Umlegen eines Schalters ein- und ausschalten, wenn Sie mehrere Analysetools ausprobieren möchten (wir unterstützen über 250 Ziele), ohne zusätzlichen Code schreiben zu müssen. 🙂

Noch mehr mit Pedro Lopez 'Antwort verschmelzen,

Ich habe dies meinem ngGoogleAnalytis-Modul hinzugefügt (das ich in vielen Apps wiederverwenden kann):

var base = $('base').attr('href').replace(/\/$/, "");

In diesem Fall habe ich ein Tag in meinem Indexlink:

  <base href="/store/">

Dies ist nützlich, wenn Sie den HTML5-Modus für angle.js v1.3 verwenden

(Entfernen Sie den Funktionsaufruf replace (), wenn Ihr Basis-Tag nicht mit einem Schrägstrich / endet.)

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);

Wenn Sie die vollständige Kontrolle über den neuen Tracking-Code von Google Analytics suchen, können Sie meinen eigenen Angular-GA verwenden .

Es wird gadurch Injektion verfügbar gemacht und ist daher leicht zu testen. Es macht keine Magie, außer den Pfad auf jeder routeChange festzulegen. Sie müssen den Seitenaufruf noch wie hier senden.

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

Zusätzlich gibt es eine Direktive, gadie es ermöglicht, mehrere Analysefunktionen an Ereignisse wie diese zu binden:

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>