Last updated 16 juil. 2024

CustomHtml

Intégration via une balise HTML personnalisée

Configuration de la balise HTML personnalisée

1. Depuis Google Tag Manager, allez à Tags.
2. Cliquez sur New.
3. Pour Tag Type, sélectionnez Custom HTML.
4. Ajoutez le code d'intégration Rokt. Si vous n'avez pas de snippet personnalisé, vous pouvez utiliser le suivant :

<script type="module">
  const attributes = {
    email: "",
    firstname: "",
    lastname: "",
    mobile: "",
    confirmationref: "",
    amount: "",
    currency: "",
    paymenttype: "",
    ccbin: "",
    billingzipcode: "",
    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. Assignez vos variables dataLayer à leurs champs d'attributs correspondants (par exemple, email: {{dl_email}}).

remarque

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

6. Ajoutez un déclencheur.

7. Enregistrez et publiez.