Jotform - Formulaire Integre

Ce qu'on va faire sur cette page

Jotform s'integre via iframe. Le tracking se fait par listener postMessage car Jotform envoie un message quand le formulaire est soumis.

  1. Ouvrir GTM Preview
  2. Remplir le formulaire Jotform
  3. Observer les events dans le dataLayer
  4. Comparer avec les autres outils de formulaire

Formulaire Jotform embed (iframe)

Jotform Embed

Remplacer par l'iframe Jotform :
<iframe src="https://form.jotform.com/FORM_ID">

Listener Jotform postMessage 
// Listener pour Jotform (tag Custom HTML dans GTM) :

<script>
  window.addEventListener("message", function(e) {
    if (!e.data) return;

    var data;
    try {
      data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
    } catch(err) { return; }

    // Jotform envoie un message avec action "submission-completed"
    if (data.action === "submission-completed") {
      window.dataLayer.push({
        event: "jotform_submit",
        form_id: data.formID || "jotform",
        submission_id: data.submissionID || ""
      });
    }
  });
</script>

// Jotform envoie aussi des messages pour :
// "iframe-ready"         -> iframe charge
// "setHeight"            -> redimensionnement auto
// "submission-completed" -> SOUMISSION (ce qu'on veut tracker)

Jotform et le tracking

Jotform a aussi une integration GA4 native (dans les parametres du formulaire). Mais comme les autres outils, le tracking se fait depuis le domaine jotform.com, ce qui pose des problemes d'attribution. Le listener GTM est plus fiable.