Auf Vue installieren

Die Installation für Vue unterscheidet sich zwischen Vite mit Vue 3 (statische index.html) und Nuxt 3 (SSR ohne index.html). Wähle den Weg, der zu deinem Projekt passt. Ein Convert-Snippet für die Danke-Seite brauchst du nicht: Verkäufe werden außerhalb der Seite erfasst, über deinen Zahlungsanbieter oder einen Server-to-Server-Aufruf.

Vite mit Vue 3: Installation in der index.html

In der index.html deines Projekts:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Your App</title>
    <!-- Rekomi tracking -->
    <script async src="https://api.rekomi.com/api/v1/r/loader.js" data-program-id="YOUR_PROGRAM_ID" data-rkmi-email-capture="auto"></script>
    <noscript>
      <img src="https://api.rekomi.com/api/v1/r/c.gif" width="1" height="1" alt="" referrerpolicy="no-referrer-when-downgrade" />
    </noscript>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Vite liefert die index.html in der Entwicklung aus und bettet in der Produktion die Build-Ausgabe ein. Ein externes <script src> bleibt dabei unverändert erhalten (nur Inline-Skripte, die keine Module sind, werden entfernt).

Kopiere das Snippet mit schon eingesetzter Programm-ID aus dem Installationsrezept deiner Kampagne unter Einrichtung > Installieren im Dashboard.

Rekomi erfasst eine E-Mail-Adresse, die ein vermittelter Besucher auf den Seiten, auf denen das Tag läuft, in ein beliebiges E-Mail- oder Textfeld tippt (Registrierung, Login, Checkout und andere Formulare), damit der Verkauf auch dann gutgeschrieben werden kann, wenn dein Checkout keine Empfehlung übergibt. Ohne Empfehlung wird nichts erfasst. Entferne das Attribut data-rkmi-email-capture, um das auszuschalten; explizite Aufrufe von Rekomi.convert() funktionieren weiterhin.

Nuxt 3: Installation über nuxt.config.ts

Nuxt 3 rendert per SSR, es gibt also keine statische index.html. Richte das Head-Skript über das Array app.head.script in nuxt.config.ts ein:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://api.rekomi.com/api/v1/r/loader.js",
          async: true,
          "data-program-id": process.env.REKOMI_PROGRAM_ID,
          "data-rkmi-email-capture": "auto",
        },
      ],
    },
  },
});

Setze REKOMI_PROGRAM_ID in deiner .env. Nuxt lädt die Variable beim Build und setzt sie in den gerenderten Head ein, sodass genau das richtige Script-Tag entsteht.

Alternative: useHead in app.vue. Soll das Skript nur unter einer Bedingung laden (zum Beispiel nur in der Produktion), rufe stattdessen useHead() in app.vue auf. Lies die Programm-ID aus der öffentlichen Runtime-Config von Nuxt. Greif nicht zu import.meta.env mit einer Variable mit dem Präfix NUXT_: Nuxt stellt dort nur Variablen mit dem Präfix VITE_ bereit, und das gerenderte Tag hätte nach der Hydration data-program-id="undefined".

<script setup>
const config = useRuntimeConfig();
useHead({
  script: [
    {
      src: "https://api.rekomi.com/api/v1/r/loader.js",
      async: true,
      "data-program-id": config.public.rekomiProgramId,
      "data-rkmi-email-capture": "auto",
    },
  ],
});
</script>

<template>
  <NuxtPage />
</template>

Deklariere den öffentlichen Runtime-Config-Schlüssel in nuxt.config.ts und setze NUXT_PUBLIC_REKOMI_PROGRAM_ID in deiner Umgebung (oder trag die ID fest ein, denn sie ist eine öffentliche Kennung und kein Geheimnis):

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      rekomiProgramId: "", // overridden by NUXT_PUBLIC_REKOMI_PROGRAM_ID
    },
  },
});

Das Composable useHead ist reaktiv: Packst du es in eine Bedingung oder einen Computed-Wert, aktualisiert sich das Script-Tag, wenn sich der Zustand ändert. Für eine statische Installation ist das Muster mit nuxt.config.ts einfacher.

Den Verkauf erfassen

Das Browser-Pixel erfasst keine Verkäufe mehr, deshalb gibt es keinen Convert-Aufruf, den du in onMounted auslösen müsstest. Ein Verkauf wird über einen dieser Wege erfasst:

• Dein Zahlungsanbieter. Verbinde ihn einmal im Schritt Zahlungsanbieter verbinden unter /dashboard/setup/connect-sales (Stripe, Paddle, Braintree, Shopify, Wix, BigCommerce, Lemon Squeezy, Chargebee, Polar, Recurly, Gumroad, Creem, Dodo Payments oder Mollie), und Verkäufe, Erstattungen und Kündigungen werden automatisch erfasst.
• Server-to-Server. Sende den Verkauf aus deinen Nuxt Server Routes per POST mit HMAC-Signatur an den S2S-Endpunkt von Rekomi. Siehe Server-zu-Server-Tracking.
• Gutscheincodes. Gib jedem Affiliate einen eigenen Rabattcode (Kampagne > Gutscheincodes); ein eingelöster Code schreibt ihm den Verkauf im Checkout gut.

