Auf Bubble installieren

Bubble akzeptiert in seinem Feld Settings > SEO/metatags > „Script/meta tags in Header“ nur <script>, <meta> und <link> als gültige Head-Tags. Alles andere (vor allem <noscript>) verschiebt der Browser automatisch in den <body>. Für unsere Installation ist das kein Problem: Der <noscript>-Fallback löst sein 1x1-Pixel auch aus dem <body> korrekt aus. Das Head-Skript erfasst den Affiliate-Klick; der Verkauf wird über dein eigenes Stripe-Konto erfasst (das Stripe-Plugin von Bubble wickelt die Zahlungen darüber ab), nicht über ein Snippet auf der Seite.

Das Head-Skript installieren

Im Bubble-Editor: Settings > SEO/metatags > Script/meta tags in Header.

Füge ein:

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

Speichere und veröffentliche mit Deploy to live. Deine Programm-ID ist im Snippet in Rekomi unter Einrichtung > Installieren (Bubble wählen) schon eingesetzt.

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.

Conversions erfassen

Das Stripe-Plugin von Bubble (und eigene Stripe-API-Workflows) wickeln Zahlungen über dein eigenes Stripe-Konto ab, es gibt also kein Snippet für eine Dankeseite. Wähle einen dieser Wege:

Stripe Connect (empfohlen). Verbinde Stripe einmal in Rekomi unter Einrichtung > Zahlungsanbieter verbinden. Rekomi erfasst dann über deine Stripe-Webhooks automatisch jedes Abonnement, jede Zahlung, jede Erstattung und jede Kündigung und ordnet sie dem Affiliate-Klick zu, den das Head-Skript erfasst hat. Um einen bestimmten Verkauf zuzuordnen, gib die Empfehlung an den Checkout weiter: Lies die ID des Affiliates in deinem Bubble-Workflow über window.Rekomi.ready(r => ...) aus (sie steht in r.affiliate.id) und übergib sie beim Anlegen des Abonnements als rekomi_affiliate_id in den metadata des Abonnements der Stripe Checkout Session. Der Slug aus window.Rekomi.getReferral() funktioniert auch, übergeben als rekomi_affiliate_slug; Rekomi liest beide Schlüssel. Du verkaufst stattdessen über Stripe Payment Links? Nutze Gutscheincodes pro Affiliate; siehe Auf Stripe installieren.

Gutscheincodes (ohne Code). Lege unter Kampagne > Gutscheincodes einen Code pro Affiliate an. Löst ein Käufer den Code eines Affiliates im Checkout ein, schreibt Rekomi diesem Affiliate gut. Auf der Erfolgsseite musst du nichts hinzufügen.

Server-to-Server (am robustesten). Wenn du den Verkauf lieber auf dem Server erfasst (das übersteht Werbe- und Analyse-Blocker), lass dein Stripe-Webhook-Backend ein POST mit HMAC an den Rekomi-Endpunkt /api/tracking/s2s senden, sobald das Abonnement aktiv wird. S2S und ein mit Rekomi verbundenes Stripe schließen sich gegenseitig aus: Solange Stripe verbunden ist, werden S2S-Aufrufe mit 409 abgelehnt. Entscheide dich also für einen Weg und bleib dabei.

Das HMAC-Muster findest du in der Referenz der S2S-Tracking-API, die Webhook-Konfiguration auf der Stripe-Seite in der Anleitung Auf Stripe installieren.

Gut zu wissen

Nur gültige Head-Tags. Das Bubble-Feld „Script/meta tags in Header“ akzeptiert nur <script>, <meta> und <link>. Andere Elemente verschiebt der Browser automatisch in den <body>. Versuche nicht, über Kommentare oder Block-Elemente zu installieren, die werden entfernt.

<noscript> landet im <body>. Das ist so im Browser vorgesehen (kein Bubble-Fehler). Der 1x1-Pixel-Fallback in <noscript> löst für Besucher mit deaktiviertem JS auch aus dem <body> korrekt aus.

Platzierung des Head-Tags. Installiere den Loader über Settings > SEO/metatags > „Script/meta tags in Header“ (global) statt über ein HTML-Element pro Seite, damit der Affiliate-Klick auf jeder öffentlichen Seite erfasst wird. Das Seitenfeld Settings > „Page HTML Header“ landet ebenfalls im <head>, falls du ein Skript für eine bestimmte Seite brauchst, aber der richtige Ort für den Loader ist der Platz für die ganze Website.

Live- und Development-Modus. Bubble hat getrennte Bereitstellungsmodi für Development und Live. Das Head-Skript unter Settings > SEO/metatags gilt für beide, aber nach dem Bearbeiten musst du mit Deploy nach Live veröffentlichen.

Lass Stripe den Verkauf bestätigen. Weil der Verkauf über dein Stripe-Konto erfasst wird (nicht über ein Snippet auf der Seite), läufst du nie Gefahr, einen Klick gutzuschreiben, aus dem kein Kauf wurde. Die Provision entsteht erst, wenn Stripe das Abonnement oder die Zahlung als bezahlt meldet.

Erstattungen

Nutzt du das Stripe-Plugin von Bubble mit einem Stripe-Konto, das mit Rekomi verbunden ist, holen Erstattungen und Kündigungen die Provision automatisch über den Stripe-Webhook zurück. Auf der Seite von Bubble musst du nichts einstellen. Erfasst du Verkäufe stattdessen über das Server-to-Server-Relay, leite dein Stripe-Ereignis charge.refunded aus demselben Backend an /api/tracking/refund von Rekomi weiter.

Fehlerbehebung

Der Verkauf ist in Stripe abgeschlossen, aber in Rekomi kommt keine Conversion an. Wenn du Stripe Connect nutzt, prüfe, ob Stripe unter Einrichtung > Zahlungsanbieter verbinden verbunden ist und ob aktuelle Ereignisse im Dashboard der Webhook-Zustellungen von Stripe auftauchen. Wenn du über Metadaten zuordnest, prüfe, ob dein Workflow die ID des Affiliates (aus window.Rekomi.ready) als rekomi_affiliate_id in die metadata des Abonnements der Checkout Session geschrieben hat, oder den Slug aus getReferral() als rekomi_affiliate_slug.

Ein Affiliate wurde für den falschen Verkauf gutgeschrieben. Die Codes oder Empfehlungen zweier Affiliates sind sich in die Quere gekommen. Wenn du auf Gutscheincodes setzt, achte darauf, dass jeder Affiliate unter Kampagne > Gutscheincodes einen eindeutigen Code hat.

Der Klick wird nie erfasst. Der Besucher ist auf einem Weg zur Registrierung gekommen, der an deinen Seiten mit Rekomi vorbeiführte. Prüfe, ob das Head-Skript unter Settings > SEO/metatags (global) steht und ob Affiliates ihren Traffic auf eine öffentliche Bubble-Seite schicken, auf der die Head-Installation lädt. In der Browser-Konsole kannst du eine erfasste Empfehlung mit window.Rekomi.getReferral() prüfen.

Verwandte Seiten

• Checkout-Tracking ohne Code und ohne Stripe
• Referenz der S2S-Tracking-API
• Auf Stripe installieren, für die Webhook-Konfiguration bei Stripe