Aller au contenu principal

Intégration directe

Web SDK​

Le Web SDK de Rokt est une bibliothèque JavaScript qui vous permet de signaler automatiquement les conversions depuis le frontend de votre site web.

Ajouter le Rokt Web SDK​

Avant de commencer, veuillez vous assurer que vous avez votre ID de compte Rokt. Pour trouver le vôtre, consultez les instructions ici.

  1. Obtenez votre code d'intégration unique auprès de votre gestionnaire de compte Rokt, ou générez-le vous-même sur my.rokt.com.

    1. Connectez-vous à my.rokt.com.

    2. Cliquez sur votre compte.

    3. Cliquez sur Intégrations.

    4. Cliquez sur Configurer le Snippet.

    5. Sélectionnez Enregistrer les conversions.

    6. Choisissez un identifiant client afin que Rokt puisse correctement associer les événements de campagne aux conversions. Nous prenons en charge les éléments suivants :

      Nom de l'attributDescription de l'attribut
      emailEmail brut
      emailsha256Email haché (SHA-256)
      passbackconversiontrackingidID Rokt

      Nous recommandons d'utiliser l'adresse email client brute ou hachée (SHA-256) comme identifiant. Comme alternative à l'email haché ou brut, vous pouvez utiliser l'ID Rokt comme identifiant. Cette méthode demande plus de travail de la part de votre équipe de développement, mais ne nécessite aucune information personnellement identifiable.

    7. Ajoutez des attributs contextuels pertinents. Les données contextuelles aident Rokt à en savoir plus sur les campagnes et les audiences les plus efficaces pour votre entreprise. Nous utilisons ces informations pour optimiser l'acquisition et aider vos campagnes à mieux performer à l'avenir. Certains attributs que nous recommandons sont :

    • firstname
    • lastname
    • conversiontype
    • amount
    • currency
    • quantity
    • paymenttype
    • margin
    • confirmationref

Exemple d'intégration​

attention

Le snippet ci-dessous est un exemple d'intégration. Votre code d'intégration différera en fonction de l'identifiant client et des attributs supplémentaires que vous avez décidé d'intégrer.

Ce qui suit est un exemple d'intégration où un utilisateur a sélectionné :

  • Email brut comme identifiant client.
  • Prénom, nom, montant, devise et type de paiement comme attributs contextuels.
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags -->

  <!-- Part #1 - Load the Web SDK -->
  <script type="module">
     window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
        const target = document.head || document.body;
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
        script.fetchpriority = "high";
        script.crossOrigin = "anonymous";
        script.async = true;
        script.id = "rokt-launcher";

        script.addEventListener('load', () => resolve());
        script.addEventListener('error', (error) => reject(error));

        target.appendChild(script);
     });
  </script>

  <!-- Other scripts and meta tags -->
</head>
<body>
  <!-- Your HTML content here -->

  <!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
  <script type="module">
     await window.RoktLauncherScriptPromise;

     const launcher = await window.Rokt.createLauncher({
        accountId: "rokt-account-id",
        sandbox: true,
     });

     await launcher.selectPlacements({
        attributes: {
           //customer identifier - at least one required
           email: "john.smith@gmail.com",
           emailsha256: "",
           passbackconversiontrackingid: "",
           firstname: "",
           lastname: "",
           conversiontype: "",
           billingzipcode: "",
           amount: "",
           mobile: "",
           currency: "",
           quantity: "",
           paymenttype: "",
           margin: "",
           confirmationref: "",
        },
     });
  </script>

  <!-- Your HTML content here -->
</body>
</html>

L'explication des différentes parties de l'exemple de code peut être trouvée dans la documentation de la bibliothèque Web SDK.

  1. Ajoutez le code d'intégration à votre page de confirmation.

    1. Vous devez placer le code d’intégration sur toute page qui suit immédiatement un événement de conversion, généralement une page de confirmation ou de remerciement. Collez le code d’intégration directement dans la page, en respectant la structure suggérée.

    2. Assurez-vous que l'intégration enregistre toutes les conversions sur votre site. Rokt peut alors gérer le processus d'attribution pour déterminer quelles conversions résultent d'un événement de campagne Rokt.

      Gestionnaires de balises

      Vous pouvez ajouter le code d'intégration Rokt à votre site en utilisant un gestionnaire de balises, mais cela peut entraîner une réduction des performances en raison de la perte de certains événements de conversion. Pour de meilleurs résultats, nous recommandons l'intégration directe décrite sur cette page.

  2. Remplissez vos attributs de données. Assurez-vous qu'au moins votre identifiant client (email ou Rokt ID) est rempli avec les données correctes. Configurez également tous les attributs contextuels.

    1. Si vous souhaitez utiliser l'adresse email hachée comme identifiant, vous pouvez utiliser la fonction de hachage pré-construite de Rokt. Vous pouvez trouver des informations supplémentaires sur la page d'intégration des données en deux étapes.

  3. Testez que l'intégration est engageante et contient les données correctes. Consultez les instructions de test.

Pour des performances optimales, envisagez d'intégrer à la fois l'API d'événements et le SDK Web. L'utilisation des deux méthodes crée une redondance et aide à identifier toute anomalie pouvant survenir dans le navigateur ou sur votre serveur.

Cet article vous a-t-il été utile ?