Opsætning af SMOC Flow med iFrame og tracking

Denne guide viser dig, hvordan du indlejrer et SMOC samtaleflow på din hjemmeside ved hjælp af en iFrame, sammen med korrekt opsætning af tracking pixel og håndtering af UTM-parametre.

Oversigt

For at integrere et SMOC-flow på din hjemmeside skal du implementere tre hovedkomponenter:

iFrame-kode - Indlejrer samtaleflowet på din side

Sporingspixels - Meta (Facebook) og Google sporingskoder

Header-script - Sender UTM-parametre fra din side til iFrame. Kortflow indlejrer `/cards?iframe_mode=true`, så iframen kun viser kortet; den hostede `/cards`-side bevarer al tekst og design over, ved siden af eller under.

For generel vejledning og ofte stillede spørgsmål, besøg: https://www.smoc.ai/faq

1. iFrame-implementering

iFrame-koden indlejrer dit SMOC-flow direkte på din webside. Du har to opsætningsmuligheder afhængigt af dine behov.

Opsætning med faste dimensioner

Brug denne tilgang, hvis du ønsker specifikke pixelmål. iFrame vil fastholde disse præcise mål:

<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 dimensionsopsætning

Brug denne tilgang, når du ønsker, at iFrame skal udfylde sin overordnede container. Placer denne iFrame inde i en overordnet <div> med passende 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>

Vigtige overvejelser om placering

Når du placerer iFrame på din side, skal du sikre, at:

• På mobile enheder behøver kunderne ikke at scrolle for at se flowet
• iFrame er placeret fremtrædende og er straks synlig
• Du justerer højde og bredde enten direkte i koden eller gør det responsivt med dynamisk opsætning

2. Opsætning af tracking-pixels

Tracking-pixels fra Meta (Facebook) og Google kan fås fra dit marketingbureau eller hentes direkte fra dine Meta Business Manager- og Google Ads-konti. Disse koder skal placeres i <head>-sektionen på din webside.

Meta Pixel-kode

Meta-pixlen sporer brugerinteraktioner til Facebook-annoncering. Udskift pixel-ID'et med dit eget:

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

Google Pixel-kode

Google-pixlen sporer konverteringer til Google Ads. Udskift sporings-ID'et med dit eget:

html

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

Bemærk: Udskift YOUR_META_PIXEL_ID og AW-XXXXXXXXXX med dine faktiske sporings-id'er fra din Meta Business Manager og Google Ads-konti, eller få dem fra dit marketingbureau.

3. UTM-parameter-overførsel via smoc.js

For at forenkle integrationen og sikre ensartet sporing tilbyder SMOC nu et standard JavaScript-hjælpescript.

Sådan virker det

• Når siden indlæses, finder scriptet alle <iframe>-elementer, hvis src begynder med https://go.smoc.ai eller https://go2.smoc.ai.
• Den tilføjer eventuelle manglende UTM-parametre (utm_source, utm_medium, utm_campaign, utm_term, utm_content) fra den aktuelle sidens URL til iframe-src.
• Hvis iframe-elementet allerede har nogle UTM-parametre, bevares de.

Sådan bruger du det:

Inkludér følgende script én gang i <head>-sektionen på din side:

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

Sørg for, at din iframe bruger en src, der peger på https://go.smoc.ai eller https://go2.smoc.ai. Besøg siden med UTM-parametre i URL'en. iframe-src vil automatisk inkludere dem.

Begrænsninger

• Scriptet kører kun én gang ved DOMContentLoaded. Hvis dit site indsætter SMOC-iframes dynamisk efter siden er indlæst, kontakt SMOC-support for at aktivere en dynamisk variant.
• Sørg for, at din CSP (Content Security Policy) tillader indlæsning og indramning fra go.smoc.ai eller go2.smoc.ai.

4. Send UTM-parametre videre til udgående linkbeskeder

smoc.js får kampagneparametre ind i flowet. For at sende de samme parametre videre til en shop- eller partner-URL, åbn linkbeskeden (eller Open Graph-linken) i Studio og aktiver Send UTM- og klik-ID'er videre. Destinationen modtager derefter indkommende utm_*-nøgler samt annonceklik-ID'er (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Parametre, der allerede findes på destinations-URL'en, bevares. Skifteren er som standard slået fra.

Detaljer: Indlejring af webflows og videresendelse af UTM’er.

Komplet implementeringseksempel

Sådan fungerer alle komponenterne sammen i <head>- og <body>-sektionerne:

<!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>
  <!-- Slut 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>
  <!-- Slut 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>
  <!-- Dit sideindhold -->
  
  <!-- SMOC-flow 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>
  
  <!-- Mere sideindhold -->
</body>
</html>

Resumé

For at integrere SMOC på dit website:

Tilføj iFrame-koden hvor du vil have flowet vist (fast eller dynamisk størrelse)

Hent sporingspixels fra dit marketingbureau eller dine konti og tilføj dem til <head>-sektionen

Tilføj SMOC JavaScript-filen (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) i <head>-sektionen. Den vil automatisk videreføre UTM-parametre til alle SMOC iframes ved indlæsning af siden.

For yderligere spørgsmål eller support, besøg https://www.smoc.ai/faq eller kontakt din SMOC-repræsentant.

Relaterede guider

Fortsæt med disse relaterede guider

Generér annoncer fra Studio

StudioIntegrationer

Forbind SMOC til HubSpot

IntegrationerConsoleProspektering

Forbind Meta, Google, LinkedIn og ChatGPT Ads

IntegrationerConsoleUdviklere

Se alle guider →