Integration mit Vue.js

Die Integration von Vue.js ist nicht viel anders als die Integration von Purem JavaScript. Du musst lediglich das Metricalp-Skript zu deiner index.html-Datei hinzufügen. Metricalp wird dann automatisch in deine Vue.js-App integriert und beginnt damit, Bildschirmansichtsereignisse zu verfolgen. Obwohl wir noch keine offizielle Bibliothek für Vue.js haben (geplant für die Zukunft), brauchst du sie nicht einmal. Mit diesen einfachen Schritten wirst du immer die neueste und stabilste Version von Metricalp integrieren, und sie wird typensicher sein. In dieser Dokumentation werden wir auch lernen, wie man benutzerdefinierte Ereignisse auslöst. Mit dieser Methode kannst du auch das automatische Routen-Catching deaktivieren und screen_view-Ereignisse manuell auslösen. Für Details siehe Benutzerdefinierte Ereignisse & Eigenschaften.

Metricalp-Skript hinzufügen:

Wir gehen davon aus, dass du ein neues Vue.js-Projekt mit Vite gestartet hast, wie `yarn create vite my-vue-app --template vue-ts`. Füge dann in deiner index.html-Datei (./index.html) im <head></head>-Bereich das Metricalp-Skript wie im Pure JavaScript Embed beschrieben hinzu.

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

- Vergiss nicht, YOUR_TID durch deine tid-Nummer, auch bekannt als Tracker ID, zu ersetzen, wie im Embed Share Tracker beschrieben.

Wir haben allowLocalhost hinzugefügt, weil Metricalp standardmäßig nicht auf localhost funktioniert, um deine Quotengrenzen zu schützen. Wir haben localhost für Testzwecke erlaubt. Du möchtest es vielleicht entfernen, nachdem du es einmal getestet hast, um dein Kontingent zu schonen. Für detaillierte Informationen siehe allow localhost & exclude me docs.

Das war's, du hast deine Vue.js-App mit Metricalp integriert, juhu 🚀

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

Benutzerdefinierte Ereignisse mit Typensicherheit auslösen:

Lass uns eine neue Datei metricalp-tracker.ts im src-Ordner erstellen (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. Importiere sie und verwende sie in deiner App. Zum Beispiel (src/App.vue) und löse ein benutzerdefiniertes Ereignis aus, wenn der Benutzer auf die Schaltfläche Speichern klickt.

typescript

        <script setup lang="ts">
        import { metricalpEvent, MetricalpEventTypes } from './metricalp-tracker';
        
        const handleClick = () => {
          metricalpEvent({ type: MetricalpEventTypes.ClickSave });
        };
        </script>
        
        <template>
          <button type="button" @click="handleClick()">Speichern</button>
        </template>

Das ist alles, jetzt kannst du benutzerdefinierte Ereignisse mit Typensicherheit auslösen, weil wir die Ereignistypen als Enums verwendet haben. Du kannst auch das automatische Routen-Catching deaktivieren und ein screen_view-Ereignis manuell mit MetricalpEventTypes.ScreenView auslösen, wie oben definiert. Du kannst auch zusätzliche Daten an das Ereignis anhängen als benutzerdefinierte Props, für Details siehe Benutzerdefinierte Ereignisse & Eigenschaften

Sieh dir auch die vollständige API-Referenz an, um das Skript nach Belieben anzupassen: API-Referenz