So erfasst du UTM-Werte in Shopify-Formularen (2026)

Das Wichtigste in Kürze

• UTM-Parameter in einer URL (utm_source, utm_medium, utm_campaign) können mit der JavaScript-Funktion URLSearchParams ausgelesen und in versteckten Formularfeldern (Hidden Fields) gespeichert werden.
• So erfährst du, welche Anzeige, E-Mail oder Kampagne jede Kontaktformular-Einsendung generiert hat.
• Versteckte Felder werden mit dem Formular abgeschickt und erscheinen in den Einsendedaten zusammen mit der Nachricht des Kunden.
• Beschreibe diese Anforderung an Fudge – es kann die komplette Implementierung inklusive versteckter Felder und JavaScript für dich bauen.

Um UTM-Werte in einem Shopify-Formular zu erfassen, fügst du dem Formular versteckte Eingabefelder (Hidden Inputs) wie contact[utm_source] hinzu und führst dann ein kurzes Skript aus, das die URL mit URLSearchParams ausliest und die Felder ausfüllt. Die Werte werden bei der Einsendung übermittelt, sodass du sehen kannst, welche Anzeige oder E-Mail die jeweilige Anfrage hervorgebracht hat.

Wie UTM-Parameter in ein Shopify-Formular gelangen

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

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

Wenn jemand auf dieser URL landet, sind die UTM-Werte in der URL-Leiste des Browsers vorhanden. JavaScript kann sie auslesen und speichern, damit sie bei der Formularübermittlung mitgesendet werden.

Um solche Skripte zu deinem Theme hinzuzufügen, sieh dir an, wie man benutzerdefiniertes JavaScript in Shopify hinzufügt.

So liest du UTM-Parameter mit JavaScript aus einer URL aus

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 (für Paid Search)

Wenn kein UTM-Parameter in der URL vorhanden ist, gibt params.get() null zurück. Gehe damit elegant um, indem du leere Strings als Fallback verwendest.

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

Schritt 1 - Füge versteckte Felder zu deinem Formular-HTML hinzu.

Füge in deinem Kontaktformular im Theme (meist in sections/contact-form.liquid oder dem Kontaktseiten-Template) versteckte Input-Felder (Hidden Fields) 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="" />

Verwende auf einem Produktformular name="properties[UTM Source]", um es als Line Item Property zu speichern. Für benutzerdefinierte Formulare oder Apps verwendest du die Namenskonvention, die dein Formular-System erwartet.

Schritt 2 - Lies UTM-Werte aus und fülle die Felder mit JavaScript.

Füge dieses Skript nach deinem Formular (oder in der 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. Öffne deine Kontaktseite mit UTM-Parametern in der URL: https://yourstore.com/pages/contact?utm_source=test&utm_campaign=test_campaign

Sende das Formular ab und überprüfe die E-Mail-Benachrichtigung – die UTM-Werte sollten in der Übermittlung erscheinen.

Wie du das Formular selbst baust, erfährst du unter wie man ein benutzerdefiniertes Kontaktformular in Shopify hinzufügt.

UTMs über mehrere Seiten hinweg speichern

Ein häufiges Problem: Ein Besucher klickt auf deine Ad (die UTMs stehen in der URL der Landingpage), sieht sich ein paar Produktseiten an und ruft dann direkt die Kontaktseite auf – die keine UTMs in der URL hat. Wenn er das Formular erreicht, sind die UTM-Werte weg.

Die 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 für die Dauer einer Browser-Sitzung (bis der Tab geschlossen wird). localStorage speichert sie sitzungsübergreifend – das ist mächtiger, erfasst aber auch UTMs von Wochen alten Besuchen, was vielleicht nicht in deinem Sinne ist.

UTM-Erfassung mit Formular-Apps

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

Typeform: Gehe in den Formulareinstellungen auf “Hidden Fields” → füge UTM-Parameter hinzu. Typeform liest diese automatisch aus der URL aus und hängt sie an die Einsendungen an.

Jotform: Felder aus URL-Parametern vorausfüllen — füge ein Feld hinzu, gehe zu “Properties” (Eigenschaften) → “Prefill” → “From URL Parameter”.

Diese integrierten Optionen sind einfacher als eigenes JavaScript und lohnen sich, wenn du diese Tools sowieso schon nutzt.

Um Ergebnisse zu messen, siehe wie man Tracking-Skripte zu Shopify hinzufügt.

Was du mit UTM-Daten in Formulareinsendungen tun kannst

E-Mail-Routing. Sende Paid-Media-Leads an dein Sales-Team, organische Leads an dein Content-Team.

CRM-Attribution. Wenn die Formular-Einsendung in dein CRM gelangt (über Zapier, HubSpot-Integration usw.), reisen die UTM-Werte mit. 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 dieser Kampagne zuordnen – das ist weitaus genauer als eine reine Last-Click-Analyse.

Um zu sehen, welche Kampagnen zu Bestellungen führen, sieh dir an, wie man Conversions in Shopify trackt.

FAQ