Cómo transferir parámetros UTM de una página a otra con GTM

Actualizado: 3 de abril de 2025.

He revisado completamente esta solución para que sea más versátil y requiera menos configuraciones. Sin embargo, en ciertos casos, la versión anterior de esta técnica sigue siendo recomendable. Si la URL de destino contiene un símbolo de hash (#), te sugiero probar la versión anterior.

====

Imagina que estás llevando a cabo una campaña promocional que dirige tráfico a una página de aterrizaje específica (por ejemplo, landingpage.com). Después de que un visitante hace clic en el botón principal de llamada a la acción (por ejemplo, OBTÉN TU DESCUENTO), es redirigido a otra página (2ndpage.com), donde se le solicita que complete una acción final, como instalar una aplicación, rellenar un formulario, registrarse, etc.

Cuando se completa la conversión, se activa un evento en Google Analytics. Sin embargo, al revisar tus informes de GA, notarás que todas las conversiones se atribuyen a landingpage.com. Aunque esto es técnicamente correcto, ya que todos los visitantes llegaron a 2ndpage.com desde landingpage.com, es probable que desees ver la fuente original que llevó al visitante, ¿verdad?

Por lo general, tendrías que implementar el seguimiento entre dominios, pero en algunas situaciones esto no es posible (más adelante explicaré estos casos).

En este artículo, te mostraré una técnica específica utilizando Google Tag Manager (GTM) para transferir parámetros UTM (o esencialmente cualquier parámetro de URL) desde la página inicial landingpage.com y añadirlos automáticamente a los enlaces salientes que apuntan a la segunda página (2ndpage.com). Esto es útil si no puedes implementar el seguimiento entre dominios.

Video tutorial

Si prefieres aprender mediante contenido visual, aquí tienes un tutorial de mi canal de YouTube.

Entendiendo el problema

Imagina que estás promocionando un producto disponible en la tienda de aplicaciones (por ejemplo, la Shopify App Store). Supongamos que lo llamamos Lorem Appsum. La página de la tienda de aplicaciones no es suficiente para detallar todos los beneficios y características llamativas. Por lo tanto, decidiste crear una página de aterrizaje separada a la que dirigirás tráfico. Todos los enlaces entrantes que lleven a esa página de aterrizaje están marcados con parámetros UTM.

La nueva página de aterrizaje contiene puntos clave de venta, descripciones de características, un video y un gran botón de OBTENER LA APLICACIÓN AHORA (llamada a la acción, o CTA). Todo parece perfecto. El visitante aterrice en la página inicial, hace clic en ese botón CTA, llega a la página de la tienda de aplicaciones y finalmente instala la aplicación. Sin embargo, aquí es donde se pierde la información crucial sobre los parámetros UTM.

El problema radica en que Google Analytics atribuirá esta conversión a loremappsum.com, aunque sería más beneficioso poder ver los valores de las UTM iniciales.

La solución: un resumen

Actualización: Esta es la versión 2 de la solución. Con ella:

• podrás transferir cualquier parámetro de consulta (no solo UTM)
• no necesitarás crear variables de URL
• puedes decorar enlaces de múltiples dominios
• y los parámetros de consulta que deseas transferir son opcionales (lo que significa que si utm_campaign no está presente en la URL, la solución funcionará igualmente).

====

Una de las soluciones es transferir los parámetros UTM de loremappsum.com y añadirlos automáticamente a todos los enlaces que redirigen a los usuarios a appstore.com/loremappsum. Haremos esto con Google Tag Manager y un script personalizado.

Importante: Si notas que el script no funciona en ciertas situaciones, házmelo saber y buscaré una solución.

<script>
(function() {
  var domainsToDecorate = [
          'domain1.com', //añade o elimina dominios (sin https o barra final)
          'domain2.net'
      ],
      queryParams = [
          'utm_medium', //añade o elimina parámetros de consulta que deseas transferir
          'utm_source',
          'utm_campaign',
          'something_else'
      ]
  // no edites nada debajo de esta línea
  var links = document.querySelectorAll('a'); 

// verifica si los enlaces contienen un dominio del array domainsToDecorate y luego los decora
  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);
          }
      }
  }
