Suivi des pages vues sur Google Analytics en Angular2

développer la réponse de Ian. Vous pouvez utiliser les fonctionnalités intégrées de Rx pour gérer la distinction entre les routes actuelles et nouvelles.

import { NavigationEnd, Router } from '@angular/router';

declare var ga: any;

export class AppComponent {
        constructor(public router: Router) {
            router.events.distinctUntilChanged((previous: any, current: any) => {
                if(current instanceof NavigationEnd) {
                    return previous.url === current.url;
                }
                return true;
            }).subscribe((x: any) => {
                console.log('router.change', x);
                ga('send', 'pageview', x.url);
            });
        }
    }

nous utilisons l'opérateur distinctUntilChanged pour que l'observateur n'émette que des éléments de type NavigationEnd qui n'ont pas la même route que l'élément émis précédemment.

Si vous rencontrez ce problème après le mois d'août 2017 alors vous devriez probablement utiliser gtag.js (Google Universal Analytics Global Site Tag) au lieu de l'ancienne google analytics.js. Je vous suggère de vérifier la différence entre les deux dans migrer à partir de l'analyse.js à gtag.js page, ainsi que Comment gtag.js fonctionne en Single page applications avant de continuer.

quand vous obtenez votre code snippet de Google Analytics il ressemble à ceci:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<%= GOOGLE_ANALYTICS_ID %>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<%= GOOGLE_ANALYTICS_ID %>'); <!-- Remove that one -->
</script>

vous devez supprimer la dernière ligne du script et ajouter le reste à votre index.html.

alors vous devez ajouter la ligne que vous avez supprimée du script ci-dessus à votre code et ajouter la page à suivre. Fondamentalement, il est presque le même que les gars ci-dessus suggéré pour analytics.js mais maintenant, vous utilisez le gtag.js fonction.

Par exemple, si vous souhaitez suivre toutes les pages que vous ouvrez voici l'exemple de code:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/distinctUntilChanged';

// This still has to be declared
declare var gtag: Function;

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
})
export class AppComponent implements OnInit {

    constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.distinctUntilChanged((previous: any, current: any) => {
            // Subscribe to any `NavigationEnd` events where the url has changed
            if(current instanceof NavigationEnd) {
                return previous.url === current.url;
            }
            return true;
        }).subscribe((x: any) => {
            gtag('config', '<%= GOOGLE_ANALYTICS_ID %>', {'page_path': x.url});
        });
    }
}

si vous avez lu la documentation pour le gtag.js alors vous savez qu'il pourrait y avoir des tonnes d'options de suivi, mais je me concentre sur l'utilisation la plus élémentaire ici.

dans L'angle 6, je suggère pour l'application.composant.ts:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router'
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  constructor(
    private router: Router,
    private titleService: Title
  ){ }

  ngOnInit() {
     this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        (<any>window).gtag('config', '<%= GOOGLE_ANALYTICS_ID %>', {
          'page_title' : this.titleService.getTitle(),
          'page_path': event.urlAfterRedirects
        });
      }
    });
  }

}

Pour l'index.html:

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=<%= GOOGLE_ANALYTICS_ID %>"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
  </script>

en supposant que chaque Route angulaire a son propre titre en app.routing.ts:

   {
    path: 'shop',
    component: ShopComponent,
    data: {
      title: ' == This is Shop Component Title =='
    },
    canActivate: [AuthGuard]
  },

les solutions mentionnées précédemment afficheront toujours le même titre de page pour chaque route sur le rapport Google Analytics. Afin d'utiliser les titres de Route angulaires correspondants ( au lieu d'index.html <title> le contenu de la balise tout le temps), utilisez le code ci-dessous dans app.component.ts

  this.router.events.subscribe(event => {

  if (event instanceof NavigationEnd) {
    (<any>window).ga('set', 'page', event.urlAfterRedirects);

    // ----------
    //use the following 3 lines of code to use
    //correnct titles for routes        
    // ----------

    let currentRoute = this.route.root;
    let title = this.getPageTitle(currentRoute);
    (<any>window).ga('set', 'title', title);

    (<any>window).ga('send', 'pageview');

  }
});

...où getPageTitle la méthode est la suivante:

getPageTitle = function (currentRoute: ActivatedRoute) {
  let data;
    do {
      const childrenRoutes = currentRoute.children;
      currentRoute = null;
      childrenRoutes.forEach(route => {

      if (route.outlet === 'primary') {
        currentRoute = route;
        data = route.snapshot.data;
      }
    });
  } while (currentRoute);
  return data.title;
};

Note: Cette solution s'applique à Anguler 5 et ci-dessous. Dans L'angle 6, Vous pouvez aussi utiliser TitleService