Typeform - Widget Integre

Ce qu'on va faire sur cette page

Typeform offre un callback onSubmit natif dans son SDK d'embed. C'est la methode la plus fiable pour tracker les soumissions.

  1. Ouvrir GTM Preview
  2. Remplir le Typeform ci-dessous
  3. Observer le Custom Event dans le dataLayer
  4. Tester le callback onSubmit

Typeform embed avec callback de tracking

Typeform Embed

L'embed Typeform apparaitra ici une fois configure.

Embed Typeform avec callback 
// Methode recommandee : SDK Typeform avec callback onSubmit

<div data-tf-widget="VOTRE_FORM_ID" data-tf-on-submit="typeformSubmit" style="width:100%;height:500px;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  function typeformSubmit(data) {
    window.dataLayer.push({
      event: "typeform_submit",
      form_id: data.formId,
      response_id: data.responseId
    });
  }
</script>

// Le callback recoit un objet avec :
// data.formId      -> L'ID du Typeform
// data.responseId  -> L'ID unique de la reponse
Configuration GTM 
// Configuration GTM :
// Trigger : Custom Event -> "typeform_submit"
//
// Tag GA4 Event :
// Event name : generate_lead
// Parametres :
//   lead_source = "typeform"
//   form_id = {{DLV - form_id}}
//   response_id = {{DLV - response_id}}

// Alternative : Hidden Fields
// Typeform permet de passer des "hidden fields" dans l'URL :
// data-tf-hidden="utm_source=xxx,utm_medium=yyy"
// Ces valeurs sont enregistrees avec la reponse dans Typeform.

Typeform : embed vs popup

Le callback onSubmit fonctionne avec les deux modes. Pour le popup, voir la page dediee.