// decora la URL con parámetros de consulta
  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('&');
  }

  // función que recupera el valor de un parámetro de consulta
  function getQueryParam(name) {
      if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
          return decodeURIComponent(name[1]);
  }

})();
</script>

Una vez que el visitante aterrice en loremappsum.com Y la URL de la página contenga utm_medium, utm_source o cualquier otro parámetro de URL (que te interese), la etiqueta se activará. Escaneará la página en busca de enlaces que contengan el dominio(s) de la página de destino, en este caso, appstore.com.

Si el script encuentra el enlace, procederá a:

1. Recoger los parámetros de URL (por ejemplo, UTM) de la barra de direcciones del navegador.
2. Y añadir esos parámetros a dicho enlace (que contiene «appstore.com»).

Por lo tanto, en lugar de appstore.com/loremappsum, todos los enlaces en loremappsum.com se modificarán automáticamente a appstore.com/loremapsum?utm_medium=referral&utm_source=promo&utm_campaign=blackfriday2017. Aquí tienes un esquema actualizado del flujo del visitante:

Limitaciones de esta solución

Existen situaciones donde esta solución podría no funcionar como se espera:

• Si las URLs que deseas decorar contienen #, deberías intentar la versión anterior de la solución.
• Si las URLs que deseas decorar ya tienen parámetros de consulta de la etiqueta de HTML personalizada, no se reemplazarán. El script los añadirá a la URL (lo que podría resultar en parámetros duplicados).

¿Notaste más situaciones donde el script no funciona como se esperaba? Comenta y haré lo posible por solucionarlo.

Implementación de la solución en GTM

En Google Tag Manager, crea una etiqueta HTML personalizada y pega el código JavaScript que proporcioné anteriormente.

A continuación, necesitamos realizar algunas configuraciones.

Modificar la lista de dominios

En la línea 3, verás este array domainsToDecorate:

  var domainsToDecorate = [
          'domain1.com', //añade o elimina dominios (sin https o barra final)
          'domain2.net'
      ],

Aquí deberás ingresar el(los) dominio(s) de la(s) página(s) de destino. Si un visitante llega a la página intermedia, el script buscará enlaces que contengan el(los) dominio(s) del array domainsToDecorate.

Es decir, si el recorrido es alguna página web > loremappsum.com > appstore.com, deberías ingresar «appstore.com» en el array domainsToDecorate.

Si solo deseas decorar URLs de un único dominio, puedes dejar solo un dominio. Si deseas añadir cuatro dominios, también puedes hacerlo. Solo asegúrate de no dejar errores tipográficos, comas o apóstrofes faltantes.

Si deseas ser más específico y decorar solo algunos enlaces, puedes ingresar incluso más detalles. En lugar de appstore.com, puedes ingresar appstore.com/tu-aplicación.

Un ejemplo con un solo dominio sería:

  var domainsToDecorate = [
          'appstore.com'
      ],

Añadir los parámetros de URL que deseas transferir

A continuación, deberás editar la lista de parámetros de URL que deseas obtener de la URL de la página y transferir a los enlaces salientes.

Por ejemplo, si la URL de la página (donde está el visitante) es https://www.loremappsum.com/?utm_medium….., entonces esos parámetros (por ejemplo, utm_medium) se añadirán a todas las URLs de appstore.com, es decir, https://appstore.com/loremappsum/?utm_medium…

queryParams = [
          'utm_medium', //añade o elimina parámetros de consulta que deseas transferir
          'utm_source',
          'utm_campaign',
          'something_else'
      ]

Lo interesante de la reciente actualización de esta solución es que:

• No es necesario crear variables GTM para cada parámetro.
• Puedes transferir cualquier parámetro de URL (a.k.a. parámetro de consulta), no solo UTM.
• Los parámetros que ingresaste en el array queryParams son todos opcionales. Si la URL de la página no contiene, por ejemplo, utm_campaign, el script seguirá funcionando sin problemas.
• Los UTM pueden contener un signo “+”. Este se transferirá adecuadamente y no se codificará como %2B.

