Sette opp SMOC Flow med iFrame og sporing

Denne guiden viser deg hvordan du bygger inn en SMOC samtaleflyt på nettsiden din ved hjelp av en iFrame, sammen med riktig oppsett av sporingspiksel og håndtering av UTM-parametere.

Oversikt

For å integrere en SMOC-flyt på nettsiden din, må du implementere tre hovedkomponenter:

iFrame-kode - Bygger inn samtaleflyten på siden din

Sporingspiksler - Meta (Facebook) og Google sporingskoder

Header-script - Sender UTM-parametere fra siden din til iFrame. Kortflyter bygger inn `/cards?iframe_mode=true` slik at iframe kun viser kortet; den hostede `/cards`-siden beholder eventuell tekst og design over, ved siden av eller under.

For generell veiledning og vanlige spørsmål, besøk: https://www.smoc.ai/faq

1. iFrame-implementering

iFrame-koden bygger inn din SMOC-flyt direkte på nettsiden din. Du har to oppsettsalternativer avhengig av behov.

Oppsett med faste dimensjoner

Bruk denne tilnærmingen når du ønsker bestemte pikselmål. iFrame vil beholde disse nøyaktige målene:

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

Bruk denne tilnærmingen når du vil at iFrame-en skal fylle sin overordnede beholder. Plasser denne iFrame-en inne i en overordnet <div> med passende dimensjoner:

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

Viktige plasseringsoverveielser

Når du plasserer iFrame-en på siden din, må du sørge for at:

• På mobile enheter trenger ikke kundene å bla for å se flyten
• iFrame-en er plassert godt synlig og er umiddelbart synlig
• Du justerer høyde og bredde enten direkte i koden eller gjør det responsivt ved å bruke dynamisk oppsett

2. Oppsett av sporingspiksler

Sporingspiksler fra Meta (Facebook) og Google kan fås fra markedsføringsbyrået ditt eller hentes direkte fra Meta Business Manager og Google Ads-kontoene dine. Disse kodene skal plasseres i <head>-delen av nettsiden din.

Meta Pixel-kode

Meta-pikselen sporer brukerinteraksjoner for Facebook-annonsering. Bytt ut piksel-ID-en med din egen:

<!-- Meta Pixel-kode -->
<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>
<!-- Slutt på Meta Pixel-kode -->

Google Pixel-kode

Google-pikselen sporer konverteringer for Google Ads. Bytt ut sporings-ID-en med din egen:

html

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

Merk: Bytt ut YOUR_META_PIXEL_ID og AW-XXXXXXXXXX med dine faktiske sporings-ID-er fra Meta Business Manager og Google Ads-kontoene dine, eller få dem fra markedsføringsbyrået ditt.

3. UTM-parameteroverføring via smoc.js

For å forenkle integrasjonen og sikre konsekvent sporing, tilbyr SMOC nå et standard JavaScript-hjelpeskript.

Slik fungerer det

• Når siden lastes inn, finner skriptet alle <iframe>-elementer der src starter med https://go.smoc.ai eller https://go2.smoc.ai.
• Det legger til eventuelle manglende UTM-parametere (utm_source, utm_medium, utm_campaign, utm_term, utm_content) fra gjeldende side-URL til iframe-src.
• Hvis iframe-en allerede har noen UTM-parametere, beholdes disse.

Slik bruker du det:

Inkluder følgende skript én gang i <head>-seksjonen på siden din:

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

Sørg for at din iframe bruker en src som peker til https://go.smoc.ai eller https://go2.smoc.ai. Besøk siden med UTM-parametere i URL-en. iframe-src-en vil automatisk inkludere dem.

Begrensninger

• Skriptet kjøres kun én gang ved DOMContentLoaded. Hvis nettstedet ditt injiserer SMOC-iframes dynamisk etter at siden er lastet, kontakt SMOC support for å aktivere en dynamisk variant.
• Sørg for at din CSP (Content Security Policy) tillater lasting og innramming fra go.smoc.ai eller go2.smoc.ai.

4. Send UTM-er videre til utgående lenkemeldinger

smoc.js får kampanjeparametere inn i flyten. For å sende de samme parameterne videre til en butikk- eller partner-URL, åpne lenkemeldingen (eller Open Graph-lenken) i Studio og aktiver Send videre UTM- og klikk-ID-er. Destinasjonen mottar da innkommende utm_*-nøkler samt annonseklikk-ID-er (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Parametere som allerede finnes på destinasjons-URL-en beholdes. Bryteren er av som standard.

Detaljer: Bygge inn webflyter og sende UTM-er videre.

Fullstendig implementeringseksempel

Slik fungerer alle komponentene sammen i <head>- og <body>-seksjonene:

<!DOCTYPE html>
<html>
<head>

  <!-- Meta Pixel-kode -->
  <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>
  <!-- Slutt på Meta Pixel-kode -->
  
  <!-- Google Pixel-kode -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- Slutt på Google Pixel-kode -->
  
  <!-- UTM-parameterhåndtering -->
  <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>
  <!-- Sideinnholdet ditt -->
  
  <!-- SMOC-flyt 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 sideinnhold -->
</body>
</html>

Sammendrag

For å integrere SMOC på nettsiden din:

Legg til iFrame-koden der du vil at flyten skal vises (fast eller dynamisk størrelse)

Hent sporingspiksler fra markedsføringsbyrået ditt eller kontoene dine og legg dem til i <head>-seksjonen

Legg til SMOC JavaScript-filen (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) i <head>-seksjonen. Den vil automatisk videreføre UTM-parametere til alle SMOC iframes ved lasting av siden.

For flere spørsmål eller støtte, besøk https://www.smoc.ai/faq eller kontakt din SMOC-representant.

Relaterte guider

Fortsett med disse relaterte guidene

Generer annonser fra Studio

StudioIntegrasjoner

Koble SMOC til HubSpot

IntegrasjonerConsoleProspektering

Koble til Meta, Google, LinkedIn og ChatGPT Ads

IntegrasjonerConsoleUtviklere

Se alle guider →