Script de suivi

Script de suivi

Le script de suivi Blitz Rocket est un extrait JavaScript léger que vous ajoutez à votre site web pour suivre automatiquement les visites par parrainage, les inscriptions et les achats.

Installation

Ajoutez le script suivant à votre site web. Remplacez YOUR_CAMPAIGN_ID par l'ID réel de votre campagne/concours depuis le tableau de bord Blitz Rocket :

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

Le paramètre autoInject=stripe capture automatiquement les achats via Stripe checkout. Supprimez-le si vous n'utilisez pas Stripe ou préférez suivre les achats manuellement.

Suivre les inscriptions

Appelez RocketTracker.trackSignup() lorsqu'un utilisateur termine son inscription sur votre site :

// Après qu'un utilisateur s'est inscrit avec succès
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>

Suivre les achats

Appelez RocketTracker.trackPurchase() lorsqu'un utilisateur termine un achat :

// Après confirmation de l'achat
if (window.RocketTracker) {
  window.RocketTracker.trackPurchase(
    "order-12345",  // orderId
    49.99,          // montant
    "USD",          // devise
    "buyer@example.com" // email (optionnel)
  );
}

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

  return <div>Merci pour votre achat !</div>;
}

Obtenir le code de parrainage

Récupérez le code de parrainage actuel stocké suite à une visite via un lien de parrainage :

if (window.RocketTracker) {
  const code = window.RocketTracker.getReferralCode();
  if (code) {
    console.log("Code de parrainage actif :", code);
  }
}

Détection des codes de parrainage et d'affiliation

Le script de suivi détecte automatiquement les codes dans les paramètres d'URL et distingue les programmes de parrainage et d'affiliation selon le paramètre utilisé :

• Programme de parrainage : ?code=ABC123 ou ?ref=ABC123
• Programme d'affiliation : ?aff=XYZ789 ou ?fpr=XYZ789 (style FirstPromoter)

Chaque programme est stocké dans son propre espace de cookies pour qu'un même site puisse gérer un programme de parrainage et un programme d'affiliation simultanément :

• Code de parrainage → cookie blitzrocket_referral_code
• Code d'affiliation → cookie blitzrocket_affiliate_code

Comme les codes sont uniques uniquement au sein d'une campagne, le script détermine à quelle campagne appartient un code via le serveur lors de la première visite. Le code détecté est ensuite inclus dans les appels de suivi suivants.

Un domaine peut avoir au maximum un programme de parrainage actif et un programme d'affiliation actif en même temps. Pour changer de programme, désactivez d'abord celui en cours.

Cibler un programme spécifique

Lors du suivi côté serveur, lisez le cookie correspondant. Lors de l'utilisation des helpers JS sur un site qui gère les deux programmes, précisez explicitement le type de programme :

// Suivre une inscription affiliée spécifiquement
window.RocketTracker.trackSignup("newuser@example.com", { type: "affiliate" });

// Suivre un achat affilié spécifiquement
window.RocketTracker.trackPurchase("order-12345", 49.99, "USD", "buyer@example.com", { type: "affiliate" });

Intégration aux frameworks

Nuxt 3

Blitz Rocket fournit un plugin Nuxt intégré. Configurez la variable d'environnement NUXT_PUBLIC_BLITZROCKET_CAMPAIGN_ID et le script se charge automatiquement.

Vous pouvez aussi utiliser l'assistant $blitzrocket fourni :

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

HTML simple

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

Google Tag Manager

1. Allez dans GTM → Tags → Nouveau Tag
2. Choisissez HTML personnalisé
3. Collez :

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

4. Définissez le déclencheur sur Toutes les pages
5. Publiez vos modifications