Aquí tienes un ejemplo de cómo podría ser la configuración:

queryParams = [
          'utm_medium',
          'utm_source',
          'utm_campaign',
          'ref'
      ]

Guarda la etiqueta. Ahora es el momento de añadir un desencadenador.

Configurar el desencadenador

No querrás activar esta etiqueta HTML personalizada en cada página. En su lugar, debes activarla solo cuando la URL contenga al menos uno de los parámetros de consulta que deseas transferir. Siguiendo con nuestro ejemplo donde ingresé estos parámetros en la etiqueta HTML personalizada:

queryParams = [
          'utm_medium',
          'utm_source',
          'utm_campaign',
          'ref'
      ]

Por lo tanto, si alguno de estos parámetros está presente en la URL, la etiqueta HTML personalizada debería activarse. Cada parámetro en la URL también debe contener un signo de “igual” (=), por lo tanto, las condiciones de nuestro desencadenador deberían ser:

• Tipo de desencadenador: DOM listo
• Activar en algunos eventos DOM listos
• La URL de la página coincide con RegEx (ignorar mayúsculas) utm_medium=|utm_source=|utm_campaign=|ref=

Lo que hice aquí fue añadir “=” después de cada parámetro y luego separarlos con una barra vertical ( | ), que en expresiones regulares significa “O”. Por supuesto, podríamos escribir una expresión más optimizada, como:

utm_(medium|source|campaign)=|ref=

…o algo más simplificado, pero incluso el primer ejemplo funcionará bien. Si no te sientes seguro con las expresiones regulares, simplemente introduce todos los parámetros de consulta que te interesen, añade “=” después de cada uno y sepáralos con un |.

Guarda este desencadenador y asígnalo a la etiqueta HTML personalizada.

Realizando pruebas

Guarda todos los cambios y habilita el modo de vista previa y depuración. Dirígete a la página en la que estás trabajando. Hay dos situaciones que necesitamos probar:

1. Asegúrate de que al menos uno de los parámetros de consulta (que deseas transferir) esté presente en la URL de la página. En mi caso, la URL de la página es www.loremappsum.com?utm_medium=referral&utm_source=promo&utm_campaign=blackfriday2017.
2. Haz clic en el enlace que contenga el nombre de dominio que definiste en el script personalizado que compartí en este artículo. En mi caso, es www.appstore.com/loremappsum.
3. Una vez redirigido, la URL de la página (appstore.com/loremappsum) también debería contener esos 3 parámetros UTM. El resultado final en la barra de direcciones del navegador debería ser www.appstore.com/loremappsum?utm_medium=referral&utm_source=promo&utm_campaign=blackfriday2017
   

Además, no olvides probar la situación opuesta donde no hay UTM (o cualquier otro parámetro) en la barra de direcciones. En ese caso, no debería añadirse nada a los enlaces de appstore.com.

También hay un tercer caso que deberías probar. Verifica al menos un par de otros enlaces externos (no relacionados con appstore.com). Estos nunca deberían contener parámetros UTM.

Transferencia de parámetros UTM: Consideraciones finales

En este artículo, he explicado cómo transferir parámetros UTM (o cualquier otro parámetro de URL) de una página a otra. Esto es realmente útil cuando tienes una página de aterrizaje intermedia a la que estás atrayendo visitantes y luego deben proceder a la página final, que se encuentra en otro dominio.

Esta es una opción alternativa si no puedes implementar el seguimiento entre dominios por alguna razón.

Por defecto, perderías todos los datos de atribución y Google Analytics mostraría tu página de aterrizaje intermedia como la principal fuente de referencia.

Con el script que compartí, puedes reutilizar los parámetros UTM de la página de aterrizaje inicial y decorar ciertos enlaces con ellos.

Ten en cuenta que la navegación entre la página intermedia y la página final iniciará una nueva sesión (y la misma persona será tratada como dos personas diferentes en tus informes de GA).

La situación que describí no es un problema muy común, pero ocurre de vez en cuando.