Integración con Vue.js

La integración de Vue.js no es muy diferente de la integración de JavaScript Puro. Solo necesitas añadir el script de Metricalp a tu archivo index.html. Metricalp se integrará automáticamente en tu aplicación Vue.js y comenzará a rastrear eventos de vista de pantalla. Aunque aún no tenemos una librería oficial de Vue.js (planeada para el futuro), ni siquiera la necesitas. Con estos simples pasos, siempre tendrás la versión más reciente y estable de Metricalp integrada y será segura. En esta documentación también aprenderemos cómo disparar eventos personalizados. Con este 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.

Agregar el script de Metricalp:

Suponemos que has iniciado un nuevo proyecto Vue.js con Vite como `yarn create vite my-vue-app --template vue-ts`. Luego, dentro de tu archivo index.html (./index.html) dentro de las etiquetas <head></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 de tid, conocido también como Tracker ID, como se describe en Embed Share Tracker

Hemos añadido allowLocalhost porque, por defecto, Metricalp no funciona en localhost para proteger tus límites de cuota. Permitimos localhost con fines de prueba. Es posible que desees eliminarlo después de probarlo una vez para ahorrar en tu cuota. Para información detallada, consulta permitir localhost & excluirme docs.

Eso es todo, has integrado tu aplicación Vue.js con Metricalp, ¡hurra 🚀!

Por defecto, Metricalp comienza automáticamente a recopilar eventos de screen_view y cambios de ruta (puede deshabilitarse con la opción data-disable-auto-route-catch, consulta referencia API para detalles y todas las demás personalizaciones).

Disparar eventos personalizados con seguridad de tipo:

Vamos a crear un nuevo archivo metricalp-tracker.ts en la carpeta 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);
        }

Ahora podemos usar la función metricalpEvent para disparar eventos personalizados. Importémosla y usémosla en nuestra aplicación. Por ejemplo (src/App.vue) y dispara un evento personalizado cuando el usuario hace clic en el botón guardar.

typescript

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

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

Consulta también la referencia completa de la API para personalizar el script como desees: referencia API