Integração com Vue.js

Integre o analytics do Zenovay em sua aplicação Vue.js ou Nuxt usando a tag de script de rastreamento e a função global window.zenovay.

Instalação

Adicione o script de rastreamento do Zenovay ao seu index.html:

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

Nenhum pacote npm é necessário. O script rastreia automaticamente as visualizações de página e fornece a função global window.zenovay para eventos personalizados.

Configuração com Vue 3

Composable Wrapper

Crie um composable para encapsular a função global window.zenovay para uso nos seus 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 };
}

Funções Disponíveis

const {
  trackEvent,    // Rastrear eventos personalizados
  trackGoal,     // Rastrear conversões de metas
  trackPageview, // Visualização de página manual
  trackRevenue,  // Rastrear receita
  identify       // Identificar usuários
} = useZenovay();

Rastreamento 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">
    Começar Gratuitamente
  </button>
</template>

Eventos de Componente

<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 com a lógica do carrinho
  emit('add', props.product);
};
</script>

<template>
  <button @click="addToCart">Adicionar ao Carrinho</button>
</template>

Rastreamento 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>

Identificação de Usuário

<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>

Rastreamento de Receita

<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>

Integração com Nuxt 3

Adicionar Script no 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'
        }
      ]
    }
  }
});

Variáveis de Ambiente

# .env
NUXT_PUBLIC_ZENOVAY_TRACKING_CODE=seu-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 no Nuxt

<script setup>
// Use o mesmo composable acima
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

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

Integração com Vue Router

Rastreamento Automático

O script do Zenovay rastreia automaticamente as visualizações de página. Para mudanças de rota em SPA, adicione um hook afterEach ao router:

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

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

// Rastrear visualizações de página nas mudanças de rota
router.afterEach((to) => {
  if (window.zenovay) {
    window.zenovay('page');
  }
});

export default router;

As visualizações de página são rastreadas automaticamente:

• No carregamento inicial
• Nas mudanças de rota
• Nas mudanças de hash (opcional)

Rastreamento Manual de Rota

<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>

Diretiva

Diretiva v-track

<template>
  <!-- Rastrear cliques -->
  <button v-track:click="{ event: 'signup_click', plan: 'pro' }">
    Cadastre-se
  </button>

  <!-- Rastrear visibilidade -->
  <div v-track:visible="{ event: 'section_viewed', section: 'pricing' }">
    Seção de Preços
  </div>
</template>

Registrar Diretiva

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

const app = createApp(App);

// Diretiva 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

Usando na Options API

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

Integração com Pinia

Store com Analytics

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

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

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

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

Suporte a 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 com 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>

Testes

Mock do 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
}));

Exemplo de Teste

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

test('tracks signup click', async () => {
  const wrapper = mount(SignupButton);

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

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

Solução de Problemas

Eventos Não Rastreando

Verifique:

• Se a tag de script está no seu index.html
• Se o tracking code é válido
• Se não está sendo bloqueado por bloqueador de anúncios
• O console para erros

Rastreamento do Router Não Funcionando

Certifique-se de:

• Que o hook afterEach do router está configurado
• Que window.zenovay está disponível quando a rota muda

Problemas com SSR

Para Nuxt/SSR:

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

Próximos Passos

• Integração com Framework Personalizado
• Integração com React
• Eventos Personalizados