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

À retenir

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

Quand quelqu’un remplit votre formulaire de contact après avoir cliqué sur une pub Facebook, vous voulez le savoir. Quand une demande de vente en gros arrive à la suite d’une campagne e-mail spécifique, vous souhaitez l’attribuer correctement. La capture des paramètres UTM dans les formulaires permet de combler le vide d’attribution entre « cette personne nous a contactés » et « cette campagne a généré ce contact » .

Comment utiliser les UTM sur Shopify

Les paramètres UTM sont ajoutés aux URLs dans vos liens marketing :

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

Quand quelqu’un arrive sur cette URL, les valeurs UTM sont présentes dans la barre d’adresse du navigateur. JavaScript peut les lire et les stocker pour qu’elles accompagnent la soumission du formulaire.

Sur le même sujet : Ajouter du JavaScript personnalisé sur 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 HTML de votre formulaire.

Dans le formulaire de contact de votre thème (généralement dans sections/contact-form.liquid ou la template de la page contact), ajoutez des champs input cachés (hidden) à 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="" />

Pour les formulaires sur mesure ou les apps : utilisez le format name="properties[UTM Source]" pour les propriétés de ligne (line item properties), ou 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 email — les valeurs UTM devraient apparaître dans la soumission.

Sur le même sujet : Ajouter un formulaire de contact personnalisé sur 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 tracking UTM natif :

Typeform : Dans les réglages du formulaire (Settings), allez dans Hidden Fields → ajoutez les paramètres UTM. Typeform les lit automatiquement dans l’URL et les joint aux soumissions.

Jotform : Pré-remplissez les champs à partir des paramètres d’URL — ajoutez un champ, allez dans Properties → Prefill → From URL Parameter.

Ces options intégrées sont plus simples que de faire du JavaScript sur mesure, et valent le coup si vous utilisez déjà ces outils.

Pour mesurer les résultats, découvrez comment ajouter des scripts de tracking sur Shopify.

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

Routage des emails. Envoyez les leads issus de l’acquisition payante (paid media) à votre équipe commerciale, et les leads organiques à votre équipe de contenu.

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

Reporting sur le ROI. Si vous savez qu’un client B2B (wholesale) vient d’une campagne LinkedIn spécifique, vous pouvez attribuer sa lifetime value (valeur à vie) à cette campagne — ce qui est bien plus précis que l’analytique last-click.

FAQ

Article connexe : Suivre les conversions dans Shopify.