Integrazione con SvelteKit

L'integrazione con SvelteKit non è molto diversa da JavaScript puro. Devi solo aggiungere lo script di Metricalp nel tuo file index.html. Metricalp verrà automaticamente integrato nella tua app SvelteKit e inizierà a tracciare gli eventi di visualizzazione delle schermate. Anche se non abbiamo ancora una libreria ufficiale per SvelteKit (pianificata per il futuro), non ne hai bisogno. Con questi semplici passaggi integrerai sempre la versione più recente e stabile di Metricalp in modo sicuro e con tipizzazione. In questa documentazione vedremo anche come lanciare eventi personalizzati. Con questo metodo, puoi anche disabilitare l'acquisizione automatica delle rotte e lanciare eventi screen_view manualmente. Per maggiori dettagli, consulta Eventi personalizzati e Proprietà.

Aggiungi lo script di Metricalp:

Supponiamo che tu abbia creato un nuovo progetto SvelteKit con il cli ufficiale come `npm create svelte@latest my-app`. All'interno del tuo file app.html (src/app.html) tra i tag "<head></head>" appena prima del"%sveltekit.head%" aggiungi lo script di Metricalp come descritto in Embedding JavaScript Puro

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 ossia Tracker ID come descritto in Embed Share Tracker

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

Questo è tutto, hai integrato la tua app SvelteKit 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 altre personalizzazioni).

Lancia eventi personalizzati con sicurezza di tipo:

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

Ora possiamo usare la funzione metricalpEvent per lanciare eventi personalizzati. Importiamola e usiamola nella nostra app. Per esempio, nel file src/routes/+page.svelte, lancia un evento personalizzato quando l'utente clicca sul pulsante di salvataggio.

typescript

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

Questo è tutto, ora puoi lanciare eventi personalizzati con sicurezza di tipo perché abbiamo usato i tipi di eventi come Enums. Puoi anche disabilitare l'acquisizione automatica delle rotte e lanciare un evento screen_view manualmente con MetricalpEventTypes.ScreenView come definito sopra. Inoltre, puoi allegare dati extra all'evento come proprietà personalizzate, per dettagli consulta Eventi personalizzati e Proprietà

Consulta anche la Referenza Completa dell'API per personalizzare lo script come preferisci: API reference