Gib die Empfehlung mit window.Rekomi.getReferral() in den Checkout mit.

Serverseitiger Checkout in Nuxt über Server Routes

Die Server Routes von Nuxt 3 eignen sich gut, um Stripe Checkout Sessions zu erstellen. Die Rekomi-Empfehlung liegt im Browser; übergib sie vom Client über einen eigenen Header und schreib sie serverseitig als rekomi_affiliate_slug in die Metadaten des Abonnements (genau das liest Rekomi für die Attribution):

// server/api/create-checkout-session.post.ts
import Stripe from "stripe";

export default defineEventHandler(async (event) => {
  const referral = getHeader(event, "x-rekomi-referral");
  const body = await readBody(event);

  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [{ price: body.priceId, quantity: 1 }],
    success_url: `${process.env.APP_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.APP_URL}/pricing`,
    subscription_data: referral
      ? { metadata: { rekomi_affiliate_slug: referral } }
      : undefined,
  });

  return { url: session.url };
});

Vom Client aus (in einer Vue-Komponente):

<script setup>
async function startCheckout(priceId) {
  const referral = window.Rekomi?.getReferral();
  const { url } = await $fetch("/api/create-checkout-session", {
    method: "POST",
    headers: { "x-rekomi-referral": referral || "" },
    body: { priceId },
  });
  window.location.href = url;
}
</script>

Leads erfassen (optional)

window.Rekomi.convert() ist jetzt ein Aufruf zur LEAD-Erfassung, kein Verkauf. Auf einer Anmeldeseite kannst du eine Kunden-E-Mail-Adresse vor der Zahlung mit der Empfehlung verknüpfen:

<script setup>
import { onMounted } from "vue";

const props = defineProps<{ email: string }>();

onMounted(() => {
  if (props.email) window.Rekomi?.ready?.(() => window.Rekomi.convert(props.email));
});
</script>

<template>
  <div>Thanks for signing up!</div>
</template>

Die Lead-Erfassung im Browser funktioniert in jedem Plan; der serverseitige Lead-Endpunkt erfordert Starter oder höher. Siehe Leads und Anmeldungen tracken.

Gut zu wissen

useHead in Nuxt 3 ist reaktiv. Rufst du useHead in einem Setup-Block auf, reagiert der Head auf Zustandsänderungen. Für eine statische Installation ist der Weg über nuxt.config.ts besser, weil er nicht bei jedem Routenwechsel neu rendert.

SSR-Hydration. Nuxt 3 rendert Seiten auf dem Server und hydriert sie dann im Client. window.Rekomi und getReferral() gibt es nur im Browser, lies die Empfehlung also im clientseitigen Code aus (in einem onMounted-Hook oder einem Event-Handler), nie während des SSR.

Nur Composition API. Die Beispiele oben nutzen die Composition API von Vue 3. Mit der Options API von Vue 2 nimmst du den Lifecycle-Hook mounted() und this.$route statt useRoute().

Bei clientseitiger Navigation bleibt der Loader geladen. vue-router navigiert im Client, ohne das Dokument komplett neu zu laden. Das Head-Skript lädt einmal beim ersten Besuch, und getReferral() bleibt über Routenwechsel hinweg verfügbar.

Fehlerbehebung

Das Skript fehlt im gerenderten Head von Nuxt 3. Prüfe, ob REKOMI_PROGRAM_ID in der .env gesetzt ist und dein Build die Variable übernommen hat. Prüfe auch, ob du wirklich den Build von Nuxt ausführst und nicht einen veralteten HMR-Cache des Dev-Servers.

Vite behält das Script-Tag in der Entwicklung, aber nicht im Build. Nutze ein externes <script src> (wie gezeigt), keinen Inline-Block. Vite behält externe Script-Tags und entfernt nur Inline-Skripte, die keine Module sind.

window.Rekomi.getReferral() liefert null. Der Loader hat in diesem Browser keine Empfehlung erfasst: Der Besucher kam nicht über einen Affiliate-Link, oder das Skript fehlt auf der Landingpage, die er zuerst aufgerufen hat. Prüfe in der Quelltextansicht jeder Einstiegsseite, ob das Tag vorhanden ist.

Die Empfehlung wurde erfasst, aber der Verkauf nicht zugeordnet. Leite window.Rekomi.getReferral() an deinen Endpunkt zum Erstellen der Session weiter und schreib den Wert als subscription_data.metadata.rekomi_affiliate_slug, oder nimm ihn in deinen S2S-Aufruf auf.

Verwandte Seiten

• Tracking-Skript und Referenz zu window.Rekomi
• Server-zu-Server-Tracking: Verkäufe aus deinem Backend erfassen
• Auf React installieren: das Gegenstück für React