Utiliser kelvin°

Tracking : Intégrer le pixel META en iframe sur kelvin

29/7/2025

—

min

Intégrer un simulateur dans une page web ? Facile.
Tracker les actions des utilisateurs dans cette iframe avec un pixel Meta ? Moins évident.
Et pourtant, c’est possible.

Et même indispensable si vous pilotez des campagnes Meta pour capter des leads en rénovation énergétique.

Alors si vous utilisez le simulateur kelvin en iframe, ce guide est fait pour vous : on vous explique, pas à pas, comment faire remonter les bons événements de conversion directement dans votre Pixel Meta, sans prise de tête.

‍

D’abord, c’est quoi une iframe ?

Techniquement, une iframe (ou "inline frame") permet d’embarquer un site dans un autre site.
Imaginez une fenêtre dans votre page qui affiche un contenu externe — ici, le simulateur kelvin.
Résultat : le visiteur reste sur votre site, mais peut interagir avec l’outil kelvin.

Chez kelvin, cette iframe est interconnectée à la page mère via des messages envoyés en temps réel. On peut donc écouter les actions utilisateurs, même si elles ont lieu "à l’intérieur" du simulateur.

‍

L’iframe du simulateur kelvin : comment ça marche ?

En intégrant le simulateur kelvin via iframe, vous bénéficiez d’un outil clé-en-main pour capter, qualifier et convertir les particuliers porteurs de projets.

Voici ce que l’iframe peut envoyer comme messages à votre page web :

kelvin:simulator:url_visited : pour chaque page visitée
kelvin:simulator:contact_informations_popin_displayed : quand la popin de contact s’affiche
kelvin:simulator:lead_created : quand un utilisateur envoie ses coordonnées (événement crucial à tracker !)
kelvin:simulator:scenarios_page_cta_clicked : clic sur "Comprendre mes prochaines étapes"
kelvin:simulator:final_page_cta_clicked : clic sur "Nouvelle simulation"

Et maintenant, voyons comment brancher tout ça avec Meta.

Étape 1 – Intégrer le pixel Meta sur votre site

Ajoutez le script ci-dessous dans la balise <head> de votre site :

‍

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', 'VOTRE_ID_PIXEL'); // Remplacez par votre ID pixel
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=VOTRE_ID_PIXEL&ev=PageView&noscript=1"/>
</noscript>

‍

Étape 2 – Ajouter l’iframe du simulateur kelvin

Insérez l’iframe avec l’URL de votre simulateur personnalisé :

‍

<iframe
  src="https://app.go-kelvin.com/simulator/votre-identifiant-client"
  width="100%"
  height="600"
  style="border: none;"
></iframe>

‍

Étape 3 – Écouter les messages de l’iframe et tracker les événements

Ajoutez ce script dans votre page, après le pixel Meta :

‍

<script>
  window.addEventListener('message', function (event) {
    if (event.origin !== "https://app.go-kelvin.com") return;

    const data = event.data;
    if (!data || typeof data !== 'object') return;

    switch (data.message) {
      case "kelvin:simulator:lead_created":
        fbq('track', 'Lead');
        console.log("[Meta Pixel] Lead tracké avec Kelvin", data.payload);
        break;

      case "kelvin:simulator:scenarios_page_cta_clicked":
        fbq('trackCustom', 'KelvinCTA');
        break;

      case "kelvin:simulator:final_page_cta_clicked":
        fbq('trackCustom', 'KelvinRestart');
        break;

      default:
        break;
    }
  }, false);
</script>

Étape 4 – Vérifiez que ça marche

Téléchargez l’extension Meta Pixel Helper sur Chrome, et vérifiez que l’événement "Lead" s’active bien après soumission du formulaire dans le simulateur.

Pourquoi c’est utile ?

Parce qu’avec ce setup, vous pouvez :

Suivre précisément vos conversions Meta
Optimiser vos campagnes de génération de leads
Et surtout : connecter facilement votre stratégie digitale avec l’outil kelvin

Avec le simulateur kelvin, vous captez automatiquement des leads qualifiés avec un outil simple, rapide et intelligent.
Grâce à cette intégration iframe et au tracking Meta, vous optimisez vos investissements publicitaires et vous boostez vos conversions.

‍