Transferir los parámetros del UTM de una página a otra con el GTM

Actualizado: 1 de octubre de 2023.

He rehecho completamente esta solución para soportar más casos y requerir menos configuración. Sin embargo, en algunas situaciones, se recomienda la versión más antigua de esta solución. Si la URL de destino contiene un hashmark (#), deberías intentar usar la versión antigua.

====

Imagina esto. Estás llevando a cabo una campaña promocional que atrae tráfico a una cierta página de aterrizaje (por ejemplo, landingpage .com). Después de que el visitante hace clic en el botón principal de llamada a la acción (por ejemplo, GET YOUR DISCOUNT), es redirigido a otra página(2ndpage.com) que pide al visitante que haga la acción final, instale la aplicación, rellene el formulario, se registre, etc.

Cuando la conversión se completa, se dispara un evento de Google Analytics. Desafortunadamente, cuando miras los informes de la AG, lo que verás es que todas las conversiones se atribuyen a la landingpage .com. Técnicamente, esto es correcto porque todos los visitantes aterrizaron en la 2ª página de landingpage .com, pero te gustaría ver la fuente original que trajo al visitante, ¿no?

Normalmente, necesitarías implementar el seguimiento a través de los dominios aquí, pero en algunos casos eso no es posible (lo explicaré un poco más tarde).

En esta entrada del blog, te mostraré cómo transferir los parámetros UTM (o básicamente cualquier parámetro de URL) de la página inicial landingpage .com a la siguiente(2ndpage.com) si no se puede implementar el rastreo entre dominios.

El problema se explica

Digamos que estás promocionando un producto que está disponible en el App Store (por ejemplo, Shopify App Store). Lo llamaremos Lorem Appsum. Su página de la App Store no es suficiente para enumerar todos los beneficios, características geniales, etc. Así que decidiste crear una página de destino separada a la que dirigir el tráfico. También has marcado todos los enlaces entrantes (almacenados en otros sitios web/foros/etc.) que conducen a los visitantes a esa página de aterrizaje con parámetros UTM.

Esa nueva página de aterrizaje contiene puntos de venta clave, descripciones de características, video, y un gran botón GET APP NOW (Llamada a la acción, también conocido como CTA). Perfecto. El visitante llega a la página inicial, hace clic en el botón CTA, llega a la página del App Store e instala la aplicación. Aquí está el esquema de todo el viaje del visitante:

Fíjate que los parámetros UTM se pierden después de que el visitante hace clic en un enlace de appstore.com en la página de loremappsum. com.

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

¿Por qué no implementar el seguimiento de los dominios cruzados de GA?

En el caso de las tiendas de aplicaciones, normalmente, los creadores/desarrolladores no están autorizados a editar el código de seguimiento de Google Analytics, por lo que el seguimiento entre dominios no se puede configurar correctamente.

Esto es lo que enfrentamos con Omnisend (cuando trabajaba allí) en Shopify Appstore. Se nos permitió configurar el ID de seguimiento de Google Analytics, y eso es todo. Desafortunadamente, para que el seguimiento entre dominios funcionara, también necesitábamos habilitar la opción allowLinker en el dominio receptor (tienda de aplicaciones), pero no fue posible.

Así que tuvimos que improvisar y esta entrada de blog es la solución al problema.

La solución – Visión general

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

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

====

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 el Google Tag Manager y un script personalizado.

Importante: si notas que el script no funciona en alguna situación, por favor, házmelo saber y veré qué puedo hacer para arreglarlo.

Una vez que el visitante aterriza en loremappsum.com Y la URL de la página contiene utm_medium, utm_source, o cualquier otro parámetro de URL (que le interese), la etiqueta se disparará. Escaneará toda la página y buscará los enlaces que contengan el/los dominio(s) de la página de destino final, en este caso, appstore.com.

Si el guión encuentra el enlace, lo hará:

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

Así que en lugar de appstore .com/loremappsum, todos los enlaces de loremappsum. com se modificarán automáticamente a appstore.com/loremapsum?utm_medium=referral&utm_source=promo &utm_campaign=blackfriday2017. Aquí está el flujo de visitantes actualizado:

Esta solución no cubre el 100% de los casos

Hay situaciones en las que esta solución no funcionará adecuadamente:

• Si las URL que desea decorar contienen #, intente usar la versión antigua de la solución
• Si las URL que desea decorar ya contienen parámetros de consulta (también conocido como URL) de la etiqueta HTML personalizada, no serán reemplazados. El script los agregará a la URL (por lo tanto, terminará con parámetros duplicados).

¿Notas más situaciones en las que el guión no funciona como se esperaba? Házmelo saber en los comentarios y veré qué puedo hacer.

La solución – Implementación en GTM

En el Google Tag Manager, crea una etiqueta HTML personalizada y pega el código JavaScript que te proporcioné en el capítulo anterior.

Ahora, necesitamos hacer alguna configuración.

Editar la lista de dominios

En la línea 3, verán este arreglo de dominios para decorar:

  var dominiosParaDecorar = [ 'dominio1.com', //añadir o quitar dominios (sin https o barra de arrastre) 'dominio2.net' ],

Aquí debes introducir el/los dominio/s de la/s página/s de destino final/es. Si un visitante llega a la página de aterrizaje intermedia, el guión buscará los enlaces que contengan el/los dominio(s) de la matriz de dominios para decorar.

En otras palabras, si el viaje es algún sitio web > loremappsum.com > appstore.com, entonces debe introducir «appstore.com» en el array de dominiospara-decorar .

Si quieres decorar las URL de un solo dominio, puedes mantener un solo dominio. Si quieres añadir 4 dominios, también puedes hacerlo. Sólo asegúrate de no dejar errores de escritura, comas o apóstrofes.

Si quieres ser más específico y decorar sólo algunos enlaces, puedes ser aún más específico. En lugar de appstore.com, puedes entrar en appstore.com/tu-app.

Aquí tienes un ejemplo con un solo dominio (obviamente, debes reemplazar ese dominio):

  var dominiosToDecorate = [ 'appstore.com' ],

Añade los parámetros de la URL que quieras transferir

A continuación, debe editar la lista de parámetros de URL que desea tomar de la página URL y transferirlos a determinados enlaces salientes (salientes).

Si por ejemplo, el URL de la página (donde se encuentra actualmente un visitante) es https://www.loremappsum.com/?utm_medium….. entonces esos parámetros (por ejemplo, utm_medium) se añadirán a todos los URL de la appstore.com, por ejemplo https://appstore.com/loremappsum/?utm_medium...

queryParams = [ 'utm_medium', //añadir o quitar los parámetros de consulta que quieras transferir 'utm_source', 'utm_campaign', 'something_else' ]

Lo que está bien con la reciente actualización de esta solución es que:

• No tienes que crear variables GTM para cada parámetro
• Puedes transferir cualquier parámetro de URL (también conocido como parámetro de consulta), no sólo UTMs
• Los parámetros que introdujo en la matriz queryParams son todos opcionales. Si la URL de la página no contiene, por ejemplo, utm_campaign, el guión seguirá funcionando bien
• Los UTM también pueden contener un signo «+». Se transferirá bien y no será codificado a %2B.

Aquí hay un ejemplo de lo que podría ser la configuración:

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

Guarda la etiqueta. Ahora, es hora de un gatillo.

Trigger

No querrás disparar esta etiqueta HTML personalizada en cada página. En su lugar, debes activarla sólo cuando la URL contenga al menos uno de esos parámetros de consulta que quieres transferir. Continuemos con el ejemplo en el que introduje estos parámetros de consulta en la etiqueta HTML personalizada:

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

Así que, si alguno de estos parámetros está en la URL, la etiqueta HTML personalizada debería dispararse. Cada parámetro en la URL también debería contener un signo «igual» (=), por lo tanto, la condición de nuestro disparador debería ser así:

• Tipo de disparador: DOM listo
• Disparar sobre algunos eventos DOM Ready
• La URL de la página coincide con el RegEx (ignorar el caso) utm_medium=|utm_source=|utm_campaign=|ref=

Lo que he hecho aquí es que he añadido «=» después de cada parámetro y luego los he separado con un tubo ( | ), que en las Expresiones Regulares significa «O». Por supuesto, podríamos escribir una expresión más optimizada como:

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

o algo aún más delgado, pero incluso el primer ejemplo funcionará bien. Si no te sientes seguro con regex, sólo tienes que introducir todos los parámetros de la consulta que te interesan, añadir «=» después de cada uno de ellos, y separarlos con un |.

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

Probemos

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

1. Asegúrate de que es al menos uno de los parámetros de consulta (que quieres transferir) 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 contiene el nombre de dominio que has definido en el script personalizado que he compartido en esta entrada de blog. En mi caso, es www.appstore.com/loremappsum
3. Después de ser redirigido, el 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 olvide probar la situación opuesta cuando no haya UTMs (u otros parámetros) en la barra de direcciones. En ese caso, no se debe añadir nada a los enlaces de appstore.com.

Oh, también hay un tercer caso a probar, comprueba al menos un par de otros enlaces externos (no relacionados con appstore.com), nunca deben contener parámetros UTM.

Transferir parámetros UTM: Palabras finales

En esta entrada del blog, he explicado cómo transferir los parámetros UTM (o cualquier otro parámetro URL) de una página a otra. Esto es realmente útil cuando se tiene una página de aterrizaje intermedia que está atrayendo a los visitantes, y luego tienen que proceder a la página final que se almacena en otro dominio.

Este es un plan B si no puedes implementar el seguimiento entre dominios por alguna razón.

De forma predeterminada, perderías todos los datos de atribución y Google Analytics mostrará tu página de destino intermedia como la referencia principal.

Con el script que he compartido, podrás reutilizar los parámetros UTM de la página de destino inicial y decorar ciertos enlaces con ellos.

Sin embargo, tened en cuenta que, obviamente, la navegación entre la página intermedia y el aterrizaje final comenzará una nueva sesión (y la misma persona seguirá siendo tratada como dos personas diferentes en vuestros informes de la AG).

La situación que he descrito no es un tema muy común, pero ocurre de vez en cuando. De hecho, uno de mis lectores ha hecho recientemente una pregunta relacionada con este mismo tema.