Integrazione con Vue.js

L'integrazione con Vue.js non è molto diversa dall'integrazione con JavaScript Puro. È sufficiente aggiungere lo script di Metricalp al file index.html. Metricalp si integrerà automaticamente con la tua app Vue.js e inizierà a tracciare gli eventi di visualizzazione delle schermate. Anche se non abbiamo ancora una libreria ufficiale per Vue.js (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. In questa documentazione impareremo anche come attivare eventi personalizzati. Con questo metodo, puoi anche disattivare la cattura automatica delle rotte e attivare manualmente gli eventi di screen_view. Per i dettagli consulta Eventi Personalizzati & Props.

Aggiungi lo script di Metricalp:

Supponiamo che tu abbia avviato un nuovo progetto Vue.js con Vite come `yarn create vite my-vue-app --template vue-ts`. Poi all'interno del file index.html (./index.html) tra i tag <head></head> aggiungi lo script di Metricalp come descritto in JavaScript Puro Embed

html
<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 tid, noto anche come Tracker ID, come descritto in Embed Share Tracker

Abbiamo aggiunto allowLocalhost perché di default Metricalp non funziona in localhost per proteggere i tuoi limiti di quota. Abbiamo consentito localhost per scopi di test. Potresti volerlo rimuovere dopo averlo testato una volta per risparmiare sulla tua quota. Per informazioni dettagliate consulta allow localhost & exclude me docs.

È tutto, hai integrato la tua app Vue.js con Metricalp, evviva 🚀

Di default, Metricalp inizia automaticamente a raccogliere eventi di screen_view e cambi di rotta (può essere disabilitato con l'opzione data-disable-auto-route-catch consulta API reference per dettagli e tutte le altre personalizzazioni).

Attivare eventi personalizzati con sicurezza:

Creiamo un nuovo file metricalp-tracker.ts nella cartella src (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);
        }

Ora possiamo usare la funzione metricalpEvent per attivare eventi personalizzati. Importiamola e usiamola nella nostra app. Ad esempio (src/App.vue) e attiviamo un evento personalizzato quando l'utente clicca sul pulsante di salvataggio.

typescript

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

È tutto, ora puoi attivare eventi personalizzati in modo sicuro perché abbiamo usato i tipi di eventi come Enums. Puoi anche disattivare la cattura automatica delle rotte e attivare manualmente un evento di screen_view con MetricalpEventTypes.ScreenView come definito sopra. Puoi anche allegare dati extra all'evento come props personalizzati, per dettagli consulta Eventi Personalizzati & Props

Consulta anche la Reference completa dell'API per personalizzare lo script come desideri: API reference