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

Il existe de nombreux cas où il peut être utile de différencier une personne qui consulte votre site web dans le navigateur et une personne qui le consulte via votre application. Peut-être souhaitez-vous analyser comment votre application est adoptée par les utilisateurs ou vous voulez montrer un contenu différent aux utilisateurs de l'application.

Tout comme il existe plusieurs cas d'utilisation, il existe également plusieurs façons d'atteindre cet objectif. Passons-les en revue une par une.

Basé sur l'agent utilisateur

L'agent utilisateur est une courte chaîne que le navigateur envoie aux sites web chaque fois qu'il charge une page. L'agent utilisateur contient des informations sur le navigateur, par exemple un navigateur Firefox pourrait envoyer un agent utilisateur comme celui-ci :

À partir de cela, 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
  C'est l'agent utilisateur typique utilisé par le navigateur interne de l'application (qui affiche votre site web à l'intérieur de l'application). Les requêtes effectuées 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 est désactivé par défaut de nos jours, vous ne verrez donc probablement pas beaucoup de requêtes 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

Donc, un exemple d'agent utilisateur que l'application pourrait utiliser sur iOS serait : 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

En se basant sur le 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 vérifier si l'agent utilisateur contient également "(android)" ou "(ios)".

Exemple : Affichage de contenu différent sur un site web WordPress

Avec l'éditeur WordPress par défaut

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 d'utilisation) :

1. Installez le plugin sur votre site web. Veuillez noter que nous ne sommes pas affiliés au plugin ou à son développeur, nous l'avons simplement testé et il semblait être gratuit et fonctionnait bien.
2. Sur la page des paramètres du plugin, ajoutez un nouveau type avec ces paramètres :
   • Nom du type : App
   • Attribut du shortcode : 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 tout le monde.
   
   [agentsw ua='app']
   Ce texte n'est visible que par les utilisateurs de l'application !
   [/agentsw]

   

Avec Elementor

Si vous utilisez Elementor, vous pouvez utiliser à la place le plugin gratuit Powerpack avec le plugin d'extension powerpack-webtoapp. Voici comment cela fonctionne :

1. Installez le plugin Powerpack via la boutique WordPress.
2. Téléchargez le plugin powerpack-webtoapp sous forme de fichier zip et installez-le.
   Le plugin powerpack-webtoapp (et l'idée d'utiliser Powerpack sur les sites Elementor) a été créé par ALL IN APPLI. Ils utilisent le plugin pour gérer plusieurs applications webtoapp.design et ont généreusement décidé de le partager.
3. Vous pouvez maintenant définir des éléments spécifiques à afficher uniquement dans l'application.

En utilisant JavaScript

Basé sur l'agent utilisateur

Bien sûr, vous pouvez non seulement vérifier l'agent utilisateur côté serveur (comme détaillé dans la section précédente), mais aussi en JavaScript.

Voici un exemple de la façon 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 petites modifications invisibles au HTML du site web qui sont nécessaires pour certaines fonctionnalités de l'application. Nous pouvons également utiliser ces modifications pour détecter si la page a été chargée par l'application.

Comme cela est un peu délicat, nous vous recommandons d'utiliser executeWhenAppReady du script d'assistance de l'application. Vous pouvez ensuite mettre n'importe quel code à l'intérieur de la fonction executeWhenAppReady, et il ne sera exécuté que si la page a été chargée par l'application. Un léger 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 tout JavaScript ou CSS que l'application doit injecter dans chaque page chargée. Les possibilités sont infinies avec cela, 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 pourrions maintenant configurer ce JavaScript à injecter :

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

Ou alternativement, ce CSS à injecter :

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

Comme vous pouvez le voir, cela fonctionne également comme un moyen d'avoir un comportement différent sur le site web que dans l'application.