SMOC Flow mit iFrame und Tracking einrichten

Diese Anleitung zeigt Ihnen, wie Sie einen SMOC Konversationsablauf per iFrame auf Ihrer Website einbinden, inklusive korrektem Tracking-Pixel-Setup und UTM-Parameter-Handling.

Übersicht

Um einen SMOC Ablauf auf Ihrer Website zu integrieren, müssen Sie drei Hauptkomponenten implementieren:

iFrame-Code - Betten Sie den Konversationsablauf auf Ihrer Seite ein

Tracking-Pixel - Meta (Facebook)- und Google-Tracking-Codes

Header-Skript - Übergibt UTM-Parameter von Ihrer Seite an das iFrame. Kartenabläufe betten `/cards?iframe_mode=true` ein, sodass das iFrame nur die Karte anzeigt; die gehostete `/cards`-Seite behält jeglichen Text und das Design darüber, daneben oder darunter bei.

Für allgemeine Hinweise und häufig gestellte Fragen besuchen Sie: https://www.smoc.ai/faq

1. iFrame-Implementierung

Der iFrame-Code bettet Ihren SMOC-Ablauf direkt auf Ihrer Webseite ein. Sie haben je nach Bedarf zwei Einrichtungsoptionen.

Feste Dimensions-Einrichtung

Verwenden Sie diesen Ansatz, wenn Sie bestimmte Pixelmaße wünschen. Das iFrame behält diese exakten Maße bei:

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

Dynamische Dimensions-Einrichtung

Verwenden Sie diesen Ansatz, wenn das iFrame seinen übergeordneten Container ausfüllen soll. Platzieren Sie dieses iFrame in einem übergeordneten <div> mit den entsprechenden Abmessungen:

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

Wichtige Platzierungsüberlegungen

Wenn Sie das iFrame auf Ihrer Seite platzieren, stellen Sie sicher, dass:

• Auf mobilen Geräten müssen Kunden nicht scrollen, um den Ablauf zu sehen
• Das iFrame ist prominent platziert und sofort sichtbar
• Sie passen Höhe und Breite entweder direkt im Code an oder machen es mit der dynamischen Einrichtung responsiv

2. Einrichtung von Tracking-Pixeln

Tracking-Pixel von Meta (Facebook) und Google erhalten Sie von Ihrer Marketingagentur oder direkt aus Ihrem Meta Business Manager und Ihren Google Ads-Konten. Diese Codes sollten im <head>-Bereich Ihrer Webseite platziert werden.

Meta Pixel-Code

Das Meta-Pixel verfolgt Nutzerinteraktionen für Facebook-Werbung. Ersetzen Sie die Pixel-ID durch Ihre eigene:

<!-- Meta Pixel-Code -->
<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>
<!-- Ende Meta Pixel-Code -->

Google Pixel-Code

Das Google-Pixel verfolgt Conversions für Google Ads. Ersetzen Sie die Tracking-ID durch Ihre eigene:

html

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

Hinweis: Ersetzen Sie YOUR_META_PIXEL_ID und AW-XXXXXXXXXX durch Ihre tatsächlichen Tracking-IDs aus Ihrem Meta Business Manager und Ihren Google Ads-Konten oder erhalten Sie diese von Ihrer Marketingagentur.

3. UTM-Parameter-Übertragung über smoc.js

Um die Integration zu vereinfachen und eine konsistente Nachverfolgung zu gewährleisten, stellt SMOC jetzt ein standardisiertes JavaScript-Hilfsskript bereit.

So funktioniert es

• Beim Laden der Seite findet das Skript alle <iframe>-Elemente, deren src mit https://go.smoc.ai oder https://go2.smoc.ai beginnt.
• Es fügt alle fehlenden UTM-Parameter (utm_source, utm_medium, utm_campaign, utm_term, utm_content) aus der aktuellen Seiten-URL zur iframe-src hinzu.
• Wenn das iframe bereits UTM-Parameter enthält, bleiben diese erhalten.

So verwenden Sie es:

Fügen Sie das folgende Skript einmal im <head>-Bereich Ihrer Seite ein:

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

Stellen Sie sicher, dass Ihr iframe eine src verwendet, die auf https://go.smoc.ai oder https://go2.smoc.ai zeigt. Besuchen Sie die Seite mit UTM-Parametern in der URL. Die iframe-src wird sie automatisch übernehmen.

Einschränkungen

• Das Skript wird nur einmal bei DOMContentLoaded ausgeführt. Wenn Ihre Seite SMOC-Iframes dynamisch nach dem Laden der Seite, wenden Sie sich an den SMOC-Support, um eine dynamische Variante zu aktivieren.
• Stellen Sie sicher, dass Ihre CSP (Content Security Policy) das Laden und Einbetten von go.smoc.ai oder go2.smoc.ai erlaubt.

4. Leiten Sie UTM-Parameter an ausgehende Link-Nachrichten weiter

smoc.js bringt Kampagnenparameter in den Ablauf. Um diese Parameter an einen Shop- oder Partner-URL weiterzugeben, öffnen Sie die Link-Nachricht (oder Open Graph-Link) in Studio und aktivieren Sie UTM- & Klick-IDs weiterleiten. Das Ziel erhält dann eingehende utm_*-Schlüssel sowie Anzeigenklick-IDs (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Bereits vorhandene Parameter auf der Ziel-URL bleiben erhalten. Der Schalter ist standardmäßig deaktiviert.

Details: Web-Flows einbetten und UTMs übergeben.

Vollständiges Implementierungsbeispiel

So arbeiten alle Komponenten zusammen in den <head>- und <body>-Abschnitten:

<!DOCTYPE html>
<html>
<head>

  <!-- Meta Pixel-Code -->
  <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>
  <!-- Ende Meta Pixel-Code -->
  
  <!-- Google Pixel-Code -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- Ende Google Pixel-Code -->
  
  <!-- UTM-Parameter-Handler -->
  <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>
  <!-- Dein Seiteninhalt -->
  
  <!-- SMOC-Ablauf 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>
  
  <!-- Mehr Seiteninhalt -->
</body>
</html>

Zusammenfassung

So integrieren Sie SMOC auf Ihrer Website:

Fügen Sie den iFrame-Code hinzu an der Stelle, an der der Ablauf erscheinen soll (feste oder dynamische Größe)

Tracking-Pixel besorgen von Ihrer Marketingagentur oder Ihren Konten und fügen Sie sie in den <head>-Bereich ein

Fügen Sie die SMOC JavaScript-Datei hinzu (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) in den <head>-Bereich. Die UTM-Parameter werden beim Laden der Seite automatisch an alle SMOC iframes weitergegeben.

Für weitere Fragen oder Support besuchen Sie https://www.smoc.ai/faq oder kontaktieren Sie Ihren SMOC-Ansprechpartner.

Ähnliche Leitfäden

Lernen Sie mit diesen verwandten Leitfäden weiter

Anzeigen aus Studio erzeugen

StudioIntegrationen

SMOC mit HubSpot verbinden

IntegrationenConsoleAkquise

Meta, Google, LinkedIn und ChatGPT Ads verbinden

IntegrationenConsoleEntwickler

Alle Leitfäden anzeigen →