Tracking-Skript

Tracking-Skript

Das Blitz Rocket Tracking-Skript ist ein leichtgewichtiges JavaScript-Snippet, das Sie zu Ihrer Website hinzufügen, um automatisch Empfehlungsbesuche, Anmeldungen und Käufe zu verfolgen.

Installation

Fügen Sie das folgende Skript zu Ihrer Website hinzu. Ersetzen Sie YOUR_CAMPAIGN_ID durch Ihre tatsächliche Kampagnen-/Wettbewerbs-ID aus dem Blitz Rocket Dashboard:

<script
  src="https://blitzrocket.com/referral-tracker.js?campaignId=YOUR_CAMPAIGN_ID&autoInject=stripe"
  async
></script>

Der Parameter autoInject=stripe erfasst automatisch Stripe-Checkout-Käufe. Entfernen Sie ihn, wenn Sie Stripe nicht verwenden oder Käufe lieber manuell verfolgen möchten.

Anmeldungen verfolgen

Rufen Sie RocketTracker.trackSignup() auf, wenn ein Benutzer die Registrierung auf Ihrer Seite abgeschlossen hat:

// Nach erfolgreicher Registrierung des Benutzers
if (window.RocketTracker) {
  window.RocketTracker.trackSignup("newuser@example.com");
}

function SignupForm() {
  const handleSubmit = async (formData) => {
    const result = await registerUser(formData);

    if (result.success && window.RocketTracker) {
      window.RocketTracker.trackSignup(formData.email);
    }
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

<script setup>
async function handleSignup(formData) {
  const result = await registerUser(formData);

  if (result.success && window.RocketTracker) {
    window.RocketTracker.trackSignup(formData.email);
  }
}
</script>

Käufe verfolgen

Rufen Sie RocketTracker.trackPurchase() auf, wenn ein Benutzer einen Kauf abgeschlossen hat:

// Nach Bestätigung des Kaufs
if (window.RocketTracker) {
  window.RocketTracker.trackPurchase(
    "order-12345",  // orderId
    49.99,          // Betrag
    "USD",          // Währung
    "buyer@example.com" // E-Mail (optional)
  );
}

function CheckoutSuccess({ order }) {
  useEffect(() => {
    if (window.RocketTracker) {
      window.RocketTracker.trackPurchase(
        order.id,
        order.total,
        order.currency,
        order.email
      );
    }
  }, [order]);

  return <div>Vielen Dank für Ihren Kauf!</div>;
}

Empfehlungs-Code abrufen

Rufen Sie den aktuellen Empfehlungs-Code ab, der bei einem Besuch über einen Empfehlungslink gespeichert wurde:

if (window.RocketTracker) {
  const code = window.RocketTracker.getReferralCode();
  if (code) {
    console.log("Aktiver Empfehlungs-Code:", code);
  }
}

Erkennung von Empfehlungs- & Affiliate-Codes

Das Tracking-Skript erkennt automatisch Codes aus URL-Parametern und unterscheidet zwischen Empfehlungs- und Affiliate-Programmen anhand des verwendeten Parameters:

• Empfehlungsprogramm: ?code=ABC123 oder ?ref=ABC123
• Affiliate-Programm: ?aff=XYZ789 oder ?fpr=XYZ789 (FirstPromoter-Stil)

Jedes Programm wird in einem eigenen Cookie-Namespace gespeichert, sodass eine einzelne Website gleichzeitig ein Empfehlungsprogramm und ein Affiliate-Programm betreiben kann:

• Empfehlungs-Code → blitzrocket_referral_code Cookie
• Affiliate-Code → blitzrocket_affiliate_code Cookie

Da Codes nur innerhalb einer Kampagne eindeutig sind, ermittelt das Skript, zu welcher Kampagne ein Code gehört, über den Server, wenn ein Besucher erstmals landet. Der erkannte Code wird dann in nachfolgenden Tracking-Aufrufen mitgesendet.

Eine Domain kann jeweils maximal ein aktives Empfehlungsprogramm und ein aktives Affiliate- Programm gleichzeitig haben. Um Programme zu wechseln, deaktivieren Sie zuerst das bestehende.

Zielgerichtete Ansprache eines bestimmten Programms

Beim serverseitigen Tracking lesen Sie das passende Cookie aus. Wenn Sie die JS-Hilfen auf einer Seite verwenden, die beide Programme betreibt, geben Sie den Programmtyp explizit an:

// Spezifisch eine Affiliate-Anmeldung tracken
window.RocketTracker.trackSignup("newuser@example.com", { type: "affiliate" });

// Spezifisch einen Affiliate-Kauf tracken
window.RocketTracker.trackPurchase("order-12345", 49.99, "USD", "buyer@example.com", { type: "affiliate" });

Framework-Integration

Nuxt 3

Blitz Rocket bietet ein integriertes Nuxt-Plugin. Setzen Sie die Umgebungsvariable NUXT_PUBLIC_BLITZROCKET_CAMPAIGN_ID und das Skript wird automatisch geladen.

Sie können auch den bereitgestellten $blitzrocket Helfer verwenden:

<script setup>
const { $blitzrocket } = useNuxtApp();

async function handleSignup(email) {
  await $blitzrocket.trackSignup(email);
}

async function handlePurchase(order) {
  await $blitzrocket.trackPurchase(
    order.id,
    order.total,
    order.currency,
    order.email
  );
}

const referralCode = $blitzrocket.getReferralCode();
</script>

Next.js

// app/layout.js
import Script from "next/script";

export default function RootLayout({ children }) {
  const campaignId = process.env.NEXT_PUBLIC_BLITZROCKET_CAMPAIGN_ID;

  return (
    <html>
      <head>
        <Script
          id="blitzrocket-tracker"
          src={`https://blitzrocket.com/referral-tracker.js?campaignId=${campaignId}&autoInject=stripe`}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Reines HTML

<!DOCTYPE html>
<html>
  <head>
    <script
      src="https://blitzrocket.com/referral-tracker.js?campaignId=YOUR_CAMPAIGN_ID&autoInject=stripe"
      async
    ></script>
  </head>
  <body>
    <!-- Ihr Seiteninhalt -->
  </body>
</html>

Google Tag Manager

1. Gehen Sie zu GTM → Tags → Neuer Tag
2. Wählen Sie Custom HTML
3. Fügen Sie ein:

<script
  src="https://blitzrocket.com/referral-tracker.js?campaignId=YOUR_CAMPAIGN_ID&autoInject=stripe"
  async
></script>

4. Trigger auf Alle Seiten setzen
5. Veröffentlichen Sie Ihre Änderungen