Integration mit SvelteKit

Die Integration von SvelteKit unterscheidet sich nicht viel von der reinen JavaScript Integration. Sie müssen lediglich das Metricalp-Skript zu Ihrer index.html-Datei hinzufügen. Metricalp wird dann automatisch in Ihre SvelteKit-App integriert und beginnt mit der Erfassung von Bildschirmansichtsereignissen. Auch wenn wir noch keine offizielle SvelteKit-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, und es wird typensicher sein. In dieser Dokumentation lernen wir auch, wie man benutzerdefinierte Ereignisse auslöst. Mit dieser Methode können Sie auch die automatische Routenverfolgung deaktivieren und screen_view-Ereignisse manuell auslösen. Für Details siehe Benutzerdefinierte Ereignisse & Attribute.

Metricalp-Skript hinzufügen:

Wir gehen davon aus, dass Sie ein neues SvelteKit-Projekt mit dem offiziellen CLI wie `npm create svelte@latest my-app` erstellt haben. Fügen Sie dann in Ihrer app.html-Datei (src/app.html) zwischen den"<head></head>"-Tags, direkt vor dem "%sveltekit.head%", das Metricalp-Skript hinzu, wie in Pure JavaScript Einbettung beschrieben.

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

- Vergessen Sie nicht, YOUR_TID mit Ihrer Tracker-ID zu ersetzen, wie in Embed Share Tracker beschrieben.

Wir haben allowLocalhost hinzugefügt, da Metricalp standardmäßig nicht in localhost funktioniert, um Ihre Quotenlimits zu schützen. Wir haben localhost zu Testzwecken erlaubt. Sie möchten es vielleicht entfernen, nachdem Sie es einmal getestet haben, um Ihre Quote zu sparen. Weitere Informationen finden Sie unter allow localhost & exclude me docs.

Das ist alles, Sie haben Ihre SvelteKit-App mit Metricalp integriert, hurra 🚀

Standardmäßig beginnt Metricalp automatisch mit der Erfassung von screen_view-Ereignissen und Routenänderungen (dies kann mit der Option data-disable-auto-route-catch deaktiviert werden, siehe API-Referenz für Details und alle weiteren Anpassungen).

Benutzerdefinierte Ereignisse mit Typensicherheit auslösen:

Erstellen wir eine neue Datei metricalp-tracker.ts im Stammverzeichnis der App (src/metricalp-tracker.ts)

typescript

        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. Importieren und verwenden wir es in unserer App. Zum Beispiel in src/routes/+page.svelte und lösen ein benutzerdefiniertes Ereignis aus, wenn der Benutzer auf die Schaltfläche Speichern klickt.

typescript

      <script lang="ts">
        import { MetricalpEventTypes, metricalpEvent } from '../metricalp-tracker';
      </script>
      
      <button
        on:click={() => metricalpEvent({ type: MetricalpEventTypes.ClickSave })}
      >
        Save</button
      >

Das war's, jetzt können Sie benutzerdefinierte Ereignisse mit Typensicherheit auslösen, da wir die Ereignistypen als Enums verwendet haben. Sie können auch die automatische Routenverfolgung deaktivieren und ein screen_view-Ereignis manuell mit MetricalpEventTypes.ScreenView auslösen, wie oben definiert. Sie können dem Ereignis auch zusätzliche Daten als benutzerdefinierte Attribute anhängen. Für Details siehe Benutzerdefinierte Ereignisse & Attribute.

Bitte sehen Sie sich auch die vollständige API-Referenz an, um das Skript nach Ihren Wünschen anzupassen: API-Referenz