Integración con Vue.js

Integre el análisis de Zenovay en su aplicación Vue.js o Nuxt utilizando la etiqueta del script de rastreo y la función global window.zenovay.

Instalación

Agregue el script de rastreo de Zenovay a su index.html:

<!-- index.html -->
<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

No se necesita ningún paquete npm. El script rastrea automáticamente las vistas de página y proporciona la función global window.zenovay para eventos personalizados.

Configuración con Vue 3

Composable de envoltorio

Cree un composable para envolver la función global window.zenovay y usarla en sus componentes Vue:

// composables/useZenovay.js
export function useZenovay() {
  const trackEvent = (name, properties) => {
    if (window.zenovay) {
      window.zenovay('track', name, properties);
    }
  };

  const trackGoal = (name, properties) => {
    if (window.zenovay) {
      window.zenovay('goal', name, properties);
    }
  };

  const trackPageview = () => {
    if (window.zenovay) {
      window.zenovay('page');
    }
  };

  const trackRevenue = (amount, currency, meta) => {
    if (window.zenovay) {
      window.zenovay('revenue', amount, currency, meta);
    }
  };

  const identify = (userId, properties) => {
    if (window.zenovay) {
      window.zenovay('identify', userId, properties);
    }
  };

  return { trackEvent, trackGoal, trackPageview, trackRevenue, identify };
}

Funciones disponibles

const {
  trackEvent,    // Registrar eventos personalizados
  trackGoal,     // Registrar conversiones de metas
  trackPageview, // Vista de página manual
  trackRevenue,  // Registrar ingresos
  identify       // Identificar usuarios
} = useZenovay();

Rastreo de eventos

Eventos básicos

<script setup>
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

const handleSignup = () => {
  trackEvent('signup_click', {
    plan: 'pro',
    source: 'pricing'
  });
};
</script>

<template>
  <button @click="handleSignup">
    Comenzar prueba gratuita
  </button>
</template>

Eventos de componentes

<script setup>
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

const props = defineProps(['product']);

const addToCart = () => {
  trackEvent('add_to_cart', {
    product_id: props.product.id,
    product_name: props.product.name,
    price: props.product.price
  });

  // Continuar con la lógica del carrito
  emit('add', props.product);
};
</script>

<template>
  <button @click="addToCart">Agregar al carrito</button>
</template>

Rastreo de metas

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { onMounted } from 'vue';

const props = defineProps(['order']);
const { trackGoal } = useZenovay();

onMounted(() => {
  trackGoal('purchase', {
    value: props.order.total,
    order_id: props.order.id
  });
});
</script>

Identificación de usuarios

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { watch } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const { identify } = useZenovay();

watch(
  () => userStore.user,
  (user) => {
    if (user) {
      identify(user.id, {
        email: user.email,
        name: user.name,
        plan: user.subscription
      });
    }
  },
  { immediate: true }
);
</script>

Rastreo de ingresos

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { onMounted } from 'vue';

const props = defineProps(['order']);
const { trackRevenue } = useZenovay();

onMounted(() => {
  trackRevenue(props.order.total, 'USD', {
    order_id: props.order.id,
    items: props.order.items.map(item => ({
      id: item.sku,
      name: item.name,
      price: item.price,
      quantity: item.quantity
    }))
  });
});
</script>

<template>
  <div>
    <h1>¡Pedido confirmado!</h1>
    <p>Pedido #{{ order.id }}</p>
  </div>
</template>

Integración con Nuxt 3

Agregar el script en nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://api.zenovay.com/z.js',
          defer: true,
          'data-tracking-code': 'YOUR_TRACKING_CODE'
        }
      ]
    }
  }
});

Variables de entorno

# .env
NUXT_PUBLIC_ZENOVAY_TRACKING_CODE=your-tracking-code

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://api.zenovay.com/z.js',
          defer: true,
          'data-tracking-code': process.env.NUXT_PUBLIC_ZENOVAY_TRACKING_CODE
        }
      ]
    }
  }
});

Composable de Nuxt

<script setup>
// Usar el mismo composable que antes
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

const handleClick = () => {
  trackEvent('cta_click', { location: 'hero' });
};
</script>

Integración con Vue Router

Rastreo automático

El script de Zenovay rastrea automáticamente las vistas de página. Para los cambios de ruta en SPA, agregue un hook afterEach al router:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* sus rutas */]
});

