So erfassen Sie UTM-Werte in Shopify-Formularen (2026)

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 erfährst du, welche Anzeige, E-Mail oder Kampagne eine Kontaktformular-Anfrage generiert hat.
• Versteckte Felder werden mit dem Formular abgeschickt und tauchen in den übermittelten Daten neben der Nachricht des Kunden auf.
• Beschreibe Fudge diese Anforderung – es kann die komplette Implementierung inklusive der versteckten Felder und dem JavaScript für dich aufbauen.

Wenn jemand dein Kontaktformular ausfüllt, nachdem er auf eine Facebook-Ad geklickt hat, möchtest du das wissen. Wenn eine Großhandelsanfrage nach einer bestimmten E-Mail-Kampagne reinkommt, möchtest du diese richtig zuordnen. Die Erfassung von UTM-Parametern in Formularen schließt die Attributionslücke zwischen “Diese Person hat uns kontaktiert” und “Diese Kampagne hat zu dem Kontakt geführt.”

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, 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 (for paid search)

Wenn die URL keine UTM-Parameter enthält, gibt params.get() null zurück. Fange dies elegant ab, indem du leere Strings als Fallback nutzt.

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 deine Ad (UTMs sind in der Landingpage-URL), sieht sich ein paar Produktseiten an und ruft dann direkt die Kontaktseite auf – die keine UTMs in der URL enthält. Bis er das Formular erreicht, sind die UTM-Werte verschwunden.

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

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

    // Store UTMs on first page load if present
    utmParams.forEach(function (param) {
        var value = params.get(param)
        if (value) {
            sessionStorage.setItem(param, value)
        }
    })

    // Populate form fields from storage (fallback from 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 speichert Werte innerhalb einer Browser-Sitzung (bis der Tab geschlossen wird). localStorage speichert sitzungsübergreifend – das ist mächtiger, übernimmt aber auch UTMs von Wochen alten Besuchen, was vielleicht nicht das ist, was du willst.

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. Sende Paid-Media-Leads an dein Sales-Team und organische Leads an dein Content-Team.

CRM-Attribution. Wenn das ausgefüllte Formular in deinem CRM landet (via Zapier, HubSpot-Integration, etc.), werden die UTM-Werte direkt mitgeliefert. Du kannst Deals nach Quelle filtern und sehen, welche Kampagnen die wertvollsten Kunden generieren.

ROI-Reporting. Wenn du weißt, dass ein Großhandelskunde über eine bestimmte LinkedIn-Kampagne kam, kannst du seinen Lifetime Value (Customer Lifetime Value) genau dieser Kampagne zuordnen – das ist viel genauer als Last-Click-Analytics.

FAQ

Verwandt: Conversions in Shopify tracken.