Integración con SvelteKit

La integración de SvelteKit no es muy diferente a la integración con JavaScript Puro. Solo necesitas añadir el script de Metricalp a tu archivo index.html. Metricalp se integrará automáticamente a tu aplicación SvelteKit y comenzará a rastrear eventos de vista de pantalla. Aunque aún no tenemos una biblioteca oficial para SvelteKit (planeada para el futuro), ni siquiera la necesitas. Con estos simples pasos, integrarás siempre la versión más reciente y estable de Metricalp y será seguro de tipo. En esta documentación, también aprenderemos cómo disparar eventos personalizados. Con ese método, también puedes desactivar la captura automática de rutas y disparar eventos de screen_view manualmente. Para más detalles, consulta Eventos Personalizados & Props.

Añadir el script de Metricalp:

Asumimos que has creado un nuevo proyecto SvelteKit con el cli oficial como `npm create svelte@latest my-app`. Luego, dentro de tu archivo app.html (src/app.html) entre las etiquetas "<head></head>" justo antes de "%sveltekit.head%"añade el script de Metricalp como se describe en JavaScript Puro Embed

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

- No olvides cambiar YOUR_TID por tu número tid, conocido como Tracker ID, como se describe en Embed Share Tracker

Hemos añadido allowLocalhost porque por defecto Metricalp no funciona en localhost para proteger los límites de tu cuota. Permitimos localhost para propósitos de prueba. Podrías querer eliminarlo después de probarlo una vez para ahorrar tu cuota. Para información detallada consulta allow localhost & exclude me docs.

Eso es todo, has integrado tu app SvelteKit con Metricalp, ¡hurra 🚀!

Por defecto, Metricalp comienza automáticamente a recoger eventos de screen_view y cambios de ruta (esto se puede desactivar con la opción data-disable-auto-route-catch, consulta API reference para detalles y otras personalizaciones).

Disparar eventos personalizados con seguridad de tipo:

Creemos un nuevo archivo metricalp-tracker.ts en la raíz de la 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);
        }

Ahora podemos usar la función metricalpEvent para disparar eventos personalizados. Vamos a importarla y usarla en nuestra aplicación. Por ejemplo, en src/routes/+page.svelte y dispara un evento personalizado cuando el usuario haga clic en el botón de guardar.

typescript

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

Eso es todo, ahora puedes disparar eventos personalizados con seguridad de tipo porque usamos tipos de eventos como Enums. También puedes desactivar la captura automática de rutas y disparar un evento de screen_view manualmente con MetricalpEventTypes.ScreenView como definimos arriba. También puedes adjuntar datos adicionales al evento como props personalizados, para detalles consulta Eventos Personalizados & Props

También consulta la Referencia Completa de la API para personalizar el script como desees: API reference