Last updated 24 oct. 2023

CustomHtml

Intégration via une balise HTML personnalisée

Configuration de la balise HTML personnalisée

1. Depuis Google Tag Manager, accédez à Balises.
2. Cliquez sur Nouveau.
3. Pour le Type de balise, sélectionnez HTML personnalisé.
4. Ajoutez le code d'intégration Rokt. Si vous n'avez pas de code personnalisé, vous pouvez utiliser le suivant :

<script type="module">
  const attributes = {
    email: "",
    firstname: "",
    lastname: "",
    mobile: "",
    confirmationref: "",
    amount: "",
    currency: "",
    paymenttype: "",
    ccbin: "",
    zipcode: "",
    country: "",
    language: "",
  };

  if(!window.roktLauncher){
    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.importance = "high";
    script.crossOrigin = "anonymous";
    script.async = true;
    script.id = "rokt-launcher";
    target.appendChild(script);
    await new Promise((resolve) =>
    window.Rokt
      ? resolve()
      : document
        .getElementById("rokt-launcher")
        .addEventListener("load", () => resolve())
    );
    window.roktLauncher = await window.Rokt.createLauncher({
      accountId: "rokt-account-id",
      sandbox: true,
    });
  }

  const selection = await window.roktLauncher.selectPlacements({
    attributes,
    identifier: "payment_page"
  });
</script>

5. Attribuez vos variables de dataLayer à leurs champs d'attributs correspondants (par exemple, email : {{dl_email}}).

remarque

Veuillez vous assurer que la case à cocher document.write est activée, sinon Google empêchera les modifications d'être publiées. Assurez-vous également de mettre à jour accountId avec la valeur fournie par votre gestionnaire de compte et de définir sandbox sur true lors des tests.

6. Ajoutez un déclencheur.

7. Enregistrer et publier.