GTMCustomHTML

Intégration via une balise HTML personnalisée

Configuration de la balise HTML personnalisée

1. Depuis Google Tag Manager, allez dans Balises.
2. Cliquez sur Nouveau.
3. Pour Type de balise, sélectionnez HTML personnalisé.
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: "",
    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. Assignez vos variables dataLayer à leurs champs d'attributs correspondants (par exemple, email: {{dl_email}}).

remarque

Veuillez vous assurer que la case document.write est activé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.