Integrazione con Angular

L'integrazione di Angular non è molto diversa dall'integrazione di Pure JavaScript. Devi solo aggiungere lo script Metricalp al tuo file index.html. Quindi, Metricalp verrà automaticamente integrato nella tua app Angular e inizierà a monitorare gli eventi di visualizzazione dello schermo. Anche se non abbiamo ancora una libreria ufficiale di Angular (in programma per il futuro), non ne hai nemmeno bisogno. Con questi semplici passaggi integrerai sempre la versione più recente e stabile di Metricalp, e sarà sicura per il tipo. In questa documentazione impareremo anche come attivare eventi personalizzati. Con quel metodo, puoi anche disabilitare la cattura automatica del percorso e attivare manualmente gli eventi di visualizzazione dello schermo. Per i dettagli, controlla Eventi personalizzati & Props

Aggiungi lo script Metricalp:

Supponiamo che tu abbia avviato un nuovo progetto Angular con ng cli come `ng new my-app`. Quindi, all'interno del tuo file index.html (src/index.html) aggiungi lo script Metricalp come descritto in Pure JavaScript Embed

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

- Non dimenticare di cambiare YOUR_TID con il tuo numero di tid, noto anche come ID di tracciamento, come descritto in Embed Share Tracker

Abbiamo aggiunto allowLocalhost perché Metricalp non funziona in localhost per impostazione predefinita per proteggere i limiti della tua quota. Abbiamo consentito localhost a fini di test. Potresti volerlo rimuovere dopo averlo testato una volta per risparmiare la tua quota. Per informazioni dettagliate, controlla allow localhost & exclude me docs.

Questo è tutto, hai integrato la tua app Angular con Metricalp, evviva! 🚀

Per impostazione predefinita, Metricalp inizia automaticamente a raccogliere eventi di visualizzazione dello schermo e cambiamenti di percorso (può essere disabilitato con l'opzione data-disable-auto-route-catch consulta API reference per i dettagli e tutte le altre personalizzazioni).

Attiva eventi personalizzati con sicurezza di tipo:

Creiamo un nuovo file metricalp-tracker.ts nella root dell'app (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);
        }
        

Ora possiamo usare la funzione metricalpEvent per attivare eventi personalizzati. Importiamolo e usiamolo nella nostra app. Ad esempio (src/app/app.component.ts) e attivare un evento personalizzato quando l'utente clicca sul pulsante di salvataggio.

        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 });
          }
        }
        

Modifica il file src/app/app.component.html e aggiungi un pulsante per testarlo.

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

Questo è tutto, ora puoi attivare eventi personalizzati con sicurezza di tipo perché abbiamo utilizzato i tipi di eventi come Enums. Puoi anche disabilitare la cattura automatica del percorso e attivare manualmente un evento di visualizzazione dello schermo con MetricalpEventTypes.ScreenView come abbiamo definito sopra. Inoltre, puoi allegare dati extra all'evento come props personalizzati, per i dettagli consulta Eventi personalizzati & Props

Controlla anche la documentazione completa dell'API per personalizzare lo script come desideri: API reference