Configurer SMOC Flow avec iFrame et suivi

Ce guide vous montre comment intégrer un parcours conversationnel SMOC sur votre site web à l'aide d'une iFrame, avec une configuration correcte du pixel de suivi et la gestion des paramètres UTM.

Vue d'ensemble

Pour intégrer un parcours SMOC sur votre site web, vous devez mettre en place trois composants principaux :

code iFrame - Intègre le parcours conversationnel sur votre page

Pixels de suivi - Codes de suivi Meta (Facebook) et Google

Script d'en-tête - Transmet les paramètres UTM de votre page à l’iFrame. Les parcours en cartes intègrent `/cards?iframe_mode=true` pour que l’iframe affiche uniquement la carte ; la page hébergée `/cards` conserve tout texte et design au-dessus, à côté ou en dessous.

Pour des conseils généraux et la FAQ, consultez : https://www.smoc.ai/faq

1. Implémentation iFrame

Le code iFrame intègre votre parcours SMOC directement sur votre site web. Deux options de configuration sont possibles selon vos besoins.

Configuration à dimensions fixes

Utilisez cette méthode si vous souhaitez des dimensions précises en pixels. L’iFrame conservera ces mesures exactes :

<iframe  width="440"  id="smoc_iframe"  height="600"  name="code"  allowtransparency  src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true"  style="border: none; overflow: hidden;"  loading="lazy"> </iframe>

Configuration à dimensions dynamiques

Utilisez cette approche lorsque vous souhaitez que l’iFrame remplisse son conteneur parent. Placez cette iFrame à l’intérieur d’un <div> parent avec les dimensions appropriées :

<iframe 
  width="100%" 
  id="smoc_iframe" 
  height="100%" 
  name="code" 
  allowtransparency 
  src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true" 
  style="border: none; overflow: hidden;" 
  loading="lazy">
</iframe>

Considérations importantes concernant le placement

Lorsque vous placez l’iFrame sur votre page, assurez-vous que :

• Sur les appareils mobiles, les clients n’ont pas besoin de faire défiler pour voir le parcours
• L’iFrame est positionné de manière visible et immédiatement perceptible
• Vous ajustez la hauteur et la largeur soit directement dans le code, soit en le rendant réactif grâce à la configuration dynamique

2. Configuration des pixels de suivi

Les pixels de suivi de Meta (Facebook) et Google peuvent être obtenus auprès de votre agence marketing ou directement depuis vos comptes Meta Business Manager et Google Ads. Ces codes doivent être placés dans la section <head> de votre page web.

Code du pixel Meta

Le pixel Meta suit les interactions des utilisateurs pour la publicité Facebook. Remplacez l’ID du pixel par le vôtre :

<!-- Code Pixel Meta -->
<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', 'YOUR_META_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_META_PIXEL_ID&ev=PageView&noscript=1" />
</noscript>
<!-- Fin du code Pixel Meta -->

Code Pixel Google

Le pixel Google suit les conversions pour Google Ads. Remplacez l’ID de suivi par le vôtre :

html

<!-- Code Google Pixel -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXXXX');
</script>
<!-- Fin du code Google Pixel -->

Remarque : Remplacez YOUR_META_PIXEL_ID et AW-XXXXXXXXXX par vos propres identifiants de suivi issus de votre Meta Business Manager et de vos comptes Google Ads, ou obtenez-les auprès de votre agence marketing.

3. Propagation des paramètres UTM via smoc.js

Pour simplifier l'intégration et garantir un suivi cohérent, SMOC propose désormais un script d'aide JavaScript standard.

Comment ça marche

• Au chargement de la page, le script recherche tous les éléments <iframe> dont le src commence par https://go.smoc.ai ou https://go2.smoc.ai.
• Il ajoute les paramètres UTM manquants (utm_source, utm_medium, utm_campaign, utm_term, utm_content) de l'URL de la page actuelle à la source de l'iframe.
• Si l'iframe possède déjà des paramètres UTM, ils sont conservés.

Pour l'utiliser :

