Key Takeaways

UTM-Parameter in einer URL (utm_source, utm_medium, utm_campaign) können mit JavaScripts URLSearchParams ausgelesen und in versteckten Formularfeldern gespeichert werden.

So erfahren Sie, welche Annonce, E-Mail oder Kampagne jede Kontaktformular-Einsendung generiert hat.

Versteckte Felder werden mit dem Formular übermittelt und erscheinen in den Einsendedaten neben der Nachricht des Kunden.

Beschreiben Sie diese Anforderung einfach Fudge — es kann die komplette Implementierung inklusive versteckter Felder und JavaScript erstellen.

Wenn jemand Ihr Kontaktformular ausfüllt, nachdem er auf eine Facebook-Ad geklickt hat, möchten Sie das wissen. Wenn eine Großhandelsanfrage nach einer bestimmten E-Mail-Kampagne eingeht, möchten Sie diese korrekt zuordnen. Das Erfassen von UTM-Parametern in Formularen schließt die Attributionslücke zwischen „Diese Person hat uns kontaktiert“ und „Diese Kampagne hat diesen Kontakt ausgelöst“.

So nutzen Sie UTM auf Shopify

UTM-Parameter werden an die URLs in Ihren Marketing-Links angehängt:

https://yourstore.com/pages/contact?utm_source=facebook&utm_medium=paid&utm_campaign=summer_sale

Wenn jemand auf diese URL gelangt, befinden sich die UTM-Werte in der Adressleiste des Browsers. JavaScript kann diese auslesen und speichern, sodass sie mit dem Absenden des Formulars übertragen werden.

Passend dazu: Custom JavaScript in Shopify hinzufügen.

So erhalten Sie UTM-Parameter aus einer URL mit JavaScript

Der moderne, saubere Weg, um URL-Parameter auszulesen, ist URLSearchParams:

var params = new URLSearchParams(window.location.search);
var utmSource = params.get('utm_source');    // "facebook"
var utmMedium = params.get('utm_medium');    // "paid"
var utmCampaign = params.get('utm_campaign'); // "summer_sale"
var utmContent = params.get('utm_content');   // optional
var utmTerm = params.get('utm_term');         // optional (für Paid Search)

Wenn kein UTM-Parameter in der URL vorhanden ist, gibt params.get() den Wert null zurück. Behandeln Sie dies elegant durch Fallbacks auf leere Strings.

Versteckte UTM-Felder zu einem Shopify-Formular hinzufügen

Schritt 1 – Versteckte Felder zum Formular-HTML hinzufügen.

Fügen Sie im Kontaktformular Ihres Themes (normalerweise in sections/contact-form.liquid oder dem Kontaktseiten-Template) versteckte Input-Felder innerhalb des Formulars hinzu:

<input type="hidden" id="utm-source" name="contact[utm_source]" value="" />
<input type="hidden" id="utm-medium" name="contact[utm_medium]" value="" />
<input type="hidden" id="utm-campaign" name="contact[utm_campaign]" value="" />
<input type="hidden" id="utm-content" name="contact[utm_content]" value="" />

Für eigene Formulare oder Apps: Verwenden Sie das Format name="properties[UTM Source]" für Line Item Properties oder die Namenskonvention, die Ihr Formular-System erwartet.

Schritt 2 – UTM-Werte auslesen und Felder mit JavaScript befüllen.

Fügen Sie dieses Skript nach Ihrem Formular (oder in Ihrer theme.liquid vor </body>) ein:

<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var utmFields = {
    'utm_source': 'utm-source',
    'utm_medium': 'utm-medium',
    'utm_campaign': 'utm-campaign',
    'utm_content': 'utm-content'
  };

  Object.keys(utmFields).forEach(function(param) {
    var value = params.get(param);
    var field = document.getElementById(utmFields[param]);
    if (value && field) {
      field.value = value;
    }
  });
})();
</script>

Schritt 3 – Testen. Öffnen Sie Ihre Kontaktseite mit UTM-Parametern in der URL: https://yourstore.com/pages/contact?utm_source=test&utm_campaign=test_campaign

Schicken Sie das Formular ab und prüfen Sie die E-Mail-Benachrichtigung — die UTM-Werte sollten in der Übermittlung erscheinen.

Passend dazu: Eigenes Kontaktformular in Shopify hinzufügen.

UTMs über mehrere Seiten hinweg beibehalten

Ein häufiges Problem: Ein Besucher klickt auf Ihre Anzeige (UTMs sind in der URL der Landingpage), durchstöbert ein paar Produktseiten und besucht dann direkt die Kontaktseite — die keine UTMs in der URL hat. Bis er das Formular erreicht, sind die UTM-Werte verloren.

Lösung: UTMs beim ersten Besuch im sessionStorage (oder localStorage) speichern.

(function() {
  var params = new URLSearchParams(window.location.search);
  var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];

  // UTMs beim ersten Seitenladen speichern, falls vorhanden
  utmParams.forEach(function(param) {
    var value = params.get(param);
    if (value) {
      sessionStorage.setItem(param, value);
    }
  });

  // Formularfelder aus dem Speicher befüllen (Fallback von URL)
  function populateField(paramName, fieldId) {
    var value = params.get(paramName) || sessionStorage.getItem(paramName) || '';
    var field = document.getElementById(fieldId);
    if (field) field.value = value;
  }

  populateField('utm_source', 'utm-source');
  populateField('utm_medium', 'utm-medium');
  populateField('utm_campaign', 'utm-campaign');
  populateField('utm_content', 'utm-content');
})();

sessionStorage behält Werte innerhalb einer Browser-Sitzung bei (bis der Tab geschlossen wird). localStorage bleibt über Sitzungen hinweg bestehen — leistungsstärker, erfasst aber auch UTMs von Wochen alten Besuchen, was vielleicht nicht gewollt ist.

Erstellen Sie ein Shopify-Formular mit UTM-Tracking, indem Sie es Fudge beschreiben.

Try Fudge for Free

Zum Messen der Ergebnisse siehe Add Tracking Scripts to Shopify.

UTM-Erfassung mit Formular-Apps

Die meisten spezialisierten Formular-Tools (Typeform, JotForm, Hulk Form Builder) haben integriertes UTM-Tracking:

Typeform: Gehen Sie in den Formular-Einstellungen zu Hidden Fields → UTM-Parameter hinzufügen. Typeform liest diese automatisch aus der URL und hängt sie an die Submissions an.

Jotform: Felder über URL-Parameter vorbefüllen — fügen Sie ein Feld hinzu, gehen Sie zu Properties → Prefill → From URL Parameter.

Diese integrierten Optionen sind einfacher als eigenes JavaScript und lohnen sich, wenn Sie diese Tools bereits nutzen.

Um Ergebnisse zu messen, siehe Tracking-Skripte zu Shopify hinzufügen.

Was man mit UTM-Daten in Formulareinsendungen macht

E-Mail-Routing. Senden Sie Leads aus Paid Media an Ihr Sales-Team und organische Leads an Ihr Content-Team.

CRM-Attribution. Wenn das Formular in Ihr CRM übertragen wird (via Zapier, HubSpot-Integration etc.), reisen die UTM-Werte mit. Sie können Deals nach Quelle filtern und sehen, welche Kampagnen die wertvollsten Kunden generieren.

ROI-Reporting. Wenn Sie wissen, dass ein Großhandelskunde über eine bestimmte LinkedIn-Kampagne kam, können Sie dessen Lifetime Value dieser Kampagne zuordnen – viel genauer als Last-Click-Analytics.