Déboguer la couche de données dans les applications WebView

Si votre client ou votre entreprise possède à la fois un site Web et une application WebView, comment différencieriez-vous le trafic entre les deux ? Ou comment distingueriez-vous le trafic entre les navigateurs mobiles et l’application WebView ? Nous pourrions le faire en utilisant la couche de données, qui peut être configurée avec l’aide de votre équipe de développement. Si vous vous demandez si le concept de couche de données s’applique uniquement aux sites Web, vous pourriez être curieux de connaître sa pertinence pour les applications WebView.

Ne t’inquiète pas! Dans ce blog, nous explorerons ce qu’est une application WebView, comment déboguer ou valider les valeurs de couche de données implémentées pour les applications Web et WebView, et comment utiliser Adobe Launch pour capturer ces valeurs et les envoyer à Adobe Analytics.

Mais d’abord, comprenons – Qu’est-ce que WebView ? – Une WebView est un composant qui permet aux développeurs d’incorporer du contenu Web dans une application native. Il fonctionne comme un mini navigateur Web au sein de l’application, affichant le contenu HTML, CSS et JavaScript directement dans l’environnement natif. En termes simples, une application WebView est essentiellement un moyen d’afficher des pages Web au sein d’une application. C’est ainsi que le concept de couche de données, généralement utilisé pour les sites Web, peut également être exploité dans les applications WebView.

En voici quelques-uns Principales fonctionnalités de la vue Web :

Intégration de contenu Web :

• • Chargez des pages Web, du contenu HTML et des applications Web dans votre application native.
  • Affichez le contenu Web externe sans quitter l’application.

Interaction avec le contenu Web :

• • Activez l’interaction avec le contenu Web via les entrées utilisateur, JavaScript et d’autres technologies Web.
  • Fournissez des API pour faciliter la communication entre le contenu Web et l’application native.

Personnalisable :

• • Stylisez et configurez les WebViews pour les aligner sur l’apparence et la convivialité de l’application native.
  • Prend en charge divers paramètres, tels que l’activation de JavaScript, la gestion des cookies et la gestion des événements de navigation.

C’était un bref aperçu des applications WebView. Voyons maintenant comment différencier le trafic entre les applications WebView et les sites Web accessibles sur mobile et sur ordinateur. Pour y parvenir, nous exploiterons la couche de données avec l’aide de notre équipe de développement. Vous disposez peut-être déjà d’une couche de données existante ou vous devrez peut-être en créer une nouvelle.

En savoir plus: Extension des rapports ACS AEM Commons

La principale différence entre l’utilisation de la couche de données dans un site Web et une application WebView réside dans la méthode de test. Sur un site Web, vous pouvez simplement ouvrir l’onglet console, taper « digitalData » et vérifier les valeurs. Cependant, les tests dans une application WebView sont légèrement différents et nous allons apprendre comment procéder.

Dans cet exemple, nous avons déjà implémenté une couche de données (digitalData) qui capture diverses informations lors du chargement de la page. Pour différencier le trafic, nous avons introduit deux nouveaux paramètres qui transmettent des valeurs à chaque chargement de page. Cette approche garantit que l’ensemble du parcours utilisateur est capturé avec les valeurs appropriées, ce qui facilite la différenciation entre les visiteurs, les visites, les pages vues et les autres actions. Nous utiliserons ces deux variables de couche de données :

• • digitalData.page.extraInfo.visitSource: Application/Site Web (la source de la visite sera transmise (comme l’application ou le site Web, si depuis une vue Web, la valeur sera « App », et si depuis n’importe quel navigateur, elle sera « Site Web »))
  • digitalData.page.extraInfo.operatingSystem : Android / iOS (Système d’exploitation de l’application, il peut s’agir d’iOS, d’Android ou de tout autre système d’exploitation sur lequel l’application s’exécute).

En utilisant deux eVars (définis pour expirer lors de la visite) : 1. Visitez la source et 2. WebView OS, nous capturerons les valeurs de la couche de données ci-dessus. Ces eVars seront mappées dans une règle d’affichage de page dans Adobe Launch, de sorte que chaque fois qu’Adobe Analytics capture une page vue, il capture également ces informations.

Une fois cette configuration terminée, nous devons valider la couche de données. Sur un site Web, on peut simplement le vérifier dans la console en tapant « digitalData » pour afficher la couche de données. Pour une application WebView, nous suivrons la même approche, mais avec quelques étapes supplémentaires puisqu’elle se trouve dans un environnement d’application.

Allons donc de ce côté-là et voyons comment nous pouvons y parvenir.

Avant de commencer le débogage de votre application Android ou iOS, nous devons nous assurer que le débogage Webview est activé pour l’application, ce qui peut être effectué avec l’aide de Dev.

• Activez le débogage WebView dans votre application Android
  Vous devez ajouter la ligne de code suivante dans la méthode onCreate de votre application (généralement dans votre activité principale) :

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

• Activez le débogage WebView dans votre application iOS

On Swift side code  “webview.isInspectable = true”

Conditions préalables

• • Appareil Android/iOS
  • Câble USB pour connecter votre appareil Android à votre ordinateur portable.
  • Google Chrome (pour Android) et Safari (pour iOS) installés sur votre ordinateur portable.
  • Application avec débogage Webview activé.

Commençons par l’application Android.

