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 méthode moderne et propre pour lire les paramètres d’une 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');   // optionnel
var utmTerm = params.get('utm_term');         // optionnel (pour le search payant)

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

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 pub (les UTM sont sur l’URL de votre landing page), navigue sur quelques pages produits, puis visite directement la page de contact — qui n’a plus d’UTM dans son URL. Au moment où il arrive sur le formulaire, les valeurs UTM ont disparu.

La solution : stocker les UTM dans le sessionStorage (ou localStorage) dès la première visite.

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

  // Stocker les UTM au premier chargement si présents
  utmParams.forEach(function(param) {
    var value = params.get(param);
    if (value) {
      sessionStorage.setItem(param, value);
    }
  });

  // Remplir les champs du formulaire depuis le storage (fallback après l'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');
})();

Le sessionStorage conserve les valeurs pendant la session de navigation (jusqu’à ce que l’onglet soit fermé). Le localStorage les conserve d’une session à l’autre — c’est plus puissant, mais ça récupère aussi des UTM issus de visites datant de plusieurs semaines, ce qui n’est pas forcément ce que vous voulez.

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

À lire aussi : Suivre les conversions sur Shopify.