Comment savoir si un utilisateur utilise votre site web ou votre application ?

Mis à jour le 6. mai 2024 par Jan Bunk

Un robot humanoïde inspectant une application et un navigateur pour trouver les différences, art numérique

Dans de nombreux cas, il peut être utile de faire la distinction entre une personne qui consulte votre site web dans un navigateur et une personne qui le consulte par l'intermédiaire de votre application. Vous souhaitez peut-être consulter des données analytiques sur l'adoption de votre application par les utilisateurs ou montrer un contenu différent aux utilisateurs de l'application.

Tout comme il existe de multiples cas d'utilisation, il existe également de multiples façons d'atteindre cet objectif. Examinons-les une à une.

Basé sur l'agent utilisateur

Le filtrage par agent utilisateur ne fonctionne que si vous avez configuré l'application pour qu'elle ajuste l'agent utilisateur qu'elle utilise. Vous pouvez activer cette option dans les paramètres de navigation de votre application. Ouvrir les paramètres de navigation
Si vous ne souhaitez pas activer cette option, consultez les autres méthodes de filtrage présentées dans cet article.

L'agent utilisateur est une courte chaîne de caractères que le navigateur envoie aux sites web lorsqu'il charge une page. L'agent utilisateur contient des informations sur le navigateur. Par exemple, un navigateur Firefox pourrait envoyer quelque chose comme cet agent utilisateur :

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

À partir de là, votre site web peut détecter que l'utilisateur utilise la version 47.0 du navigateur Mozilla Firefox. Tout comme les navigateurs, votre application envoie également un agent utilisateur qui l'identifie.

Agents utilisateurs utilisés par l'application

L'application utilise plusieurs agents utilisateurs différents :

  • $regularUserAgent App-WebView ($operatingSystem) $version
    Il s'agit de l'agent utilisateur type utilisé par le navigateur interne de l'application (qui affiche votre site web dans l'application). Les demandes faites avec cet agent utilisateur sont initiées par l'utilisateur de l'application en naviguant entre les pages.
  • App-HttpClient $version
    Ceci est l'agent utilisateur utilisé pour les demandes faites par l'application qui ne sont pas directement initiées par l'utilisateur. Par exemple, l'application peut effectuer des demandes pour stocker des parties du site web pour une utilisation hors ligne. Le mode hors ligne étant désactivé par défaut de nos jours, vous ne verrez probablement pas beaucoup de demandes avec cet agent utilisateur.

$version est la version interne de l'application (par exemple 1.4.8+52) et $operatingSystem est la plateforme sur laquelle l'application est utilisée (par exemple iOS ou android).

$regularUserAgent est l'agent utilisateur d'un navigateur mobile auquel on peut s'attendre de la part de l'appareil, par exemple, Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Un exemple de user-agent que l'application pourrait utiliser sur iOS serait donc le suivant : 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

Filtrage pour l'agent utilisateur de l'application

Sur la base du format d'agent utilisateur ci-dessus, vous pouvez détecter que votre site web est chargé par l'application en vérifiant si l'agent utilisateur contient "App-WebView". Si vous souhaitez également vérifier le système d'exploitation, vous pouvez également vérifier si l'agent utilisateur contient également "(android)" ou "(ios)".

Exemple : Afficher un contenu différent sur un site Web WordPress

With the Default WordPress Editor

Si vous utilisez WordPress, vous pouvez utiliser le plugin "UserAgent Content Switcher". Le nom du plugin est assez descriptif : il vous permet d'afficher un contenu différent aux utilisateurs en fonction de leur agent utilisateur. Voici comment vous pouvez le configurer (et un exemple de cas d'utilisation) :

  1. Installez le plugin sur votre site web. Veuillez noter que nous ne sommes pas affiliés à ce plugin ou à son développeur, nous l'avons juste testé et il nous a semblé être gratuit et fonctionner correctement.
  2. Sur la page des paramètres du plugin, ajoutez un nouveau type avec ces paramètres :
    • Nom du type : Application
    • Attribut du code court : app
    • Agent utilisateur : App-WebView Une capture d'écran du formulaire rempli avec les informations ci-dessus.
  3. Modifiez l'une de vos pages et passez à l'éditeur de code.
  4. Vous pouvez maintenant créer des sections qui ne sont visibles que dans l'application, comme ceci :
    
    Ce texte est visible par tous.
    
    [agentsw ua='app']
    Ce texte n'est visible que par les utilisateurs de l'application !
    [/agentsw]
    Une capture d'écran du texte ci-dessus dans l'éditeur de code de WordPress.

