DirectOnPage

Ajouter le Rokt Web SDK directement sur votre page

Ajoutez le Rokt Web SDK dans la section <head> de votre page de paiement ou de validation. Vous pouvez trouver le guide complet pour ajouter le Rokt Web SDK à votre site ici.
Intégrez les éléments de données requis pour que Rokt charge le placement et les publicités pertinentes. Incluez tous les attributs pertinents nécessaires pour personnaliser les offres et fournir des rapports et des analyses précis. Détails supplémentaires ici.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Balises méta -->

  <!-- Partie #1 - Charger le 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>

  <!-- Autres scripts et balises méta -->
</head>
<body>
  <!-- Votre contenu HTML ici -->

  <!-- Partie #2 - Dès que les attributs de données sont disponibles, exécutez le script ci-dessous pour afficher un placement Rokt -->
  <script type="module">
    await window.RoktLauncherScriptPromise;
    
    const launcher = await window.Rokt.createLauncher({
        accountId:'rokt-account-id',
        sandbox: location.href.indexOf("staging_domain_here") > 0,
    });

    const cartItems = [
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        },
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        }
    ]; 

    const selection = await launcher.selectPlacements({
```html
        identifier: "payment_page",
        attributes: {
            // Requis
            amount: '',
            firstname: '',
            lastname: '',
            billingzipcode: '',
            Country: '',
            Language: '',
            currency: '',
            cartItems: JSON.stringify(cartItems),
            email: '',
    
            //Données de commande
            clientcustomerid: '',
            cartId: '',
            subtotal: '',
            totalTax: '',
            totalShipping: '',
            margin: '',
            paymenttype: '',
            ccbin: '',
    
            //Données client
            customerType: '',
            hasAccount: '',
            isReturning: '',
            lastVisited: '',
            isLoyalty: '',
            loyaltyTier: '',
            mobile: '',
            title: '',
            age: '',
            gender: '',
            dob: '',
            billingAddress1: '',
            billingAddress2: '',
            billingCity: '',
            billingState: '',
            billingCountry: '',
            shippingAddress1: '',
            shippingAddress2: '',
            shippingCity: '',
            shippingState: '',
            shippingZipcode: '',
            shippingCountry: '',
        },
    });
  </script>

  <!-- Votre contenu HTML ici -->
</body>
</html>

Plus d'informations sur l'ajout de gestionnaires d'événements pour l'intégration basée sur des événements peuvent être trouvées ici.

Ajouter le Rokt Web SDK directement sur votre page​

Ajouter le Rokt Web SDK directement sur votre page