Angular + Google Analytics

el

 



Configuración GA

Iniciar sesión en Google Analytics, y una vez dentro de la consola, clic en Administrar





Luego, clic en Flujo de datos




Elegir Web, para empezar a recoger datos


Completar con la url del sitio, y clic en el botón Crear flujo


Se va crear el flujo y se mostrará como instalarlo en la página. Elegir la opción Instalar manualmente


Configuración Angular

Dentro de la carpeta src/environments del proyecto, crear los archivos para cada entorno
  • environment.prod.ts
  • environment.ts
Dentro del archivo environment.prod.ts, configurar el ID DE MEDICION proporcionado por GA


De la siguiente forma

export const environment = {
    production: true,
    googleAnalyticsId: 'G-*******'
}

Nota: reemplazar ***** por el ID


Agregar en el archivo src/index.html, dentro de la sección <head>, el script devuelto por GA



Por último, en el archivo src/app/app.component.ts, agregar las siguientes líneas

import { Component } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { environment } from 'src/environments/environment';

declare let gtag: (property: string, value: any, configs: any) => {};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        gtag('config', environment.googleAnalyticsId, {
          page_path: event.urlAfterRedirects
        });
      }
    });
  }
}
    

Con esto, ya debería comenzar a recoger datos y mostrarlos en la consola de GA

Comentarios

Publicar un comentario