Vue.js-Integration

Integrieren Sie Zenovay Analytics in Ihre Vue.js- oder Nuxt-Anwendung mithilfe des Tracking-Script-Tags und der globalen window.zenovay-Funktion.

Installation

Fügen Sie das Zenovay-Tracking-Script zu Ihrer index.html hinzu:

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

Es wird kein npm-Paket benötigt. Das Script erfasst automatisch Seitenaufrufe und stellt die globale window.zenovay-Funktion für benutzerdefinierte Events bereit.

Vue 3 Einrichtung

Composable-Wrapper

Erstellen Sie ein Composable, um die globale window.zenovay-Funktion für die Verwendung in Ihren Vue-Komponenten zu kapseln:

// 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 };
}

Verfügbare Funktionen

const {
  trackEvent,    // Benutzerdefinierte Events erfassen
  trackGoal,     // Ziel-Conversions erfassen
  trackPageview, // Manueller Seitenaufruf
  trackRevenue,  // Umsatz erfassen
  identify       // Benutzer identifizieren
} = useZenovay();

Event-Erfassung

Einfache Events

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

const { trackEvent } = useZenovay();

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

<template>
  <button @click="handleSignup">
    Kostenlose Testversion starten
  </button>
</template>

Komponenten-Events

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

  // Weiter mit der Warenkorb-Logik
  emit('add', props.product);
};
</script>

<template>
  <button @click="addToCart">In den Warenkorb</button>
</template>

Ziel-Erfassung

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

Benutzeridentifikation

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

Umsatz-Erfassung

<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>Bestellung bestätigt!</h1>
    <p>Bestellung #{{ order.id }}</p>
  </div>
</template>

Nuxt 3-Integration

Script in nuxt.config.ts hinzufügen

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

Umgebungsvariablen

# .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
        }
      ]
    }
  }
});

Nuxt Composable

<script setup>
// Verwenden Sie das gleiche Composable von oben
import { useZenovay } from '@/composables/useZenovay';

const { trackEvent } = useZenovay();

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

Vue Router-Integration

Automatische Erfassung

Das Zenovay-Script erfasst Seitenaufrufe automatisch. Für SPA-Routenwechsel fügen Sie einen Router-afterEach-Hook hinzu:

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

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

// Seitenaufrufe bei Routenwechseln erfassen
router.afterEach((to) => {
  if (window.zenovay) {
    window.zenovay('page');
  }
});

export default router;

Seitenaufrufe werden automatisch erfasst bei:

Erstmaligem Laden
Routenwechseln
Hash-Änderungen (optional)

Manuelle Routen-Erfassung

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

Direktive

v-track-Direktive

<template>
  <!-- Klicks erfassen -->
  <button v-track:click="{ event: 'signup_click', plan: 'pro' }">
    Registrieren
  </button>

  <!-- Sichtbarkeit erfassen -->
  <div v-track:visible="{ event: 'section_viewed', section: 'pricing' }">
    Preisbereich
  </div>
</template>

Direktive registrieren

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

const app = createApp(App);

// Benutzerdefinierte v-track-Direktive mit 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

Verwendung mit der Options API

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

Pinia-Integration

Store mit Analytics

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

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

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

      // Erfassung über das globale Zenovay-Objekt
      if (window.zenovay) {
        window.zenovay('track', 'add_to_cart', {
          product_id: product.id,
          price: product.price
        });
      }
    }
  }
});

TypeScript-Unterstützung

Typen

// 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 {};

Verwendung mit Typen

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

Testen

Composable mocken

// 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
}));

Testbeispiel

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

Fehlerbehebung

Events werden nicht erfasst

Überprüfen Sie:

Das Script-Tag befindet sich in Ihrer index.html
Der Tracking-Code ist gültig
Kein Ad-Blocker blockiert das Script
Die Konsole auf Fehler

Router-Erfassung funktioniert nicht

Stellen Sie sicher, dass:

Der Router-afterEach-Hook konfiguriert ist
window.zenovay verfügbar ist, wenn Routenwechsel stattfinden

SSR-Probleme

Für Nuxt/SSR:

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