Cómo saber si un usuario está usando tu sitio web o tu app

Hay muchos casos en los que puede ser útil diferenciar entre una persona que está viendo tu sitio web en el navegador y una persona que lo está viendo a través de tu app. Tal vez quieras ver análisis de cómo se está adoptando tu app por los usuarios o quieras mostrar contenido diferente a los usuarios de la app.

Así como hay múltiples casos de uso, también hay múltiples maneras de lograr este objetivo. Vamos a repasarlas una por una.

Basado en el User Agent

El user agent es una cadena corta que el navegador envía a los sitios web cada vez que está cargando una página. El user agent contiene información sobre el navegador, por ejemplo, un navegador Firefox podría enviar algo como este user agent:

A partir de eso, tu sitio web puede detectar que el usuario está usando la versión 47.0 del navegador Mozilla Firefox. Al igual que los navegadores, tu app también envía un user agent que la identifica.

Agentes de usuario utilizados por la app

La app utiliza algunos agentes de usuario diferentes:

• $regularUserAgent App-WebView ($operatingSystem) $version
  Este es el user agent típico utilizado por el navegador interno de la app (que muestra tu sitio web dentro de la app). Las solicitudes hechas con este user agent son iniciadas por el usuario de la app al navegar entre páginas.
• App-HttpClient $version
  Este es el cliente utilizado para las peticiones realizadas por la app que no son iniciadas directamente por el usuario. Por ejemplo, la aplicación realiza algunas peticiones con esto para almacenar partes del sitio web para su uso sin conexión. El modo offline está deshabilitado por defecto hoy en día, así que probablemente no verás muchas solicitudes con este user agent.

$version es la versión interna de la aplicación (por ejemplo, 1.4.8+52) y $operatingSystem es la plataforma en la que se utiliza la aplicación (por ejemplo, ios o android).

$regularUserAgent es el agente de usuario de un navegador móvil que se esperaría del dispositivo, como Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Así que un ejemplo de user-agent que la app podría usar en iOS sería: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filtrando por el User Agent de la App

Basado en el formato de user agent anterior, puedes detectar que tu sitio web está siendo cargado por la app comprobando si el user agent contiene "App-WebView". Si quieres comprobar también el sistema operativo, puedes adicionalmente verificar si el user agent también contiene "(android)" o "(ios)".

Ejemplo: Mostrando Contenido Diferente en un Sitio Web de WordPress

Con el Editor Predeterminado de WordPress

Si estás usando WordPress, puedes usar el plugin "UserAgent Content Switcher". El nombre del plugin es bastante descriptivo: te permite mostrar contenido diferente a los usuarios basado en su user agent. Aquí te mostramos cómo configurarlo (y un ejemplo de uso):

1. Instala el plugin en tu sitio web. Ten en cuenta que no estamos afiliados con el plugin ni con su desarrollador, solo lo probamos y parecía ser gratuito y funcionaba bien.
2. En la página de configuración del plugin, agrega un nuevo tipo con estos ajustes:
   • Nombre del tipo: App
   • Atributo de código corto: app
   • Agente de usuario: App-WebView
3. Edita una de tus páginas y cambia al editor de código.
4. Ahora puedes crear secciones que solo sean visibles en la app así:

   
   Este texto es visible para todos.
   
   [agentsw ua='app']
   ¡Este texto solo es visible para los usuarios de la app!
   [/agentsw]

   

Con Elementor

Si estás usando Elementor, puedes usar el plugin gratuito Powerpack con el plugin de extensión powerpack-webtoapp. Así es como funciona:

1. Instala el plugin Powerpack a través de la tienda de WordPress.
2. Descarga el plugin powerpack-webtoapp como un archivo zip e instálalo.
   El plugin powerpack-webtoapp (y la idea de usar Powerpack en sitios web de Elementor) fue creado por ALL IN APPLI. Ellos usan el plugin para gestionar múltiples apps de webtoapp.design y generosamente decidieron compartirlo.
3. Ahora puedes configurar elementos específicos para que solo se muestren en la app.

Usando JavaScript

Basado en el User Agent

Por supuesto, no solo puedes verificar el agente de usuario en el lado del servidor (como se detalla en la sección anterior), sino también en JavaScript.

Aquí tienes un ejemplo de cómo puedes usar JavaScript para detectar si el usuario está usando la app o un navegador:

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    

Verificando Modificaciones en el HTML

La app hace pequeños cambios invisibles en el HTML del sitio web que son necesarios para algunas funciones de la app. También podemos usar estos cambios para detectar si la página fue cargada por la app.

Dado que esto es un poco complicado, te recomendamos que uses executeWhenAppReady del script de ayuda de la app. Luego puedes poner cualquier código dentro de la función executeWhenAppReady, y solo se ejecutará si la página fue cargada por la app. Una pequeña desventaja de este método es que toma unos milisegundos antes de que el código se ejecute, incluso si la página fue cargada por la app.

Inyectando Código en la App

En la página de personalización de tu sitio web tienes la opción de agregar cualquier JavaScript o CSS que la app debería inyectar en cada página que se cargue. Las posibilidades son infinitas con esto, pero como ejemplo, hagamos que este texto sea verde en la app:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Ahora podríamos configurar este JavaScript para inyectar:

document.getElementById("red-text").style.color = "green";

O alternativamente, este CSS para inyectar:

#red-text {
    color: green !important;
}

Como puedes ver, esto también funciona como una forma de tener un comportamiento diferente en el sitio web que en la app.