Pour inspecter et déboguer à distance le contenu Web dans une WebView sur un appareil Android, vous pouvez utiliser Chrome DevTools. (chrome://inspecter)

Étape 1 : Connectez un appareil Android à votre appareil

• • Utilisez un câble USB pour connecter votre appareil Android à votre ordinateur portable.
  • Si vous y êtes invité, autorisez le débogage USB sur votre appareil Android.

Activer le débogage USB

Étape 2 : Ouvrez l’outil Chrome Developer sur votre ordinateur

• • Ouvrez Google Chrome.
  • Accédez à chrome://inspect dans la barre d’adresse.
  • Vous devriez voir votre appareil Android connecté répertorié dans la section « Cible à distance ».

Chrome inspecter

Étape 3 : Inspecter le contenu WebView

• • Sur l’appareil mobile, ouvrez l’application que vous souhaitez déboguer, et une fois l’application ouverte, sous la section « Cible distante », elle doit être répertoriée avec le titre de la page Web ou l’URL.
  • Cliquez sur le lien inspecter en regard du contenu WebView que vous souhaitez déboguer. Cela ouvrira une nouvelle fenêtre DevTools, connectée au WebView sur votre appareil Android.

Étape 4 : utiliser Chrome DevTools

• • Dans la fenêtre DevTools, vous pouvez utiliser toutes les fonctionnalités standard de Chrome DevTools pour inspecter et déboguer le contenu Web dans WebView. Cela inclut l’affichage du DOM, la modification du HTML et du CSS, la définition de points d’arrêt et l’inspection de l’activité du réseau.
  • Nous allons donc ouvrir l’onglet console et tout comme nous le faisons sur le Web, nous écrirons « digitalData » pour vérifier la couche de données.

• Dépannage
• Appareil non détecté: Si votre appareil n’est pas détecté, assurez-vous que le débogage USB est activé et que l’appareil est correctement connecté. Vous devrez peut-être installer les pilotes USB appropriés pour votre appareil Android sur votre ordinateur portable.
• Contenu WebView non répertorié: Si le contenu WebView n’est pas répertorié, assurez-vous que le débogage WebView est activé dans votre application et que votre application est actuellement en cours d’exécution.

De même, nous pouvons le faire pour iOS, mais iOS est toujours un peu différent, vous pouvez donc utiliser la fonctionnalité Web Inspector dans Safari sur macOS.

Étape 1 : Activer l’inspecteur Web sur iOS: Accédez à Paramètres > Safari > Avancé et activez Web Inspector.

iOS Activer l’inspecteur Web

Étape 2 : Activez le menu Développement dans Safari sur macOS : Dans Safari, accédez à Paramètres > Avancé et activez l’option « Afficher les fonctionnalités pour les développeurs Web ».

Activer le développeur Web

Étape 3 : connecter un appareil iOS à Mac

Étape 4 : Ouvrez le contenu WebView : Dans le menu Développer de Safari, sélectionnez votre appareil iOS et le contenu WebView que vous souhaitez inspecter.

Contenu de la vue Web

Étape 5 : La fenêtre Web Inspector s’ouvrira, vous permettant d’inspecter et de déboguer le contenu Web.

Félicitations!! J’espère maintenant vous êtes en mesure de valider la couche de données. Parlons maintenant de la manière dont nous pouvons différencier le trafic, en supposant que nous ayons commencé à capturer des données dans Adobe Analytics.

En utilisant deux eVars que nous avons créés ci-dessus 1. Visitez la source 2. WebView OS

Nous allons les utiliser pour créer 3 segments :

1. Trafic provenant uniquement des navigateurs mobiles

Définition du segment – Inclure les hits,

où Source de la visite = Site Web

ET

Type d’appareil mobile = téléphone mobile OU tablette

2. Trafic provenant des navigateurs de bureau/ordinateur portable

Définition du segment – Inclure les hits,

où Source de la visite = Site Web

ET

Exclure les appels

Type d’appareil mobile = téléphone mobile OU tablette

3. Trafic provenant de l’application uniquement

Définition du segment –

Inclure les hits,

où Source de visite = Application

Une fois créé, reportez-vous à une capture d’écran ci-dessous pour voir à quoi ressemblera la différenciation des données, j’ai utilisé Dimension mensuelle, vous pouvez utiliser n’importe quelle dimension requise.

Données Adobe Analytics

Conclusion

Dans ce blog, nous avons exploré les distinctions entre un site Web et une application WebView, en mettant l’accent sur la façon de différencier le trafic en utilisant la couche de données en conjonction avec Adobe Analytics. En implémentant une couche de données qui capture des paramètres spécifiques tels que la source de visite et le système d’exploitation, et en mappant ces valeurs aux eVars Adobe Analytics, vous pouvez distinguer efficacement le trafic provenant des navigateurs mobiles, des navigateurs de bureau et des applications WebView. Nous avons également couvert les étapes nécessaires pour déboguer et valider la couche de données dans les applications WebView Android et iOS. En créant des segments ciblés dans Adobe Analytics, vous pouvez affiner et analyser davantage vos données de trafic, garantissant ainsi que vos analyses reflètent avec précision le comportement des utilisateurs sur toutes les plateformes.

Obtenez des analyses en temps réel dans une vue unifiée pour concevoir vos stratégies commerciales. Planifier un appel avec notre expert Adobe dès aujourd’hui !

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE