Cómo obtener parámetros GET de la URL

Es posible que en diferentes escenarios, tengamos la necesidad de realizar alguna acción en base a algún parámetro de búsqueda de la URL actual.

Un ejemplo actual podría ser, obtener los valores de los parámetros UTM de la URL y asignarlos a campos ocultos de un formulario <input type="hidden" name="utm_source" value="...">

De Wikipedia:

Los parámetros UTM (Urchin Tracking Module, «módulo de seguimiento Urchin») son parámetros de URL que usa Google para medir la efectividad de campañas de marketing de URLs únicas

window.location.search

La propiedad search de la interfaz Location interface es una cadena de búsqueda (search string), también llamada query string; que contiene un caracter '?' seguido de los parámetros de la URL. Todos los navegadores modernos soportan este método.

Lo primero que deberíamos hacer es obtener los parámetros utilizando:

const queryParams = new URLSearchParams(window.location.search);

Una vez obtenidos y pasados a través de URLSearchParams, tendremos a disposición diferentes métodos que nos simplificarán la tarea de obtener o manipular estos valores.

Por ejemplo, si quisiéramos iterar sobre todos los parámetros, sin filtrar ninguno en particular, podríamos hacer lo siguiente:

for (let param of queryParams) {
  console.log(param);
}

Dos de los métodos más útiles pueden ser has y get, que los utilizaríamos para saber si un parámetro está definido y para obtener su valor, respectivamente.

Ejemplo

Digamos que queremos obtener el valor de utm_campaign de la URL y agregar un campo oculto en el formulario de subscripción de nuestra web.

// Obtenemos todos los valores de query params
const queryParams = new URLSearchParams(window.location.search);

// Verificamos si está definido utm_campaign en la URL
if (queryParams.has('utm_campaign')) {
  // Obtenemos el valor del parámetro utm_campaign y lo asignamos a una variable
  const utmCampaignValue = queryParams.get('utm_campaign');

  // Asignamos la referencia al formulario a una variable
  const form = document.querySelector('#subscribe_form');

  // Creamos un nuevo elemento input
  const input = document.createElement('input');

  // Asignamos las propiedades del input
  input.type = 'hidden';
  input.name = 'utm_campaign';
  input.value = utmCampaignValue;

  // Agregamos el input al formulario
  form.appendChild(input);
}