Integration mit Angular

Die Integration von Angular ist nicht viel anders als die Pure JavaScript Integration. Sie müssen nur das Metricalp-Skript zu Ihrer index.html-Datei hinzufügen. Dann wird Metricalp automatisch in Ihre Angular-App integriert und beginnt mit der Erfassung von Seitenansichten. Obwohl wir noch keine offizielle Angular-Bibliothek haben (geplant für die Zukunft), benötigen Sie diese nicht einmal. Mit diesen einfachen Schritten integrieren Sie immer die neueste und stabilste Version von Metricalp, die typensicher ist. In dieser Dokumentation lernen wir auch, wie man benutzerdefinierte Ereignisse auslöst. Mit dieser Methode können Sie auch das automatische Routen-Catch deaktivieren und Bildschirmansichtsereignisse manuell auslösen. Für Details bitte checken Benutzerdefinierte Ereignisse & Props

Fügen Sie das Metricalp-Skript hinzu:

Wir gehen davon aus, dass Sie ein neues Angular-Projekt mit ng cli wie `ng new my-app` gestartet haben. Fügen Sie dann das Metricalp-Skript in Ihre index.html-Datei ein (src/index.html), wie im Pure JavaScript Embed

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

- Vergessen Sie nicht, YOUR_TID durch Ihre tid-Nummer, auch bekannt als Tracker-ID, zu ersetzen, wie im Embed Share Tracker

Wir haben allowLocalhost hinzugefügt, da Metricalp standardmäßig nicht auf localhost funktioniert, um Ihre Quotenbeschränkungen zu schützen. Wir haben localhost für Testzwecke zugelassen. Sie möchten es möglicherweise entfernen, nachdem Sie es einmal getestet haben, um Ihre Quote zu sparen. Für detaillierte Informationen überprüfen Sie bitte allow localhost & exclude me docs.

Das war's, Sie haben Ihre Angular-App mit Metricalp integriert, hurra 🚀

Standardmäßig beginnt Metricalp automatisch mit der Sammlung von Bildschirmansichten und Routenänderungen (es kann mit der Option data-disable-auto-route-catch deaktiviert werden. Bitte checken Sie API-Referenz für Details und alle anderen Anpassungen).

Benutzerdefinierte Ereignisse mit Typensicherheit auslösen:

Lassen Sie uns eine neue Datei metricalp-tracker.ts im Stammverzeichnis der App erstellen (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);
        }
        

Jetzt können wir die Funktion metricalpEvent verwenden, um benutzerdefinierte Ereignisse auszulösen. Lassen Sie uns sie in unserer App importieren und verwenden. Zum Beispiel (src/app/app.component.ts) und ein benutzerdefiniertes Ereignis auslösen, wenn der Benutzer auf die Schaltfläche "Speichern" klickt.

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

Bearbeiten Sie die Datei src/app/app.component.html und fügen Sie eine Schaltfläche hinzu, um sie zu testen.

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

Das war's, jetzt können Sie benutzerdefinierte Ereignisse mit Typensicherheit auslösen, da wir Ereignistypen als Enums verwendet haben. Sie können auch das automatische Routen-Catch deaktivieren und ein Bildschirmansichtsereignis manuell mit MetricalpEventTypes.ScreenView auslösen, wie wir oben definiert haben. Außerdem können Sie dem Ereignis zusätzliche Daten als benutzerdefinierte Requisiten anhängen. Für Details checken Sie bitte Benutzerdefinierte Ereignisse & Props

Überprüfen Sie auch die vollständige API-Referenz, um das Skript nach Ihren Wünschen anzupassen: API-Referenz