UTM-Parameter in Webflow Formulare übertragen

Um zu verfolgen, wie gut Deine Marketingkampagnen funktionieren, sind UTM-Parameter praktisch. Sie zeigen genau an, woher ein Besucher kommt und welche Kampagne sie oder er angeklickt hat. Das ist besonders hilfreich für Marketingteams und den Vertrieb, zum Beispiel wenn ein Lead über ein Kontaktformular kommt. In Webflow kannst Du die UTM-Parameter direkt aus der URL in Deine Formulare übertragen – in wenigen Schritten!

Hier gehts direkt zum Webflow Clonable: UTM Parameter in Webflow Formulare*

Step 1: UTM-Parameter

UTM-Parameter sind spezielle Codes, die an URLs angehängt werden, um zu verfolgen, woher Besucher kommen und welche Marketingaktion sie veranlasst haben. Sie sind besonders hilfreich, um den Erfolg von Kampagnen genau zu messen und zu optimieren.

Zum Beispiel wie hier:

https://utm-parameter-formulare.webflow.io/?utm_source=google&utm_medium=cpc&utm_campaign=webflowexpert

Füge die passenden UTM-Parameter zu Deiner URL hinzu, sodass wir diese dann auch später übertragen können.

Step 2: Code einfügen

Füge folgenden Code vor dem </body>-Tag Deiner Seite ein. Ändere bei Bedarf die Namen der utmParameters ab. Dieses Skript liest UTM-Parameter aus der aktuellen URL aus und fügt sie automatisch in unsere Formularfelder auf der Webseite ein, welche wir im nächsten Schritt erstellen werden.

<script>
  var queryString = window.location.search;
  console.log(queryString);
  // ?utm_source=google&utm_medium=cpc&utm_campaign=webflowexpert
  var URLSearchParams_wb = new URLSearchParams(queryString);

  const utmParameters = [
    "utm_source", 
    "utm_medium", 
    "utm_campaign"
  ];

  for (const utm_element of utmParameters) {
    // wenn utm_source existiert
    $("form").each(function(index) {
      if (URLSearchParams_wb.has(utm_element)) {
        console.log(utm_element + " existiert");
        // hole den UTM-Wert dieses utm-Parameters
        var value = URLSearchParams_wb.get(utm_element);
        // ändere das versteckte Formularfeld zu diesem UTM-Wert
        $(this).find("." + utm_element).val(value);
      }
    });
  } // Ende der for-Schleife
</script>

Step 3: Verstecke Formularfelder einfügen

Füge ganz oben in Dein Webflow Formular ein ‘Embed’-Element ein. Kopiere hier dann folgendes HTML hinein.

Achtung: Im Clonable musst Du die Formulare durch type=”hidden” noch verstecken, ändere dazu bei type="text" den zweiten Teil zu "hidden".

<input type="hidden" class="utm_source" placeholder="utm_source" name="utm_source">
<input type="hidden" class="utm_medium" placeholder="utm_medium" name="utm_medium">
<input type="hidden" class="utm_campaign" placeholder="utm_campaign" name="utm_campaign">

Step 4: Testing

Jetzt kannst Du das Formular abschicken und überprüfen, ob alles korrekt funktioniert.

Info:

Springt der Nutzer auf eine andere Seite und anschließend wieder zurück, werden die Parameter nicht übergeben.

FAQ

Was sind UTM-Parameter?

UTM-Parameter (Urchin Tracking Module) sind spezielle Codes, die an URLs angehängt werden, um den Verkehr auf einer Website zu verfolgen und zu analysieren. Sie ermöglichen es Website-Betreibern, Informationen darüber zu sammeln, wie Besucher auf ihre Seite gelangt sind. Diese Parameter enthalten Daten wie Quelle, Medium, Kampagne und andere relevante Informationen, die helfen können, die Effektivität von Marketingkampagnen zu messen. UTM-Parameter sind besonders nützlich für die Analyse von Verweisen aus verschiedenen Quellen wie sozialen Medien, E-Mail-Kampagnen oder Werbeanzeigen.

Wieso sollte ich die UTM-Parameter an mein Webflow Formular übergeben?

Das Übergeben von UTM-Parametern an Dein Webflow-Formular ermöglicht es Dir, wichtige Informationen über die Herkunft Deiner Besucher und potenziellen Kunden zu sammeln. Wenn ein Besucher Deine Website über einen bestimmten Link mit UTM-Parametern erreicht, werden diese Parameter normalerweise in der URL gespeichert. Wenn dieser Besucher dann ein Formular auf Deiner Website ausfüllt, können diese UTM-Parameter zusammen mit den Formulardaten gesendet und von Deinen Mitarbeitern eingesehen werden oder direkt in Deinem CRM (Customer Relationship Management) gespeichert werden.

Dadurch erhältst Du detaillierte Einblicke darüber, welche Marketingkanäle und Kampagnen die meisten Besucher anziehen und welche zu Conversions führen. Diese Daten sind besonders wertvoll für die Analyse der Effektivität Deiner Marketingbemühungen und helfen Dir, Deine Ressourcen gezielter einzusetzen, um den ROI zu verbessern.

‍

Jetzt mit Webflow starten*