Integración con Angular

La integración de Angular no es muy diferente de la Pure JavaScript integración. Solo necesitas agregar el script de Metricalp a tu archivo index.html. Luego, Metricalp se integrará automáticamente en tu aplicación Angular y comenzará a rastrear los eventos de vista de pantalla. Aunque aún no tenemos una biblioteca oficial de Angular (planeada para el futuro), ni siquiera la necesitas. Con estos sencillos pasos siempre integrarás la versión más reciente y estable de Metricalp, y será segura para el tipo. En esta documentación también aprenderemos cómo disparar eventos personalizados. Con ese método, también puedes deshabilitar la captura de rutas automática y disparar eventos de vista de pantalla manualmente. Para obtener más detalles, consulte Eventos personalizados & Props

Agregar el script de Metricalp:

Suponemos que has iniciado un nuevo proyecto de Angular con ng cli como `ng new my-app`. Luego, dentro de tu archivo index.html (src/index.html) agrega el script de Metricalp como se describe en Pure JavaScript Embed

<script src="https://cdn.metricalp.com/event/metricalp.js" data-allow-localhost="true" data-tid="YOUR_TID" defer></script>

- No olvides cambiar YOUR_TID por tu número de tid, también conocido como ID de Rastreador, como se describe en Embed Share Tracker

Hemos agregado allowLocalhost porque Metricalp no funciona en localhost por defecto para proteger los límites de tu cuota. Permitimos localhost con fines de prueba. Es posible que desees eliminarlo después de probarlo una vez para ahorrar tu cuota. Para obtener información detallada, consulta allow localhost & exclude me docs.

Eso es todo, has integrado tu aplicación Angular con Metricalp, ¡hurra! 🚀

Por defecto, Metricalp comienza automáticamente a recopilar eventos de vista de pantalla y cambios de ruta (se puede deshabilitar con la opción data-disable-auto-route-catch, por favor consulta API reference para obtener detalles y todas las demás personalizaciones).

Disparar eventos personalizados con seguridad de tipo:

Vamos a crear un nuevo archivo metricalp-tracker.ts en la raíz de la aplicación (src/app/metricalp-tracker.ts)

        type MetricalpEvent = {
          type: string;
          [key: string]: string | number | boolean | undefined;
        };
        
        declare global {
          interface Window {
            metricalp?: { event: (ev: MetricalpEvent) => void };
          }
        }
        
        export enum MetricalpEventTypes {
          ScreenView = 'screen_view',
          ClickSave = 'click_save',
        }
        
        export function metricalpEvent(event: MetricalpEvent) {
          if (typeof window === 'undefined' || !window['metricalp']?.event) {
            return;
          }
          window.metricalp?.event(event);
        }
        

Ahora podemos usar la función metricalpEvent para disparar eventos personalizados. Vamos a importarlo y usarlo en nuestra aplicación. Por ejemplo (src/app/app.component.ts) y disparar un evento personalizado cuando el usuario haga clic en el botón de guardar.

        import { Component } from '@angular/core';
        import { CommonModule } from '@angular/common';
        import { RouterOutlet } from '@angular/router';
        import { MetricalpEventTypes, metricalpEvent } from './metricalp-tracker';
        
        @Component({
          selector: 'app-root',
          standalone: true,
          imports: [CommonModule, RouterOutlet],
          templateUrl: './app.component.html',
          styleUrl: './app.component.css',
        })
        export class AppComponent {
          title = 'ng-metricalp-example';
        
          handleClick() {
            metricalpEvent({ type: MetricalpEventTypes.ClickSave });
          }
        }
        

Edita el archivo src/app/app.component.html y agrega un botón para probarlo.

      <main class="main">
        <button (click)="handleClick()">Guardar</button>
      </main>
      
      <router-outlet></router-outlet>
      
        

Eso es todo, ahora puedes disparar eventos personalizados con seguridad de tipo porque usamos tipos de eventos como Enums. También puedes deshabilitar la captura de rutas automática y disparar un evento de vista de pantalla manualmente con MetricalpEventTypes.ScreenView como lo definimos arriba. Además, puedes adjuntar datos adicionales al evento como props personalizados. Para obtener detalles, consulte Eventos personalizados & Props

También revisa la referencia completa de la API para personalizar el script como desees: API reference