Vite/Vue Integration

Integrieren Sie usertrax mit Ihrer Vite/Vue-Anwendung, um Conversions und Benutzerinteraktionen zu verfolgen.

Setup in Vite/Vue

Script zu HTML hinzufügen

Fügen Sie das usertrax-Script direkt in Ihre index.html Datei ein:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ihre App</title>

    <!-- usertrax tracking script -->
    <script
      src="https://usertrax.io/cvs.js"
      data-key="YOUR_PUBLIC_KEY"
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Umgebungsvariable hinzufügen
Erstellen oder aktualisieren Sie Ihre .env Datei:
```
VITE_USERTRAX_KEY=ihr_public_key_hier
```

Helper-Funktionen erstellen

Erstellen Sie eine neue Datei src/lib/usertrax.js in Ihrem Projekt:

const USERTRAX_CONFIG = {
  publicKey: import.meta.env.VITE_USERTRAX_KEY,
};

// Helper-Funktionen für häufige Events
export const trackConversion = (data) => {
  if (window.usertrax) {
    window.usertrax.push(data);
  } else {
    console.warn("Usertrax noch nicht geladen");
  }
};

export const trackPageView = (page) => {
  if (window.usertrax) {
    window.usertrax.push({
      event: "page_view",
      page: page,
    });
  } else {
    console.warn("Usertrax noch nicht geladen");
  }
};

export const trackEvent = (eventName, data = {}) => {
  if (window.usertrax) {
    window.usertrax.push({
      event: eventName,
      ...data,
    });
  } else {
    console.warn("Usertrax noch nicht geladen");
  }
};

Vue Composable erstellen

Erstellen Sie einen Composable für einfacheres Tracking in Komponenten:

import { ref, onMounted } from "vue";
import { trackConversion, trackEvent } from "../lib/usertrax";

export function useUsertrax() {
  const isReady = ref(false);

  onMounted(() => {
    // Prüfen ob usertrax geladen ist
    const checkUsertrax = () => {
      if (window.usertrax) {
        isReady.value = true;
      } else {
        setTimeout(checkUsertrax, 100);
      }
    };
    checkUsertrax();
  });

  const trackConversionEvent = (data) => {
    if (isReady.value) {
      trackConversion(data);
    } else {
      console.warn("Usertrax noch nicht bereit");
    }
  };

  const trackCustomEvent = (eventName, data = {}) => {
    if (isReady.value) {
      trackEvent(eventName, data);
    } else {
      console.warn("Usertrax noch nicht bereit");
    }
  };

  const trackFormSubmission = (formData) => {
    trackCustomEvent("form_submitted", formData);
  };

  const trackButtonClick = (buttonData) => {
    trackCustomEvent("button_clicked", buttonData);
  };

  return {
    isReady,
    trackConversion: trackConversionEvent,
    trackEvent: trackCustomEvent,
    trackFormSubmission,
    trackButtonClick,
  };
}

Router-Integration einrichten

Aktualisieren Sie Ihren Router, um Seitenaufrufe zu verfolgen:

import { createRouter, createWebHistory } from "vue-router";
import { trackPageView } from "../lib/usertrax";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },
  // ... weitere Routen
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// Seitenaufrufe verfolgen
router.afterEach((to) => {
  trackPageView(to.path);
});

export default router;

Verwendungsbeispiele

Conversions verfolgen

<template>
  <form @submit="handlePurchase">
    <input v-model="form.email" type="email" placeholder="E-Mail" required />
    <input
      v-model="form.firstName"
      type="text"
      placeholder="Vorname"
      required
    />
    <input
      v-model="form.lastName"
      type="text"
      placeholder="Nachname"
      required
    />
    <input
      v-model="form.total"
      type="number"
      placeholder="Gesamtbetrag"
      required
    />
    <button type="submit">Kauf abschließen</button>
  </form>
</template>

<script setup>
import { ref } from "vue";
import { useUsertrax } from "../composables/useUsertrax";

const { trackConversion } = useUsertrax();

const form = ref({
  email: "",
  firstName: "",
  lastName: "",
  total: 0,
});

const handlePurchase = async (e) => {
  e.preventDefault();

  try {
    // Kauf verarbeiten
    const response = await fetch("/api/checkout", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(form.value),
    });

    if (response.ok) {
      // Conversion verfolgen
      trackConversion({
        event: "purchase",
        id: `order_${Date.now()}`,
        total: parseFloat(form.value.total),
        currency: "EUR",
        user_data: {
          email: form.value.email,
          firstname: form.value.firstName,
          lastname: form.value.lastName,
        },
        metadata: {
          payment_method: "credit_card",
        },
      });
    }
  } catch (error) {
    console.error("Checkout-Fehler:", error);
  }
};
</script>

Formular-Einreichungen verfolgen

<template>
  <form @submit="handleSubmit">
    <input v-model="form.name" type="text" placeholder="Name" required />
    <input v-model="form.email" type="email" placeholder="E-Mail" required />
    <textarea
      v-model="form.message"
      placeholder="Nachricht"
      required
    ></textarea>
    <button type="submit">Nachricht senden</button>
  </form>
