Comment capturer les valeurs UTM dans les formulaires Shopify (2026)

Points clés

• Les paramètres UTM dans une URL (utm_source, utm_medium, utm_campaign) peuvent être lus avec URLSearchParams en JavaScript et sauvegardés dans des champs de formulaire cachés.
• Cela vous permet de savoir quelle publicité, quel e-mail ou quelle campagne a généré chaque soumission du formulaire de contact.
• Les champs cachés sont soumis avec le formulaire et apparaissent dans les données de soumission avec le message du client.
• Décrivez ce besoin à Fudge — il peut construire l’implémentation complète, y compris les champs cachés et le JavaScript.

Pour capturer les valeurs UTM dans un formulaire Shopify, ajoutez des champs cachés comme contact[utm_source] au formulaire, puis exécutez un petit script qui lit l’URL avec URLSearchParams et les remplit. Les valeurs arrivent avec la soumission, ce qui vous permet de voir quelle annonce ou quel e-mail a produit chaque demande.

Comment les paramètres UTM atteignent un formulaire Shopify

Les paramètres UTM sont ajoutés aux URL de vos liens marketing :

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

Quand quelqu’un atterrit sur cette URL, les valeurs UTM existent dans la barre d’adresse du navigateur. JavaScript peut les lire et les stocker pour qu’elles voyagent avec la soumission du formulaire.

Pour ajouter des scripts comme celui-ci à votre thème, consultez comment ajouter du JavaScript personnalisé dans Shopify.

Comment récupérer les paramètres UTM d’une URL avec JavaScript

La façon moderne et propre de lire les paramètres d’URL est d’utiliser 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') // facultatif
var utmTerm = params.get('utm_term') // facultatif (pour le référencement payant)

S’il n’y a pas de paramètre UTM dans l’URL, params.get() renvoie null. Gérez cela proprement en utilisant des chaînes de caractères vides comme valeurs de repli.

Ajouter des champs UTM cachés à un formulaire Shopify

Étape 1 - Ajoutez des champs cachés au code HTML de votre formulaire.

Dans le formulaire de contact de votre thème (généralement dans sections/contact-form.liquid ou le modèle de la page de contact), ajoutez des champs de saisie cachés à l’intérieur du formulaire :

<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="" />

Sur un formulaire de produit, utilisez name="properties[UTM Source]" pour l’enregistrer comme propriété d’article (line item property). Pour les formulaires personnalisés ou les applications, utilisez la convention de nommage attendue par votre système de formulaire.

Étape 2 - Lisez les valeurs UTM et remplissez les champs avec JavaScript.

Ajoutez ce script après votre formulaire (ou dans theme.liquid avant </body>) :

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

Étape 3 - Testez. Ouvrez votre page de contact avec des paramètres UTM dans l’URL : https://yourstore.com/pages/contact?utm_source=test&utm_campaign=test_campaign

Soumettez le formulaire et vérifiez la notification par e-mail — les valeurs UTM devraient apparaître dans la soumission.

Pour construire le formulaire lui-même, consultez comment ajouter un formulaire de contact personnalisé dans Shopify.

Conserver les UTM sur plusieurs pages

Un problème courant : un visiteur clique sur votre publicité (les UTM sont dans l’URL de la landing page), parcourt quelques pages de produits, puis visite directement la page de contact — qui n’a pas d’UTM dans l’URL. Au moment où il atteint le formulaire, les valeurs UTM ont disparu.

Solution : stockez les UTM dans sessionStorage (ou localStorage) lors de la première visite.

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

    // Enregistrer les UTM lors du premier chargement de la page s'ils sont présents
    utmParams.forEach(function (param) {
        var value = params.get(param)
        if (value) {
            sessionStorage.setItem(param, value)
        }
    })

    // Remplir les champs du formulaire à partir du stockage (avec l'URL en solution de repli)
    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 conserve les valeurs pendant une session de navigateur (jusqu’à la fermeture de l’onglet). localStorage les conserve d’une session à l’autre — c’est plus puissant, mais cela récupère aussi les UTM de visites datant de plusieurs semaines, ce qui n’est peut-être pas ce que vous souhaitez.

Capturer les UTM avec des apps de formulaires

La plupart des outils dédiés aux formulaires (Typeform, JotForm, Hulk Form Builder) intègrent un suivi UTM natif :

Typeform : Dans les paramètres du formulaire, allez dans Hidden Fields → ajoutez les paramètres UTM. Typeform les lit automatiquement depuis l’URL et les joint aux soumissions.

Jotform : Préremplir les champs à partir des paramètres de l’URL — ajoutez un champ, allez dans Propriétés → Prefill → From URL Parameter.

Ces options intégrées sont plus simples que le JavaScript personnalisé et valent la peine d’être utilisées si vous vous servez déjà de ces outils.

Pour mesurer les résultats, consultez comment ajouter des scripts de suivi à Shopify.

Que faire des données UTM dans les soumissions de formulaire

Routage des e-mails. Envoyez les leads provenant de publicités payantes à votre équipe commerciale, et les leads organiques à votre équipe contenu.

Attribution CRM. Lorsque la soumission du formulaire entre dans votre CRM (via Zapier, l’intégration HubSpot, etc.), les valeurs UTM l’accompagnent. Vous pouvez filtrer les transactions par source et voir quelles campagnes génèrent les clients à plus forte valeur.

Rapports de ROI. Si vous savez qu’un client grossiste vient d’une campagne LinkedIn spécifique, vous pouvez attribuer sa valeur à vie (lifetime value) à cette campagne — ce qui est bien plus précis que l’analyse au dernier clic.

Pour voir quelles campagnes mènent à des commandes, consultez comment suivre les conversions dans Shopify.

FAQ