Binary Coffee

Integrar tu aplicaci贸n Angular con Google Analytics

angular typescript 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.

GA-identifier

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.

Happy coding!

Opiniones
noavatar
Art铆culo muy claro y expl铆cito. Gracias. Te felicito. Igualmente por el rollo de tu p谩gina que me resulta bastante original. Un saludo