</template>

<script setup>
import { ref } from "vue";
import { useUsertrax } from "../composables/useUsertrax";

const { trackFormSubmission } = useUsertrax();

const form = ref({
  name: "",
  email: "",
  message: "",
});

const handleSubmit = async (e) => {
  e.preventDefault();

  try {
    // Formular einreichen
    const response = await fetch("/api/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(form.value),
    });

    if (response.ok) {
      // Formular-Einreichung verfolgen
      trackFormSubmission({
        form_type: "contact",
        form_data: {
          name: form.value.name,
          email: form.value.email,
          message_length: form.value.message.length,
        },
      });
    }
  } catch (error) {
    console.error("Formular-Einreichungsfehler:", error);
  }
};
</script>

Button-Klicks verfolgen

<template>
  <button @click="handleClick" :class="variant">
    <slot />
  </button>
</template>

<script setup>
import { useUsertrax } from "../composables/useUsertrax";

const { trackButtonClick } = useUsertrax();

const props = defineProps({
  variant: {
    type: String,
    default: "primary",
  },
});

const handleClick = () => {
  trackButtonClick({
    button_text: "CTA Button",
    button_variant: props.variant,
    page: window.location.pathname,
  });
};
</script>

E-Commerce Integration

<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name" />
    <h3>{{ product.name }}</h3>
    <p>{{ product.price }}€</p>
    <button @click="addToCart">Zum Warenkorb hinzufügen</button>
  </div>
</template>

<script setup>
import { useUsertrax } from "../composables/useUsertrax";

const { trackEvent } = useUsertrax();

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
});

const addToCart = () => {
  trackEvent("product_added_to_cart", {
    product_id: props.product.id,
    product_name: props.product.name,
    product_price: props.product.price,
    product_category: props.product.category,
  });
};
</script>

Erweiterte Konfiguration

Plugin-Setup

Erstellen Sie ein Vue-Plugin für globalen usertrax-Zugriff:

import { initUsertrax } from "../lib/usertrax";

export default {
  install: (app) => {
    // Usertrax initialisieren
    initUsertrax();

    // Globale Eigenschaften hinzufügen
    app.config.globalProperties.$usertrax = {
      trackConversion: (data) => {
        if (window.usertrax) {
          window.usertrax.push(data);
        }
      },
      trackEvent: (eventName, data = {}) => {
        if (window.usertrax) {
          window.usertrax.push({
            event: eventName,
            ...data,
          });
        }
      },
    };
  },
};

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import usertraxPlugin from "./plugins/usertrax";

const app = createApp(App);

app.use(router);
app.use(usertraxPlugin);
app.mount("#app");

Pinia Store Integration

import { defineStore } from "pinia";
import { trackEvent } from "../lib/usertrax";

export const useAnalyticsStore = defineStore("analytics", {
  state: () => ({
    events: [],
  }),

  actions: {
    trackUserAction(action, data = {}) {
      const event = {
        action,
        timestamp: new Date().toISOString(),
        ...data,
      };

      this.events.push(event);
      trackEvent("user_action", event);
    },

    trackPurchase(order) {
      trackEvent("purchase", {
        order_id: order.id,
        total: order.total,
        currency: order.currency,
        items: order.items,
      });
    },

    trackPageView(page) {
      trackEvent("page_view", { page });
    },
  },
});

Benutzerdefinierte Direktiven

import { trackEvent } from "../lib/usertrax";

export const usertraxClick = {
  mounted(el, binding) {
    el.addEventListener("click", () => {
      const eventName = binding.arg || "element_clicked";
      const data = binding.value || {};

      trackEvent(eventName, {
        element: el.tagName.toLowerCase(),
        element_id: el.id,
        element_class: el.className,
        ...data,
      });
    });
  },
};

<!-- Verwendung in Komponenten -->
<template>
  <button v-usertrax-click:button_clicked="{ button_type: 'cta' }">
    Klick mich
  </button>
</template>

Fehlerbehebung

Events werden nicht gesendet: Überprüfen Sie die Browser-Konsole auf Fehler und verifizieren Sie den API-Schlüssel
Umgebungsvariablen funktionieren nicht: Stellen Sie sicher, dass Variablen mit VITE_ präfixiert sind
Script lädt nicht: Überprüfen Sie den Network-Tab auf Script-Ladefehler
Vue 3 Kompatibilität: Stellen Sie sicher, dass Sie die Vue 3 Composition API verwenden

TypeScript Unterstützung

declare global {
  interface Window {
    usertrax: {
      push: (data: any) => void;
    };
  }
}

export interface UsertraxConfig {
  publicKey: string;
  scriptUrl?: string;
  debug?: boolean;
}

export interface ConversionData {
  id?: string;
  value?: number;
  currency?: string;
  user_data?: Record<string, any>;
  metadata?: Record<string, any>;
}

export interface UsertraxEvent {
  event: string;
  [key: string]: any;
}