Utiliser les paramètres d'URL dans Webflow

Pourquoi utiliser les paramètres d'URL sur vos projets ?

1. Lorsque vous faites de l'acquisition, garder ces paramètres est primordial. En effet connaître la source, la campagne, le mot clé etc vous permet d'analyser finement la qualité de votre trafic et de vos leads.
2. Les paramètres permettent de générer des pages avec des personnalisations. Par exemple, si vous avez le paramètre nom avec la valeur Justa, vous pourriez afficher un texte du type Bonjour Justa

‍

Au programme de cet article :

• Comment sauvegarder vos paramètres d'URL dans vos formulaires
• Comment, après avoir soumis un formulaire, renvoyer l'utilisateur vers une page donnée tout en gardant les paramètres d'URL
• Comment utiliser ces paramètres d'URL pour montrer une page personnalisée à un utilisateur

1. Sauvegarder vos paramètres d'URL dans vos formulaires

La première étape consiste à ajouter un formulaire sur votre page et à changer deux choses :

• Mettre un ID pour pouvoir l'utiliser dans les scripts
• Mettre sur POST la method pour récupérer les réponses au formulaire.

Ensuite, il faut mettre des champs texte dans votre formulaire. Mettez les en cachés car ils n'ont pas à être visible des utilisateurs.

Pour cela, il faut créer un champ qui aura pour nom, class et ID utm_source. Le faire autant de fois que nécessaire pour tous vos paramètres d'URL.

Je vous conseille d'utiliser une class du type form-field pour tous les champs et d'y ajouter une combo class utm_source, utm_medium etc..

‍

Ensuite, il faut ajouter ce script au niveau du </body> dans la page concernée par le formulaire.

Pensez à modifier / ajouter / supprimer les paramètres qui correspondent à votre cas d'usage.

<script>
  var queryString = window.location.search;
  console.log(queryString);
  var URLSearchParams_wb = new URLSearchParams(queryString);

// Ajouter tous les paramètres que vous voulez récupérer ci-dessous
  const utmParameters = [
    "utm_source", 
    "utm_medium", 
    "utm_campaign",
    "utm_content",
    "utm_term"
  ];

  for (const utm_element of utmParameters) {
    /* si un utm existe */
    if(URLSearchParams_wb.has(utm_element)){
      console.log(utm_element + "is exist");
      /* récupérer la valeur de ces paramètres */
      var value = URLSearchParams_wb.get(utm_element)
      /* change la valeur du champ caché en se basant sur le paramètre */
      $("."+utm_element).val(value);
    }
  }/* end for loop */
</script>

‍

2. Garder les paramètres d'URL après une soumission de formulaire

Dans Webflow, vous pouvez nativement paramétrer une page de redirection après une soumission de formulaire. Néanmoins, vous perdez les paramètres d'URL en se basant sur la méthode propre à Webflow.

On posera ce script sur la page où le formulaire est présent.

Voici comment l'adapter :

• En ligne 3, pensez à changer l'ID du formulaire de redirection.
• En ligne 6, pensez à bien mettre les paramètres que vous souhaitez garder sur la page de redirection (2 fois)
• Au milieu de cette ligne pensez aussi à remplacer /test par le slug de la page de redirection (au niveau de window.location="/test)

‍

<script>
//changer l'ID du formulaire Webflow
$("#wf-form-contact").submit(function (e) {
    e.preventDefault();
//définir les paramètres que vous voulez garder et mettre le slug de l'URL de redirection
		let utm_source=$("#utm_source").val();let utm_medium=$("#utm_medium").val();window.location="/test?utm_source="+$("#utm_source").val()+"&utm_medium="+$("#utm_medium").val();});
</script>

Vous pouvez garder les paramètres de tracking qui étaient récupérés dans vos champs cachés, mais aussi vous servir des champs non cachés que l'utilisateur a rempli.

Par exemple, vous pouvez utiliser le prénom de la personne qui a soumis le formulaire pour l'ajouter en tant que paramètre. La clé du paramètre utilisera l'ID du champ de formulaire. Par exemple, si vous avez un champ avec prenom pour ID, alors le paramètre sera ?prenom= et sa valeur sera celle de son utilisateur.

‍

{{newsletter-blog}}

‍

3. Utiliser les paramètres sur vos pages

Utiliser les paramètres d'URL dans une page peut vous permettre d'ajouter de la personnalisation pour vos utilisateurs et donc d'améliorer l'expérience utilisateur.

Pour cela,

Il faut placer ce script sur le <body> de la page de redirection.

‍

Voici comment l'adapter :

• En ligne 7, la class .query-dyn correspond à la class qui va être remplacé par la valeur du paramètre d'URL. 
• Toujours en ligne 7, l'élément query correspond au paramètre pour lequel va aller chercher la valeur. 

<script>
if(window.location.search){
  // récupérer tous les paramètres d'URL
  const urlParams = new URLSearchParams(window.location.search);
  // récupérer la valeur du parmaètre souhaitée, ici query
  // et afficher cette valeur sur l'élément qui a la class .query-dyn
  $('.query-dyn').text(urlParams.get('query'));
}
</script>

‍

Pour être sûr de garder les utm entre les pages, je vous conseille de mettre un dernier script. Je vous conseille de le mettre via Google Tag Manager (retrouvez notre guide sur GTM) mais vous pouvez aussi le faire directement dans Webflow. 

<script>
(function() {
  var domainsToDecorate = [
          'domaine.com', //ajouter ou supprimer des domaines (sans https ou autre)

      ],
      queryParams = [
          'utm_medium', //ajouter ou supprimer des paramètres que vous vouler tranférer
          'utm_source',
          'utm_campaign',
          'utm_content',
          'utm_term',
          'gclid',
          'fbclid'
      ]
  // ne rien éditer à partir de cette ligne
  var links = document.querySelectorAll('a'); 

// check if links contain domain from the domainsToDecorate array and then decorates
  for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
      for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) { 
          if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
              links[linkIndex].href = decorateUrl(links[linkIndex].href);
          }
      }
  }
// decorates the URL with query params
  function decorateUrl(urlToDecorate) {
      urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
      var collectedQueryParams = [];
      for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
          if (getQueryParam(queryParams[queryIndex])) {
              collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
          }
      }
      return urlToDecorate + collectedQueryParams.join('&');
  }

  function getQueryParam(name) {
      if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
          return decodeURIComponent(name[1]);
  }

})();
</script>

‍

On a créé un projet pour que vous puissiez tester par vous-même.

Merci à Nicolas Tizio qui m'a indirectement donnée l'idée de cet article.