Integrar tu aplicación Angular con Google Analytics

Recientemente publiqué un artículo sobre cómo integrar React con Google Analytics (GA), y resulta que siendo Angular una de las tecnologías que más utilizo en mi vida cotidiana, no había hecho el homólogo de integrar Angular con GA.

Pues cómo lo dije antes, no es objetivo de este artículo, decir porque es o no una buena opción utilizar GA, ni comparar esta herramientas con muchas otras opciones que hay actualmente. Solo pretendo de manera muy sencilla y práctica, que puedas integrar tu aplicación en Angular con GA.

Integrar Google Analytics en la aplicación Angular

Para integrar Angular con GA, no haré uso de ninguna dependencia externa o cosas semejantes. Solo por medio de lo que brinda por defecto un proyecto de Angular, vas a ser capaz de integrarlo.

Primeramente necesitas crear tu cuenta en GA y adicionar tu aplicación. Esto es muy sencillo de hacer una vez que entras en GA, así que no me voy a enfocar en ese aspecto, sino en la integración en sí. Una vez que has agregado el dominio de tu sitio web a GA, solo necesitas el identificador que te brindan y con el cual procederemos con la integración.

Primeramente definiremos las variables necesarias en la configuración del proyecto. Con las variables es posible facilitar en lo posterior, los diferentes entornos de despliegue (producción, desarrollo, etc) que pueda tener el proyecto. A continuación un ejemplo de cómo puede quedar el archivo de configuraciones:

src/environments/environment.ts

export const environment = {
  production: false,
  googleAnalyticsId: ''
}

A continuación, es necesario agregar al proyecto, el script de integración que GA brinda. Esto se logra, agregando el script al fichero index.html del proyecto.

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New App</title>
  ...

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

  ...
</head>
<body>
  <app-root></app-root>
</body>
</html>

Completados los pasos anteriores, solo queda integrar GA al sistema de rutas de Angular. Para lograr esto, hay que suscribirse a los eventos que se originan de las rutas y en cada cambio de ruta, enviar a GA la respectiva notificación.

src/app/app.component.ts

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

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

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

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

Conclusiones

Espero que con estos sencillos pasos, hayas sido capaz de integrar tu aplicación y ya estés utilizando los inmensos beneficios que brinda Google Analytics. Un ejemplo práctico de integración de GA con Angular, es el proyecto Binary Coffee en cuestión, así que puedes llegarte por su código fuente y mirar cómo lo antes vistos está puesto en práctica.