Last updated 27 sept. 2024

DirectOnPage

Ajouter le SDK Web Rokt directement sur votre page

Ajoutez le SDK Web Rokt dans la section <head> de votre page de paiement ou de commande. Vous pouvez trouver le guide complet pour ajouter le SDK Web Rokt à 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>
  <!-- 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: 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({
        identifier: "payment_page",
        attributes: {
            // Required
            amount: '',
            firstname: '',
            lastname: '',
            billingzipcode: '',
            Country: '',
            Language: '',
            currency: '',
            cartItems: JSON.stringify(cartItems),
            email: '',
    
            //Order Data
            clientcustomerid: '',
            cartId: '',
            subtotal: '',
            totalTax: '',
            totalShipping: '',
            margin: '',
            paymenttype: '',
            ccbin: '',
    
            //Customer Data
            customerType: '',
            hasAccount: '',
            isReturning: '',
            lastVisited: '',
            isLoyalty: '',
            loyaltyTier: '',
            mobile: '',
            title: '',
            age: '',
            gender: '',
            dob: '',
            billingAddress1: '',
            billingAddress2: '',
            billingCity: '',
            billingState: '',
            billingCountry: '',
            shippingAddress1: '',
            shippingAddress2: '',
            shippingCity: '',
            shippingState: '',
            shippingZipcode: '',
            shippingCountry: '',
        },
    });
  </script>

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

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

Ajouter le SDK Web Rokt directement sur votre page​

Ajouter le SDK Web Rokt directement sur votre page