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 d’emails. Envoyez les leads issus des médias payants à votre équipe commerciale, et les leads organiques à votre équipe contenu.

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

Reporting ROI. Si vous savez qu’un client wholesale provient d’une campagne LinkedIn spécifique, vous pouvez attribuer sa lifetime value globale à cette campagne — ce qui est bien plus précis qu’une simple analyse en “last-click”.