SMOC Flowin käyttöönotto iFramen ja seurannan kanssa

Tämä opas näyttää, kuinka upotat SMOC-keskusteluvirran verkkosivullesi iFramen avulla sekä asetat seurantapikselin ja UTM-parametrien käsittelyn oikein.

Yleiskatsaus

Jotta voit integroida SMOC-virran verkkosivullesi, sinun tulee toteuttaa kolme pääkomponenttia:

iFrame-koodi - Upottaa keskusteluvirran sivullesi

Seurantapikselit - Meta (Facebook) ja Googlen seurantakoodit

Otsikkoskripti - Välittää UTM-parametrit sivultasi iFrameen. Korttivirrat upottavat `/cards?iframe_mode=true`:n, jolloin iframe näyttää vain kortin; isännöity `/cards`-sivu säilyttää kaiken tekstin ja suunnittelun ylä-, sivu- tai alapuolella.

Yleisiä ohjeita ja usein kysyttyjä kysymyksiä löydät osoitteesta: https://www.smoc.ai/faq

1. iFrame-toteutus

iFrame-koodi upottaa SMOC-virtasi suoraan verkkosivullesi. Sinulla on kaksi asetusvaihtoehtoa tarpeidesi mukaan.

Kiinteät mitat -asetus

Käytä tätä lähestymistapaa, kun haluat tietyt pikselimitat. iFrame säilyttää nämä tarkat mitat:

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

Dynaaminen mitoitus

Käytä tätä lähestymistapaa, kun haluat, että iFrame täyttää yläkonttinsa. Aseta tämä iFrame ylätason <div>-elementin sisään, jolla on sopivat mitat:

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

Tärkeitä sijoitteluhuomioita

Kun sijoitat iFrame-elementin sivullesi, varmista että:

• Mobiililaitteilla asiakkaiden ei tarvitse vierittää nähdäkseen virran
• iFrame on sijoitettu näkyvästi ja on heti nähtävissä
• Säädät korkeuden ja leveyden joko suoraan koodissa tai teet siitä responsiivisen käyttämällä dynaamista asetusta

2. Seuranta­pikselien asennus

Meta (Facebook) ja Google -seurantapikselit saat markkinointitoimistoltasi tai suoraan Meta Business Managerista ja Google Ads -tileiltäsi. Nämä koodit tulee sijoittaa verkkosivusi <head>-osioon.

Meta Pixel -koodi

Meta-pikseli seuraa käyttäjien vuorovaikutusta Facebook-mainontaa varten. Korvaa pikselin tunnus omallasi:

<!-- Meta-pikselikoodi -->
<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>
<!-- Meta-pikselikoodin loppu -->

Google-pikselikoodi

Google-pikseli seuraa konversioita Google Adsia varten. Korvaa seuranta-ID omallasi:

html

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

Huom: Korvaa YOUR_META_PIXEL_ID ja AW-XXXXXXXXXX omilla seurantatunnuksillasi Meta Business Managerista ja Google Ads -tileiltäsi tai pyydä ne markkinointitoimistoltasi.

3. UTM-parametrien välittäminen smoc.js:n kautta

Integraation yksinkertaistamiseksi ja seurannan yhdenmukaisuuden varmistamiseksi SMOC tarjoaa nyt vakio-JavaScript-apuskriptin.

Näin se toimii

• Sivun latautuessa skripti etsii kaikki <iframe>-elementit, joiden src alkaa osoitteella https://go.smoc.ai tai https://go2.smoc.ai.
• Se lisää mahdolliset puuttuvat UTM-parametrit (utm_source, utm_medium, utm_campaign, utm_term, utm_content) nykyisen sivun URL-osoitteesta iframe-src:ään.
• Jos iframe:ssä on jo UTM-parametreja, ne säilytetään.

Näin käytät sitä:

Lisää seuraava skripti vain kerran sivusi <head>-osioon:

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

Varmista, että iframe käyttää src-osoitetta, joka osoittaa osoitteeseen https://go.smoc.ai tai https://go2.smoc.ai. Vieraile sivulla, jossa on UTM-parametrit URL-osoitteessa. iframe:n src sisältää ne automaattisesti.

Rajoitukset

• Skripti suoritetaan vain kerran, kun DOMContentLoaded tapahtuu. Jos sivustosi lisää SMOC-iframeja dynaamisesti sivun latautumisen jälkeen, ota yhteyttä SMOC-tukeen dynaamisen version aktivoimiseksi.
• Varmista, että CSP:si (Content Security Policy) sallii lataamisen ja kehystämisen osoitteista go.smoc.ai tai go2.smoc.ai.

4. Välitä UTM-parametrit ulospäin lähteviin linkkiviesteihin

smoc.js tuo kampanjaparametrit virtaan. Jos haluat välittää samat parametrit kaupan tai kumppanin URL-osoitteeseen, avaa linkkiviesti (tai Open Graph -linkki) Studiolla ja ota käyttöön Välitä UTM- ja klikkaus-ID:t. Kohde saa tällöin saapuvat utm_*-avaimet sekä mainosklikkaus-ID:t (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Parametrit, jotka ovat jo kohde-URL-osoitteessa, säilyvät. Kytkin on oletuksena pois päältä.

Lisätietoja: Web-flow’iden upottaminen ja UTM:ien välitys.

Täydellinen toteutusesimerkki

Näin kaikki komponentit toimivat yhdessä <head>- ja <body>-osioissa:

<!DOCTYPE html>
<html>
<head>

  <!-- Meta Pixel -koodi -->
  <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>
  <!-- Meta Pixel -koodin loppu -->
  
  <!-- Google Pixel -koodi -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- Google Pixel -koodin loppu -->
  
  <!-- UTM-parametrien käsittelijä -->
  <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>
  <!-- Sivusi sisältö -->
  
  <!-- SMOC-virta 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>
  
  <!-- Lisää sivun sisältöä -->
</body>
</html>

Yhteenveto

Jotta voit integroida SMOC verkkosivustollesi:

Lisää iFrame-koodi siihen kohtaan, jossa haluat virran näkyvän (kiinteä tai dynaaminen koko)

Hanki seurantapikselit markkinointitoimistoltasi tai tileiltäsi ja lisää ne <head>-osioon

Lisää SMOC JavaScript -tiedosto (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) <head>-osioon. Se välittää UTM-parametrit automaattisesti kaikille SMOC iframelle sivun latauksen yhteydessä.

Lisäkysymyksiä tai tukea varten käy osoitteessa https://www.smoc.ai/faq tai ota yhteyttä SMOC-yhteyshenkilöösi.

Aiheeseen liittyvät oppaat

Jatka näiden aiheeseen liittyvien oppaiden parissa

Luo mainokset Studiosta

StudioIntegraatiot

Yhdistä SMOC HubSpotiin

IntegraatiotConsoleProspektointi

Yhdistä Meta-, Google-, LinkedIn- ja ChatGPT-mainokset

IntegraatiotConsoleKehittäjät

Näytä kaikki oppaat →