Paramètres URL

Persistance automatique des paramètres d'URL (UTMs, etc.) entre les pages et pré-remplissage des champs de formulaire.

Persistance entre les pages

Le script core/js/params.js détecte automatiquement les paramètres d'URL et les ajoute à tous les liens internes du site. Ainsi, si un visiteur arrive depuis :

https://monsite.fr/?utm_source=google&utm_medium=cpc&utm_campaign=promo

Tous les liens internes du site deviendront :

<a href="blog?utm_source=google&utm_medium=cpc&utm_campaign=promo">

Liens pris en charge

  • Chemins relatifs : blog, ./contact, ../index
  • Chemins absolus : /contact
  • Liens avec même domaine

Liens ignorés

  • Ancres : #section
  • Liens externes (domaine différent)
  • Liens mailto:, tel:, javascript:

UTMs automatiques

Les UTMs sont automatiquement collectés et envoyés avec chaque soumission de formulaire :

ParamètreDescription
utm_sourceSource du trafic (google, facebook, newsletter...)
utm_mediumSupport (cpc, email, social...)
utm_campaignNom de la campagne
utm_termMot-clé (SEA)
utm_contentVariante de l'annonce (A/B test)

Pré-remplissage des champs

Les paramètres d'URL dont le nom correspond à l'attribut name d'un champ de formulaire le pré-remplissent automatiquement :

https://monsite.fr/contact?nom=Manon&email=manon@ex.fr&type_client=entreprise
  • ?nom=Manon → <input name="nom"> aura la valeur « Manon »
  • ?type_client=entreprise → le radio « Entreprise » sera sélectionné

Types de champs supportés

  • Inputs texte/email/tel : valeur directe
  • Checkboxes/Radios : cochés si la valeur correspond
  • Selects natifs : option sélectionnée
  • Custom Select (data-name) : option simulée (clic sur l'option correspondante)
  • Custom Radio/Checkbox Group (data-name) : option simulée
  • Custom Multiselect (data-name avec la classe form__multiselect) : les valeurs séparées par des virgules sont splitées et chaque option est sélectionnée individuellement (ex : ?competences=design,seo,dev)
https://monsite.fr/contact?competences=design,seo,dev

Résultat : les options « Design », « SEO » et « Dev » sont toutes sélectionnées dans le multiselect.

API JavaScript

Trois fonctions globales sont exposées sur window et utilisables depuis n'importe quel script :

// Récupérer tous les paramètres d'URL
var params = window.getUrlParams();
// { nom: 'Manon', utm_source: 'google', ... }

// Récupérer uniquement les UTMs
var utms = window.getUTMs();
// { utm_source: 'google', utm_medium: 'cpc', ... }

// Pré-remplir manuellement les champs d'un formulaire
window.prefillFields();
// Utile après injection dynamique de formulaire
FonctionDescription
window.getUrlParams()Retourne un objet contenant tous les paramètres d'URL
window.getUTMs()Retourne un objet contenant uniquement les paramètres UTM
window.prefillFields()Pré-remplit les champs de formulaire à partir des paramètres URL. Appelé automatiquement au chargement, mais peut être rappelé après injection de HTML dynamique.

Inclure dans une page

<script src="core/js/params.js" defer></script>

Le script s'initialise automatiquement au chargement du DOM. Aucune configuration nécessaire.

Exemple complet : UTMs d'une campagne publicitaire

L'utilisateur clique sur une pub Google Ads avec cette URL :

https://monsite.fr/pages/index.html?utm_source=google&utm_medium=cpc&utm_campaign=promo-ete
  1. Page d'accueil : les UTMs sont stockés et ajoutés à tous les liens internes
  2. Navigation : l'utilisateur clique sur « Contact » → l'URL devient /pages/contact.html?utm_source=google&utm_medium=cpc&utm_campaign=promo-ete
  3. Formulaire : l'utilisateur remplit et envoie le formulaire
  4. Webhook : le payload JSON envoyé au webhook contient automatiquement les UTMs :
{
  "nom": "Marie Dupont",
  "email": "marie@test.fr",
  "utm_source": "google",
  "utm_medium": "cpc",
  "utm_campaign": "promo-ete"
}

Problèmes courants

Problème Cause probable Solution
Les UTMs ne se propagent pas params.js non chargé Ajouter <script src="core/js/params.js" defer></script>
Le pré‑remplissage ne fonctionne pas sur un custom select Le formulaire est chargé via data-form-embed Le pré‑remplissage se fait automatiquement après le chargement (50ms délai)
Les paramètres URL ne sont pas dans le payload webhook forms.js ne trouve pas window.getUTMs Vérifier que params.js est chargé avant forms.js dans le HTML

Voir aussi