// Registrar vistas de página en cambios de ruta
router.afterEach((to) => {
  if (window.zenovay) {
    window.zenovay('page');
  }
});

export default router;

Las vistas de página se registran automáticamente en:

Carga inicial
Cambios de ruta
Cambios de hash (opcional)

Rastreo manual de rutas

<script setup>
import { useZenovay } from '@/composables/useZenovay';
import { useRouter } from 'vue-router';
import { watch } from 'vue';

const router = useRouter();
const { trackPageview } = useZenovay();

watch(
  () => router.currentRoute.value.path,
  (path) => {
    trackPageview(path);
  }
);
</script>

Directiva personalizada

Directiva v-track

<template>
  <!-- Registrar clics -->
  <button v-track:click="{ event: 'signup_click', plan: 'pro' }">
    Registrarse
  </button>

  <!-- Registrar visibilidad -->
  <div v-track:visible="{ event: 'section_viewed', section: 'pricing' }">
    Sección de precios
  </div>
</template>

Registrar la directiva

// main.js
import { createApp } from 'vue';

const app = createApp(App);

// Directiva v-track personalizada usando window.zenovay
app.directive('track', {
  mounted(el, binding) {
    const { event, ...properties } = binding.value;
    const eventType = binding.arg || 'click';

    if (eventType === 'click') {
      el.addEventListener('click', () => {
        if (window.zenovay) {
          window.zenovay('track', event, properties);
        }
      });
    } else if (eventType === 'visible') {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            if (window.zenovay) {
              window.zenovay('track', event, properties);
            }
            observer.unobserve(el);
          }
        });
      });
      observer.observe(el);
    }
  }
});

Options API

Uso con Options API

<script>
export default {
  methods: {
    handleClick() {
      if (window.zenovay) {
        window.zenovay('track', 'button_click', {
          button: 'signup'
        });
      }
    }
  }
};
</script>

Integración con Pinia

Store con análisis

// stores/cart.js
import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),

  actions: {
    addItem(product) {
      this.items.push(product);

      // Registrar usando el objeto global zenovay
      if (window.zenovay) {
        window.zenovay('track', 'add_to_cart', {
          product_id: product.id,
          price: product.price
        });
      }
    }
  }
});

Soporte de TypeScript

Tipos

// types/zenovay.d.ts
interface ZenovayFunction {
  (command: 'track', name: string, properties?: Record<string, unknown>): void;
  (command: 'identify', userId: string, traits?: Record<string, unknown>): void;
  (command: 'goal', name: string, properties?: Record<string, unknown>): void;
  (command: 'page'): void;
  (command: 'revenue', amount: number, currency: string, meta?: Record<string, unknown>): void;
}

declare global {
  interface Window {
    zenovay: ZenovayFunction;
  }
}

export {};

Uso con tipos

<script setup lang="ts">
import { useZenovay } from '@/composables/useZenovay';

interface PurchaseEvent {
  product_id: string;
  price: number;
  quantity: number;
}

const { trackEvent } = useZenovay();

const handlePurchase = (data: PurchaseEvent) => {
  trackEvent('purchase', data);
};
</script>

Pruebas

Simular el composable

// tests/mocks/zenovay.js
import { vi } from 'vitest';

export const mockZenovay = {
  trackEvent: vi.fn(),
  trackGoal: vi.fn(),
  identify: vi.fn(),
  trackPageview: vi.fn()
};

vi.mock('@/composables/useZenovay', () => ({
  useZenovay: () => mockZenovay
}));

Ejemplo de prueba

import { mount } from '@vue/test-utils';
import { mockZenovay } from './mocks/zenovay';
import SignupButton from '@/components/SignupButton.vue';

test('registra el clic en registro', async () => {
  const wrapper = mount(SignupButton);

  await wrapper.find('button').trigger('click');

  expect(mockZenovay.trackEvent).toHaveBeenCalledWith(
    'signup_click',
    expect.any(Object)
  );
});

Solución de problemas

Los eventos no se registran

Verifique:

Que la etiqueta del script esté en su index.html
Que el código de rastreo sea válido
Que no esté bloqueado por un bloqueador de anuncios
La consola para ver errores

El rastreo de rutas no funciona

Asegúrese de:

Que el hook afterEach del router esté configurado
Que window.zenovay esté disponible cuando cambia la ruta

Problemas de SSR

Para Nuxt/SSR:

if (process.client) {
  if (window.zenovay) {
    window.zenovay('track', 'solo_cliente');
  }
}