Angular 4+ usando Google Analytics

Solución:

En primer lugar, debe instalar mecanografía para Google Analytics en su devDependencies

npm install --save-dev @types/google.analytics

Luego agregue su código de seguimiento en la base index.htmly elimine la última línea como se muestra a continuación:

  Loading...
  

El siguiente paso consiste en actualizar su constructor de componentes de inicio para el seguimiento de eventos.

constructor(public router: Router) 
    this.router.events.subscribe(event => 
      if (event instanceof NavigationEnd) 
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
      
    );
  

Si desea realizar un seguimiento de algún evento específico, también puede crear un servicio e inyectarlo en cualquier componente en el que desee implementar el seguimiento de eventos.

// ./src/app/services/google-analytics-events-service.ts

import Injectable from "@angular/core";

@Injectable()
export class GoogleAnalyticsEventsService 

  public emitEvent(eventCategory: string,
                   eventAction: string,
                   eventLabel: string = null,
                   eventValue: number = null) 
    ga('send', 'event',  eventCategory, eventLabel, eventAction, eventValue );
  

Entonces, si desea rastrear un clic en el componente de su hogar, por ejemplo, todo lo que necesita hacer es inyectar el GoogleAnalyticsEventsService y llama al emitEvent() método.

El código fuente actualizado del componente de inicio:

constructor(public router: Router, public googleAnalyticsEventsService: GoogleAnalyticsEventsService) 
    this.router.events.subscribe(event => 
      if (event instanceof NavigationEnd) 
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
      
    );
  
  submitEvent()  // event fired from home.component.html element (button, link, ... )
    this.googleAnalyticsEventsService.emitEvent("testCategory", "testAction", "testLabel", 10);
  

Me sorprende que nadie de aquí haya mencionado Administrador de etiquetas de Google aún (que es la versión del script que la consola de Google Analytics genera para mí en los últimos años, cada vez que agrego una nueva identidad).

Aquí hay una solución que se me ocurrió hoy, que es una variación de las soluciones ya mencionadas en las otras respuestas, un adaptador al script Tag Manager de Google. Creo que sería útil para las personas que migraron de ga() para gtag() (una migración que se recomienda hasta donde yo sé).

analytics.service.ts

declare var gtag: Function;

@Injectable(
  providedIn: 'root'
)
export class AnalyticsService 

  constructor(private router: Router) 

  

  public event(eventName: string, params: ) 
    gtag('event', eventName, params);
  

  public init() 
    this.listenForRouteChanges();

    try 

      const script1 = document.createElement('script');
      script1.async = true;
      script1.src = 'https://www.googletagmanager.com/gtag/js?id=' + environment.googleAnalyticsKey;
      document.head.appendChild(script1);

      const script2 = document.createElement('script');
      script2.innerHTML = `
        window.dataLayer = window.dataLayer  catch (ex) 
      console.error('Error appending google analytics');
      console.error(ex);
    
  

  private listenForRouteChanges() 
    this.router.events.subscribe(event => 
      if (event instanceof NavigationEnd) 
        gtag('config', environment.googleAnalyticsKey, 
          'page_path': event.urlAfterRedirects,
        );
        console.log('Sending Google Analytics hit for route', event.urlAfterRedirects);
        console.log('Property ID', environment.googleAnalyticsKey);
      
    );
  

Requisitos previos:

• Declarar el servicio en las importaciones[] sección de tu app.module.ts.
• En su app.component.ts (o cualquier componente de nivel superior que contenga el en su plantilla), inyecte AnalyticsService y llame this.analytics.init() lo antes posible (por ejemplo, ngOnInit)
• En environment.ts (en mi caso, environment.prod.ts), agregue el ID de Analytics como googleAnalyticsKey: 'UA-XXXXXXX-XXXX'

Cargue Google Analytics, utilizando variables de entorno, de forma asíncrona;

(Funciona en Angular 5)

(Usando la respuesta de @Laiso)

google-analytics.service.ts

import Injectable from '@angular/core';
import NavigationEnd, Router from '@angular/router';
declare var ga: Function;

@Injectable()
export class GoogleAnalyticsService 

  constructor(public router: Router) 
    this.router.events.subscribe(event => 
      try 
        if (typeof ga === 'function') 
          if (event instanceof NavigationEnd) 
            ga('set', 'page', event.urlAfterRedirects);
            ga('send', 'pageview');
            console.log('%%% Google Analytics page view event %%%');
          
        
       catch (e) 
        console.log(e);
      
    );

  


  /**
   * Emit google analytics event
   * Fire event example:
   * this.emitEvent("testCategory", "testAction", "testLabel", 10);
   * @param string eventCategory
   * @param string eventAction
   * @param string eventLabel
   * @param number eventValue
   */
  public emitEvent(eventCategory: string,
   eventAction: string,
   eventLabel: string = null,
   eventValue: number = null) 
    if (typeof ga === 'function') 
      ga('send', 'event', 
        eventCategory: eventCategory,
        eventLabel: eventLabel,
        eventAction: eventAction,
        eventValue: eventValue
      );
    
  

Dentro de app.component o cualquier componente:

 // ... import stuff

 import  environment  from '../../../environments/environment';

 // ... declarations

 constructor(private googleAnalyticsService: GoogleAnalyticsService)
    this.appendGaTrackingCode();
 

 private appendGaTrackingCode() 
    try 
      const script = document.createElement('script');
      script.innerHTML = `
        (function(i,s,o,g,r,a,m)i['GoogleAnalyticsObject']=r;i[r]=i[r])(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
       
        ga('create', '` + environment.googleAnalyticsKey + `', 'auto');
      `;
      document.head.appendChild(script);
     catch (ex) 
     console.error('Error appending google analytics');
     console.error(ex);
    
  

// Somewhere else we can emit a new ga event
this.googleAnalyticsService.emitEvent("testCategory", "testAction", "testLabel", 10);

---

---

Utiliza Nuestro Buscador