Site icon Mi blog personal

Seguimiento de eventos con Google Analytics en angular

Santos Pérez

El seguimiento de eventos es una excelente manera de rastrear el comportamiento del usuario en tu aplicación y no requiere mucho esfuerzo para implementar. Suponiendo que tu aplicación se haya implementado utilizando la herramienta Angular ng-cli, puedes agregar una directiva de atributos a tu aplicación que enviará eventos de clic a tu Google Analytics en pocos minutos.

Agregando Google Analytics

Para implementar el seguimiento de eventos en tu aplicación Angular, primero debes agregar Google Analytics. Para esto, debes de ir al Dashboard de Google Analytics y después ir a configuración para poder sacar el siguiente script:

<!-- Google Analytics --> 
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m[removed].insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview');
</script>
 <!-- End Google Analytics -->

Creando una directiva

El siguiente paso es crear una directiva de atributo. Utilizando la herramienta ng-cli, ejecuta lo siguiente:

ng generate directive button

Esto creará una directiva también  actualizará el archivo app.module.ts. Dentro de esa directiva, agrega el siguiente fragmento de código.

import { Directive,HostListener,Input } from '@angular/core';


@Directive({
  selector: '[eventTracker]'
})
export class ButtonDirective {

  @Input('eventTracker') option:any;

  @HostListener('click', ['$event']) onClick($event){

    (window).ga('send', 'event', this.option.category, this.option.action, {
      hitCallback: function() {

        console.log('Tracking is successful');

      }

    });

  }
  constructor() { }

}

Ese fragmento de código crea una directiva de atributo que se puede agregar a cualquier etiqueta de elemento en la que desees realizar el seguimiento de los clics. He aquí un ejemplo de cómo usarlo

<div style="text-align:center">   <h1>     <button [eventTracker]='{"category":"user","action":"click"}'>       Click Me     </button>     Welcome to {{title}}!   </h1>   <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="> </div> <h2>Here are some links to help you start: </h2> <ul>   <li>     <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>   </li>   <li>     <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>   </li>   <li>     <h2><a target="_blank" href="https://blog.angular.io//">Angular blog</a></h2>   </li> </ul>

Revisando Google Analytics

Una vez que se creó la directiva de seguimiento de eventos, adjúntala a una etiqueta, inicia la aplicación y haz clic en esa etiqueta. Tu Google Analytics debería haber capturado el evento.

Exit mobile version