Capturer les paramètres UTM dans des formulaires Shopify (2026)

Points clés à retenir

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 email ou quelle campagne a généré chaque soumission de formulaire de contact.

Les champs cachés sont envoyés avec le formulaire et s’affichent dans les données de soumission avec le message du client.

Décrivez ce besoin à Fudge — l’outil peut créer 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 avez envie de le savoir. Quand une demande de vente en gros arrive suite à une campagne d’emailing spécifique, vous voulez pouvoir l’attribuer correctement. Capturer les paramètres UTM dans les formulaires permet de faire le lien manquant entre “cette personne nous a contacté” 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.

Créez un formulaire Shopify avec un tracking UTM en le décrivant simplement à Fudge.

Try Fudge for Free

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

Quelle est la différence entre le tracking UTM et l’attribution native de Shopify ?

L’attribution native de Shopify montre d’où viennent les commandes à un niveau macro (Boutique en ligne, Direct, Recherche). Le tracking UTM vous donne un niveau de détail spécifique par campagne (quelle pub Facebook, quel email, quel influenceur) et fonctionne pour des événements hors commande, comme les soumissions de formulaires. Utilisez les deux - ils sont complémentaires.

Les paramètres UTM vont-ils affecter mon SEO Shopify ?

Non. Les moteurs de recherche considèrent les URL avec des paramètres UTM comme étant la même page que l’URL canonique (les balises canoniques de Shopify gèrent ça automatiquement). Les UTM sont des paramètres de query string qui n’affectent pas le classement et ne créent pas de duplicate content (contenu dupliqué) tant que les balises canoniques sont en place.

Puis-je capturer automatiquement les UTM depuis les liens d’un email ?

Oui - si votre plateforme d’emailing le permet (Klaviyo, Mailchimp, Omnisend le font toutes). Configurez la plateforme pour ajouter automatiquement les paramètres UTM à tous les liens sortants de vos emails. Les valeurs UTM redescendent ensuite dans la capture de vos formulaires exactement comme pour n’importe quelle autre source.

Combien de temps les valeurs UTM doivent-elles persister pour un visiteur ?

Pour l’attribution de formulaires remplis, le sessionStorage (jusqu’à la fermeture de l’onglet) est généralement le bon choix. Pour une attribution sur le long terme où quelqu’un pourrait revenir des semaines plus tard pour convertir, privilégiez le localStorage avec une expiration de 30 à 90 jours. Au-delà de 90 jours, le signal UTM s’apparente généralement plus à du bruit qu’à de l’attribution exploitable.

Dois-je stocker les UTM dans les notes clients lors de leur inscription ?

Oui, si c’est utile pour votre suivi commercial. Ajoutez le même modèle de capture d’UTM à votre formulaire de création de compte, et stockez les valeurs en tant que champs méta (metafields) ou notes client. Décrivez la configuration à Fudge (“sur chaque formulaire, capturer la source/medium/campagne des UTM depuis l’URL et les sauvegarder comme propriétés de la ligne de commande ou du client”) et il ajoutera les champs cachés ainsi que le JavaScript sur l’ensemble de vos formulaires.