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

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

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 :

À 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

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
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]

   

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.

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.");
}
    

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;
}

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