Ir al contenido

Detectar el navegador con JavaScript móviles: Android, iPhone o PC en Google Tag Manager

¿Cómo utilizar la información User-Agent?

Hay varias formas en las que puedes utilizar la información del User-Agent del navegador para mejorar la rentabilidad de tu negocio digital. Algunos ejemplos son:

  1. Ofrecer una experiencia de usuario optimizada: puedes utilizar la información del User-Agent para adaptar la apariencia y el comportamiento de tu sitio web a las características y limitaciones de los diferentes navegadores y dispositivos. Por ejemplo, puedes utilizar JavaScript para detectar la resolución de pantalla y la orientación del dispositivo y cargar un diseño responsivo o una versión móvil de tu sitio en consecuencia.
  2. Analizar el rendimiento del sitio: al recopilar datos de User-Agent de diferentes navegadores y dispositivos, puedes analizar cómo se compara el rendimiento de tu sitio en diferentes entornos. Por ejemplo, si el rendimiento es muy lento en algunos navegadores o dispositivos, puedes identificar los problemas y trabajar en soluciones para mejorarlo.
  3. Personalizar la publicidad y el marketing: al conocer el navegador y el dispositivo que utiliza el usuario, puedes mostrar anuncios y mensajes de marketing más relevantes para ese usuario. Por ejemplo, si el usuario está utilizando un dispositivo móvil, puedes mostrar anuncios de productos móviles o de aplicaciones móviles.
  4. Mejorar la seguridad: al recopilar información del User-Agent, puedes identificar navegadores o dispositivos que puedan ser más propensos a ataques de hackers o malware. Puedes utilizar esta información para mejorar la seguridad de tu sitio y proteger a tus clientes.
  5. Mejorar la segmentación de anuncios: puedes utilizar la información del User-Agent para segmentar tus anuncios y ofrecer contenidos y promociones más relevantes para cada navegador o dispositivo. Por ejemplo, si detectas que un usuario está utilizando un navegador móvil, podrías mostrarle anuncios de productos que sean fáciles de llevar o utilizar en el camino.
  6. Personalizar el contenido del sitio: puedes utilizar la información del User-Agent para mostrar contenidos personalizados o recomendaciones de productos basados en las preferencias o el historial de navegación de cada usuario. Por ejemplo, si detectas que un usuario ha visitado varias páginas de productos de una categoría específica, podrías mostrarle un mensaje o un banner con recomendaciones de productos similares.
  7. Ofrecer una experiencia de pago más fácil: puedes utilizar la información del User-Agent para ofrecer opciones de pago más convenientes para los usuarios de navegadores móviles o dispositivos con tecnología de pago disponibles en sus smartphones.

Detectar el navegador (user-agent) del usuario

Para capturar el User-Agent en JavaScript y crear un filtro, puedes utilizar la propiedad “navigator.userAgent” del objeto Navigator. Esta propiedad devuelve una cadena que representa el agente de usuario del navegador (es decir, el software que está utilizando el usuario para acceder a la página).

Por ejemplo, si quieres crear un filtro para que un script solo se ejecute en navegadores Chrome, podrías utilizar el siguiente código:

<code>if (navigator.userAgent.indexOf('Chrome') > -1) {
    // ejecuta el script solo en Chrome
}

Crear filtros en base al navegador (user-agent) del usuario

También puedes utilizar la propiedad “navigator.userAgent” para crear filtros más complejos, como por ejemplo para excluir navegadores móviles o versiones específicas de un navegador. Por ejemplo:

<code>if (!navigator.userAgent.match(/Android|iPhone|iPad|iPod/i)) {
    // ejecuta el script solo en navegadores de escritorio
}

if (navigator.userAgent.indexOf('Chrome/86.') > -1) {
    // ejecuta el script solo en Chrome 86 o versiones posteriores
}

Es importante tener en cuenta que la propiedad “navigator.userAgent” puede ser falsificada por el usuario o por un software malintencionado, por lo que no debe utilizarse como única forma de autenticación o seguridad. Sin embargo, puede ser útil como una forma de ofrecer una experiencia de usuario optimizada para diferentes navegadores y dispositivos.

Detectar el User-Agent con Google Tag Manager

Crear una variable en GTM que informe el User-Agent del navegador

function() {
 return navigator.userAgent;
}
<code><span style="background-color: rgba(255, 255, 255, 0.75); color: var(--nv-text-color); font-family: Montserrat, var(--nv-fallback-ff); letter-spacing: 0px;"></span>

Para el User-Agent en Google Analytics

Una vez que podemos capturar el User-Agent desde GTM, lo podemos enviar como una Dimensión personalizada a Google Analytics, de esta manera puedes crear informes en GA4 o Looker Studio con nuestra nueva variable personalizada.

Podemos incluso crear una audiencia personalizada en base al User-Agent, considerando el informe por Dispositivo en Google Analytics o desde a cualquier Dimensión personalizada que podemos enviar a Google Analytics y utilizarlos para activar nuestras campañas en Google Ads