javascript - onepage - google tag manager angular 2

Seguimiento de vistas de página de Google Analytics en Angular2

Question

Construí un nuevo sitio usando Angular 2 como front-end. Como todo se realiza a través del estado de inserción, no hay cargas de página que normalmente activen el código de Google Analytics para enviar una vista de página a los servidores de Google.

¿Cómo puedo enviar eventos de vista de página manualmente a Google para que pueda rastrear lo que los usuarios de mi sitio están viendo?

Answer 1

Ampliando la respuesta de Ian. Puede usar las funciones integradas de Rx para manejar la distinción entre las rutas actuales y las nuevas.

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);
            });
        }
    }

Estamos utilizando el operador distinctVeinteChanged para hacer que el observador solo emita elementos que sean del tipo NavigationEnd y no tengan la misma ruta que el elemento emitido anteriormente.

Answer 2

Logré hacer que esto funcionara suscribiéndome a los cambios en el enrutador, comprobando que la ruta realmente había cambiado (a veces recibía múltiples eventos en algunas rutas) y luego enviando la nueva ruta a Google.

app.component.ts

import { ... } from ''...'';

// Declare ga function as ambient
declare var ga:Function;

@Component({ ... })

export class AppComponent {
    private currentRoute:string;

    constructor(_router:Router) {
        // Using Rx''s built in `distinctUntilChanged ` feature to handle url change c/o @dloomb''s answer
        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) => {
            ga(''set'', ''page'', x.url);
            ga(''send'', ''pageview'')
        });
      }
    }
}

También debe incluir el código de Google Analytics en su archivo de índice principal antes de cargar su aplicación angular2 para que el objeto ga global exista, pero no desea enviar la vista inicial dos veces. Para hacer esto, elimine la siguiente línea de la secuencia de comandos de GA

index.html

<script>
  (function(i,s,o,g,r,a,m){...})(window,document,''script'',''https://www.google-analytics.com/analytics.js'',''ga'');

  ga(''create'', ''UA-XXXXXXXX-X'', ''auto'');
  // Remove this line to avoid sending the first page view twice.
  //ga(''send'', ''pageview'');

</script>
<!-- 
    Load your ng2 app after ga. 
    This style of deferred script loading doesn''t guarantee this will happen
    but you can use Promise''s or what works for your particular project. 
-->
<script defer type="text/javascript" src="/app.js"></script>

Usando una biblioteca de terceros

Como alternativa a la implementación de GA usted mismo, la biblioteca Angulartics2 también es una herramienta popular para implementar el seguimiento de GA y también se integra con otros proveedores de análisis.

Answer 3

Si se encuentra con este problema después de agosto de 2017 , es muy probable que deba usar gtag.js (etiqueta de sitio global de Google Universal Analytics) en lugar de la gtag.js anterior analytics.js . Le sugiero que compruebe la diferencia entre ambos en la página Migrar de analytics.js a gtag.js , así como también cómo funciona gtag.js en las aplicaciones de una sola página antes de continuar.

Cuando obtiene su fragmento de código de Google Analytics se ve así:

<!-- 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>

Debe eliminar la última línea del script y agregar el resto a su index.html .

Luego, debe agregar la línea que eliminó del script anterior a su código y agregar la página a la que realizar el seguimiento . Básicamente es casi lo mismo que los chicos sugeridos para analytics.js pero ahora usas la función gtag.js

Por ejemplo, si desea rastrear todas las páginas que abre aquí, está el código de muestra:

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 ha leído la documentación del gtag.js entonces sabrá que podría haber un montón de opciones de seguimiento, pero me concentraré en el uso más básico aquí.