Incluez le script suivant une seule fois dans la section <head> de votre page :

<script src="https://go.smoc.ai/smoc.js" defer></script>

Assurez-vous que votre iframe utilise un src pointant vers https://go.smoc.ai ou https://go2.smoc.ai. Visitez la page avec des paramètres UTM dans l’URL. Le src de l’iframe les inclura automatiquement.

Limitations

• Le script ne s’exécute qu’une seule fois lors de DOMContentLoaded. Si votre site injecte des iframes SMOC dynamiquement après le chargement de la page, contactez le support SMOC pour activer une variante dynamique.
• Assurez-vous que votre CSP (Content Security Policy) autorise le chargement et l’encadrement depuis go.smoc.ai ou go2.smoc.ai.

4. Transférez les UTM vers les messages de lien sortants

smoc.js fait entrer les paramètres de campagne dans le parcours. Pour transmettre ces mêmes paramètres à une URL de boutique ou de partenaire, ouvrez le message de lien (ou le lien Open Graph) dans Studio et activez Transférer les UTM & IDs de clic. La destination reçoit alors les clés utm_* entrantes ainsi que les IDs de clic publicitaire (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Les paramètres déjà présents sur l’URL de destination sont conservés. Le bouton est désactivé par défaut.

Détails : Intégrer des parcours web et transmettre les UTM.

Exemple d’implémentation complet

Voici comment tous les composants fonctionnent ensemble dans les sections <head> et <body> :

<!DOCTYPE html>
<html>
<head>

  <!-- Code Meta Pixel -->
  <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', 'YOUR_META_PIXEL_ID');
    fbq('track', 'PageView');
  </script>
  <noscript>
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=YOUR_META_PIXEL_ID&ev=PageView&noscript=1" />
  </noscript>
  <!-- Fin du code Meta Pixel -->
  
  <!-- Code Google Pixel -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- Fin du code Google Pixel -->
  
  <!-- Gestionnaire de paramètres UTM -->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const iframe = document.getElementById("smoc_iframe");
      const urlParams = new URLSearchParams(window.location.search);
      const utmParams = [
        'utm_source',
        'utm_medium',
        'utm_campaign',
        'utm_term',
        'utm_content'
      ];
      
      const utmQueryString = utmParams
        .map(param => urlParams.get(param) ? `${param}=${urlParams.get(param)}` : '')
        .filter(param => param)
        .join('&');
      
      if (utmQueryString) {
        console.log('adding', utmQueryString)
        iframe.src += (iframe.src.includes('?') ? '&' : '?') + utmQueryString;
      }
    });
  </script>

  <script src="https://YOUR_DOMAIN/smoc.js" defer></script>
</head>
<body>
  <!-- Contenu de votre page -->
  
  <!-- iFrame du parcours SMOC -->
  <iframe 
    width="440" 
    id="smoc_iframe" 
    height="600" 
    name="code" 
    allowtransparency 
    src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true" 
    style="border: none; overflow: hidden;" 
    loading="lazy">
  </iframe>
  
  <!-- Plus de contenu de page -->
</body>
</html>

Résumé

Pour intégrer SMOC sur votre site web :

Ajoutez le code iFrame à l'endroit où vous souhaitez que le parcours apparaisse (taille fixe ou dynamique)

Obtenez les pixels de suivi auprès de votre agence marketing ou de vos comptes et ajoutez-les dans la section <head>

Ajoutez le fichier JavaScript SMOC (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) dans la section <head>. Il propagera automatiquement les paramètres UTM à toutes les iframes SMOC lors du chargement de la page.

Pour toute question ou assistance supplémentaire, visitez https://www.smoc.ai/faq ou contactez votre représentant SMOC.

Guides associés

Continuer avec ces guides associés

Générer des publicités depuis Studio

StudioIntégrations

Connecter SMOC à HubSpot

IntégrationsConsoleProspection

Connectez les publicités Meta, Google, LinkedIn et ChatGPT

IntégrationsConsoleDéveloppeurs

Voir tous les guides →