Konfigurera SMOC Flow med iFrame och spårning

Den här guiden visar hur du bäddar in ett SMOC-konversationsflöde på din webbplats med hjälp av en iFrame, samt korrekt inställning av spårningspixel och hantering av UTM-parametrar.

Översikt

För att integrera ett SMOC-flöde på din webbplats behöver du implementera tre huvudkomponenter:

iFrame-kod - Bäddar in konversationsflödet på din sida

Spårningspixlar - Meta (Facebook) och Google spårningskoder

Header-skript - Skickar UTM-parametrar från din sida till iFrame. Kortflöden bäddar in `/cards?iframe_mode=true` så att iframen bara visar kortet; den hostade `/cards`-sidan behåller eventuell text och design ovanför, bredvid eller under.

För allmän vägledning och vanliga frågor, besök: https://www.smoc.ai/faq

1. iFrame-implementering

iFrame-koden bäddar in ditt SMOC-flöde direkt på din webbplats. Du har två installationsalternativ beroende på dina behov.

Fast dimensionsinställning

Använd detta tillvägagångssätt när du vill ha specifika pixelmått. iFrame kommer att behålla dessa exakta mått:

<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>

Dynamisk dimensionsinställning

Använd detta tillvägagångssätt när du vill att iFrame ska fylla sin överordnade container. Placera denna iFrame inuti en överordnad <div> med lämpliga dimensioner:

<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>

Viktiga placeringsaspekter

När du placerar iFrame på din sida, se till att:

• På mobila enheter behöver kunderna inte scrolla för att se flödet
• iFrame är placerad på en framträdande plats och är omedelbart synlig
• Du justerar höjd och bredd antingen direkt i koden eller gör det responsivt med hjälp av dynamisk inställning

2. Inställning av spårningspixlar

Spårningspixlar från Meta (Facebook) och Google kan erhållas från din marknadsföringsbyrå eller hämtas direkt från dina Meta Business Manager- och Google Ads-konton. Dessa koder ska placeras i <head>-delen av din webbsida.

Meta Pixel-kod

Meta-pixeln spårar användarinteraktioner för Facebook-annonsering. Byt ut pixel-ID mot din egen:

<!-- Meta Pixel-kod -->
<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>
<!-- Slut på Meta Pixel-kod -->

Google Pixel-kod

Google-pixeln spårar konverteringar för Google Ads. Byt ut spårnings-ID mot din egen:

html

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

Obs: Byt ut YOUR_META_PIXEL_ID och AW-XXXXXXXXXX med dina faktiska spårnings-ID:n från Meta Business Manager och Google Ads-kontona, eller be om dem från din marknadsföringsbyrå.

3. UTM-parameteröverföring via smoc.js

För att förenkla integrationen och säkerställa konsekvent spårning tillhandahåller SMOC nu ett standardiserat JavaScript-hjälpskript.

Så fungerar det

• Vid sidladdning hittar skriptet alla <iframe>-element vars src börjar med https://go.smoc.ai eller https://go2.smoc.ai.
• Den lägger till eventuella saknade UTM-parametrar (utm_source, utm_medium, utm_campaign, utm_term, utm_content) från den aktuella sidans URL till iframe-src.
• Om iframe-elementet redan har några UTM-parametrar bevaras dessa.

Så här använder du det:

Inkludera följande skript en gång i <head>-sektionen på din sida:

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

Se till att din iframe använder en src som pekar till https://go.smoc.ai eller https://go2.smoc.ai. Besök sidan med UTM-parametrar i URL:en. iframe-src kommer automatiskt att inkludera dem.

Begränsningar

• Skriptet körs bara en gång vid DOMContentLoaded. Om din webbplats injicerar SMOC-iframes dynamiskt efter att sidan har laddats, kontakta SMOC-supporten för att aktivera en dynamisk variant.
• Se till att din CSP (Content Security Policy) tillåter inläsning och inramning från go.smoc.ai eller go2.smoc.ai.

4. Vidarebefordra UTM-parametrar till utgående länkmeddelanden

smoc.js får in kampanjparametrar i flödet. För att skicka samma parametrar vidare till en butik- eller partner-URL, öppna länkmeddelandet (eller Open Graph-länken) i Studio och aktivera Vidarebefordra UTM- & klick-ID:er. Då får destinationen inkommande utm_*-nycklar samt annonsklick-ID:er (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Parametrar som redan finns på destinations-URL:en behålls. Växeln är avstängd som standard.

Detaljer: Bädda in webbflöden och skicka med UTM.

Fullständigt implementeringsexempel

Så här fungerar alla komponenter tillsammans i <head>- och <body>-sektionerna:

<!DOCTYPE html>
<html>
<head>

  <!-- Meta Pixel-kod -->
  <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>
  <!-- Slut på Meta Pixel-kod -->
  
  <!-- Google Pixel-kod -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- Slut på Google Pixel-kod -->
  
  <!-- UTM-parameterhanterare -->
  <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>
  <!-- Ditt sidinnehåll -->
  
  <!-- SMOC-flöde iFrame -->
  <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>
  
  <!-- Mer sidinnehåll -->
</body>
</html>

Sammanfattning

För att integrera SMOC på din webbplats:

Lägg till iFrame-koden där du vill att flödet ska visas (fast eller dynamisk storlek)

Hämta spårningspixlar från din marknadsföringsbyrå eller dina konton och lägg till dem i <head>-sektionen

Lägg till SMOC JavaScript-filen (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) i <head>-sektionen. Den kommer automatiskt att föra över UTM-parametrar till alla SMOC iframes vid sidladdning.

För ytterligare frågor eller support, besök https://www.smoc.ai/faq eller kontakta din SMOC-representant.

Relaterade guider

Fortsätt med de här relaterade guiderna

Generera annonser från Studio

StudioIntegrationer

Koppla SMOC till HubSpot

IntegrationerConsoleProspektering

Anslut Meta, Google, LinkedIn och ChatGPT Ads

IntegrationerConsoleUtvecklare

Visa alla guider →