Bice Google Tag Manager Logger

TL;DR; Encapsula un push al window.dataLayer con el siguiente objeto

{
  "userId": "0014100023bka3dVBA",
  "event": "CLICK_RETRY_FE-MI-APP",
  "view": "lib-period-summary",
  "component": {
    "name": "TransactionsComponent",
    "service": "getTransactions"
  }
}

NOTA: Tests no están funcionando aún por problemas respecto al objeto window, probablemente por correr en ambiente node

Descripción

Se pueden utilizar los métodos click, error y load dentro de la librería para registrar un evento dentro del Google Tag Manager.

• click registrará un evento gatillado por el usuario al presionar un botón, los definidos inicialmente se encuentran en el enum

  enum ButtonCommand {
    Download = 'DOWNLOAD',
    Retry = 'RETRY',
    Navigation = 'NAVIGATION',
    Other = 'OTHER'
  }

  • Download refiere a algún botón para descarga
  • Retry corresponde a botón de reintentos
  • Navigation corresponde a botón para navegar a otro componente del sitio
  • Other en caso de utilizar otro tipo de botón no definido en puntos anteriores
• error registrará eventos de error que pueden ser puestos en algún catch dentro del componente o service
• load se puede utilizar para cargas iniciales de aplicación o dónde no hay interacción de usuario

Instalación

Debiera estar asociado al registry del banco en Nexus

npm install bice-gtm-logger

Uso

El uso es sencillo, ejemplo de un push por click de un botón de reintento

// ... other important imports
import * as gtm from "../src/utils/gtm-actions";

@Component({
  selector: 'lib-transactions',
  templateUrl: './transactions.component.html',
  styleUrls: ['./transactions.component.scss']
})
export class TransactionsComponent {
  retryTransactions(cardNumber) {
    gtm.click(gtm.ButtonCommand.Retry,
      "fe-mi-app",
      "0014100023bka3dVBA",
      "lib-transactions",
      "TransactionsComponent",
      "getTransactions")
    this.getTransactions(cardNumber);
  }
}