With Elementor

If you're using Elementor, you can instead use the free Powerpack plugin with the powerpack-webtoapp extension plugin. Here's how it works:

  1. Install the Powerpack plugin through the WordPress store.
  2. Download the powerpack-webtoapp plugin as a zip file and install it.
    The powerpack-webtoapp plugin (and the idea to use Powerpack on Elementor websites) was created by ALL IN APPLI. They use the plugin to manage multiple webtoapp.design apps and generously decided to share it.
  3. Now you can set specific elements to only be displayed in the app. A screenshot of the Powerpack settings.

Utiliser JavaScript

Basé sur l'agent utilisateur

Bien entendu, vous pouvez non seulement vérifier l'agent utilisateur du côté du serveur (comme indiqué dans la section précédente), mais aussi en JavaScript.

Le filtrage par agent utilisateur ne fonctionne que si vous avez configuré l'application pour qu'elle ajuste l'agent utilisateur qu'elle utilise. Vous pouvez activer cette option dans les paramètres de navigation de votre application. Ouvrir les paramètres de navigation

Voici un exemple de la manière dont vous pouvez utiliser JavaScript pour détecter si l'utilisateur utilise l'application ou un navigateur :


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.");
}
    
Vous pouvez également utiliser getAppPlatform à partir du script d'aide à l'application, qui fonctionne de manière très similaire.

En vérifiant les modifications HTML

L'application apporte de minuscules modifications invisibles au code HTML du site web, qui sont nécessaires pour certaines fonctions de l'application. Nous pouvons également utiliser ces modifications pour savoir si la page a été chargée par l'application.

Comme il s'agit d'une opération un peu délicate, nous vous recommandons d'utiliser executeWhenAppReady à partir du script d'aide à l'utilisation de l'application. Vous pouvez alors placer n'importe quel code dans la fonction executeWhenAppReady, et il ne sera exécuté que si la page a été chargée par l'application. L'inconvénient de cette méthode est qu'il faut quelques millisecondes avant que le code ne soit exécuté, même si la page a été chargée par l'application.

En injectant du code dans l'application

Sur la page de personnalisation de votre site web, vous avez la possibilité d'ajouter du JavaScript ou du CSS que l'application doit injecter dans chaque page chargée. Les possibilités sont infinies, mais à titre d'exemple, rendons ce texte vert dans l'application :

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

Nous pouvons maintenant configurer ce JavaScript pour qu'il soit injecté :

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

Ou encore, ce CSS à injecter :

#red-text {
    color: green !important;
}
Une capture d'écran de la personnalisation du site web remplie.

Comme vous pouvez le constater, cela permet également d'avoir un comportement différent sur le site web et sur l'application.

Articles connexes


Un robot humanoïde utilise une loupe pour regarder un smartphone. Le smartphone affiche les lettres PWA, art numérique

Applications Web progressives et applications natives

Vous souhaitez faire passer votre site web à la vitesse supérieure ? Voici comment les applications web progressives se comparent aux applications natives standard et comment transformer votre site web en application.

Un robot humanoïde avec un chronomètre physique supervisant une usine de robots travaillant à des bureaux, art numérique

Nous avons publié les applications de 238 - Voici combien de temps a duré l'évaluation des applications

Nous avons publié un grand nombre d'applications et suivi le temps qu'il a fallu pour les introduire dans les magasins d'applications, y compris les délais de rejet et de resoumission.

Image avec texte : Préparer votre compte développeur Apple pour la mise à jour de votre application existante

Étapes nécessaires pour que nous puissions mettre à jour votre application iOS existante

Ce guide vous explique toutes les étapes à suivre pour nous permettre de mettre à jour votre application déjà publiée dans l'App Store d'Apple.


Auteur Jan Bunk
Écrit par
Jan Bunk

Bonjour, je m'appelle Jan ! J'ai créé webtoapp.design en 2019 alors que j'étudiais l'informatique à l'université. Beaucoup de choses ont changé depuis - non seulement j'ai obtenu mon diplôme, mais ce n'est plus seulement moi qui dirige webtoapp.design. Nous sommes devenus une équipe mondiale, entièrement à distance, et nous avons accumulé beaucoup d'expérience autour du développement et de la publication d'applications. Nous avons créé et publié des centaines d'applications dans les magasins d'applications, où elles ont été téléchargées des centaines de milliers de fois.