webentwicklung-frage-antwort-db.com.de

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 nachverfolgen können.

220
dj2

Wenn Sie ng-view In Ihrer Angular) App verwenden, können Sie das Ereignis $viewContentLoaded Abhören und ein Tracking-Ereignis an Google Analytics senden.

Angenommen, Sie haben Ihren Tracking-Code in Ihrer index.html-Hauptdatei mit dem Namen var _gaq Und MyCtrl wie in der Direktive ng-controller Definiert eingerichtet.

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

PDATE: für neue version von google-analytics benutze diese

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

Wenn eine neue Ansicht in AngularJS geladen wird, wird sie von Google Analytics nicht als neue Seite gewertet. 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 bindet man das mit AngularJS?

Hier ist ein Service, den Sie nutzen könnten:

(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 angular Modul definieren, fügen Sie das Analysemodul wie folgt hinzu:

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

UPDATE :

Verwenden Sie den neuen universellen Google Analytics-Tracking-Code für:

$window.ga('send', 'pageview', {page: $location.url()});
57
Haralan Dobrev
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});
48
dpineda

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

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

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

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

Ich habe einen Service + Filter erstellt, der euch dabei helfen könnte, und vielleicht auch bei einigen anderen Anbietern, wenn ihr sie in Zukunft hinzufügen wollt.

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

11
mgonto

Das Zusammenführen der Antworten von wynnwu und dpineda hat bei mir 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 Setzen des dritten Parameters als Objekt (anstelle von nur $ location.path ()) und das Verwenden von $ routeChangeSuccess anstelle von $ stateChangeSuccess hat den Trick ausgeführt.

Hoffe das hilft.

10
Pedro Lopez

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

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

7
IBootstrap

Am besten verwenden Sie dazu den Google Tag Manager, um Ihre Google Analytics-Tags basierend auf Verlaufslistenern auszulösen. Diese sind in die GTM-Benutzeroberfläche integriert und ermöglichen auf einfache Weise das Verfolgen von HTML5-Interaktionen auf der Clientseite.

Aktivieren Sie die eingebauten Variablen Verlauf und erstellen Sie einen Auslöser, um ein Ereignis basierend auf Verlaufsänderungen auszulösen.

4
user2236721

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

In der Datei index.html innerhalb des <head> Sektion:

<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 TrackingId durch Ihre eigene Tracking-ID.

4
Brent Washburne

Wenn jemand mithilfe von Direktiven 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"/>

fügen Sie der Direktive dann den folgenden Code hinzu

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

Wenn Sie einen UI-Router verwenden, können Sie das Ereignis $ stateChangeSuccess folgendermaßen abonnieren:

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

Ein vollständiges Arbeitsbeispiel finden Sie unter dieser Blog-Beitrag

3
Jason

Verwenden Sie GA "Festlegen", um sicherzustellen, dass Routen für die Google-Echtzeitanalyse erfasst werden. Andernfalls werden nachfolgende Aufrufe von GA nicht im Echtzeitfenster angezeigt.

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

Google rät generell dringend zu dieser Vorgehensweise, anstatt einen dritten Parameter in "send" zu übergeben. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

3
fuzzysearch

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

Verwenden Sie angle-google-analytics library. Initialisiere 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 Nutzer initialisiert haben, können Sie jederzeit Analytics dort injizieren und folgende Anrufe tätigen:

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

Kopieren Sie in Ihrem index.html Das ga-Snippet und fügen Sie es ein. Entfernen Sie jedoch die Zeile ga('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.js Mit 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
    }
  ]);
3
ilovett

Ich benutze einen UI-Router und mein Code sieht so 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.

2
Miha Eržen

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

2
Abou-Emish

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');
    });
});
1
Kevin M

Ich persönlich mag es, meine Analyse mit der Vorlagen-URL anstelle des aktuellen Pfads einzurichten. Dies liegt hauptsächlich daran, dass meine Anwendung über viele benutzerdefinierte Pfade verfügt, z. B. message/:id Oder profile/:id. Wenn ich diese Pfade senden würde, müssten so viele Seiten in der Analyse angezeigt werden, dass es zu schwierig wäre, zu überprüfen, welche Seiten Benutzer am häufigsten besuchen.

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

In meinen Analysen werden jetzt saubere Seitenansichten wie user-profile.html Und message.html Angezeigt, anstatt dass viele Seiten profile/1, profile/2 Und profile/3 Sind. Ich kann jetzt Berichte verarbeiten, um festzustellen, wie viele Benutzerprofile angezeigt werden.

Wenn jemand etwas dagegen hat, warum dies in der Analytik eine schlechte Praxis ist, würde ich mich sehr freuen, davon zu hören. Die Verwendung von Google Analytics ist relativ neu. Sie sind sich also nicht sicher, ob dies der beste Ansatz ist oder nicht.

1
Fizzix

Ich schlage vor, die Segmentanalyse-Bibliothek zu verwenden und unsere Angular-Schnellstartanleitung zu befolgen. Mit einer einzigen API können Sie Seitenaufrufe und Benutzerverhaltensaktionen nachverfolgen. Wenn Sie über ein SPA verfügen, können Sie zulassen, dass die Komponente RouterOutlet beim Rendern der Seite verarbeitet wird, und ngOnInit zum Aufrufen von page -Aufrufen verwenden. 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. ????

1
William

Verschmelzen noch mehr mit Pedro Lopez Antwort,

Ich habe dieses Modul zu meinem ngGoogleAnalytis-Modul hinzugefügt (das ich in vielen Apps wiederverwende):

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

in diesem Fall habe ich einen Tag in meinem Index-Link:

  <base href="/store/">

dies ist nützlich, wenn Sie den HTML5-Modus in 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()
          });
        }
      );
    }
  ]);