Bannière intelligenteJourneysWeb App

Comment configurer une bannière d’application intelligente dans iOS et Android

By octobre 30, 2017 No Comments

Il est bien connu, depuis quelques temps , que les utilisateurs préfèrent les applications mobiles natives aux sites Web mobiles. Cependant, la liaison ciblée vers et à partir des applications n’est pas aussi solide qu’elle le devrait par rapport au Web, aussi les sites Web jouent-ils un rôle toujours aussi important dans l’utilisation du téléphone portable, en particulier en ce qui concerne la découverte de nouvelles applications.

Par exemple, imaginez qu’un utilisateur partage un article de votre application sur Facebook et qu’un certain nombre de visiteurs cliquent sur cet article. Si vous les emmenez à la page App Store correspondante au lieu de leur présenter l’article, il y aura de nombreux mécontents qui se contenteront de fermer le magasin d’applications et retourneront sur Facebook. C’est là qu’un site mobile avec une bannière d’application intelligente peut entrer en jeu.

Qu’est-ce qu’une bannière d’application intelligente?

Une bannière intelligente mobile utilise une fraction de l’écran d’un site Web mobile pour informer les utilisateurs sur l’application native, les inciter à l’ouvrir ou à l’installer s’ils ne l’ont pas fait. Il s’agit d’un lien intelligent qui comprend toute la logique de routage nécessaire à l’ouverture automatique de l’application lorsqu’elle est installée ou revient à une page App Store dans le cas inverse.

Smart App Banner ExampleComme vous pouvez le constater, le contenu de la page reste disponible sur la page de ce site mobile même sans l’application, mais la bannière en haut de l’écran propose de télécharger ou d’ouvrir l’application si l’utilisateur le décide. Pour les nouveaux utilisateurs, la présentation d’un site mobile avec une bannière fournit un modèle d’intégration clair et discret, dans lequel ils peuvent interagir avec votre site Web mobile et se convertir en parfaits utilisateurs de l’application lorsqu’ils y sont prêts.

Que fait la bannière d’application intelligente d’Apple dans iOS?

Dans iOS 6, Apple a lancé une bannière d’application intelligente entièrement intégrée dans Safari. Son aspect et son comportement ont évolué depuis lors par rapport à ce que pouvez voir ci-dessous, mais son fonctionnement reste le même.

Smart app banner on iOS

Deux réactions différentes peuvent se produire lorsque vous cliquez sur cette bannière. Si l’application est installée, la bannière s’ouvre en appelant son schéma URI grâce aux paramètres de la liaison ciblée d’accompagnement. Si l’application n’est pas installée, la bannière dirige l’utilisateur vers sa page App Store.

La bannière d’Apple dispose de certaines caractéristiques uniques qui ne peuvent pas être facilement reproduites par les bannières intelligentes des autres tiers:

  1. L’appel à l’action Afficher se changera toujours en Ouvrir si iOS détecte que l’application est installée.

  2. Lors du téléchargement de l’application, la bannière intelligente affichera une barre de progression.

Elle présente également des restrictions importantes:

  1. Elle ne fonctionne que sur Safari dans iOS.

  2. La mise en page, la couleur et le contenu ne peuvent pas être modifiés

  3. Aucun suivi des clics ni des téléchargements
  4. La liaison ciblée (qui dirige les utilisateurs vers un contenu spécifique) ne fonctionne que si l’application est déjà installée.

Existe-t-il une bannière d’application intelligente pour Android?

À cause de la fragmentation de l’écosystème et du choix du navigateur Android, Google n’a jamais lancé de bannière intelligente pour Android. Tous les développeurs Android ont dû déployer les leurs eux-mêmes ou adapter les solutions existant déjà. Cela représente une terrible prise de tête si vous êtes un développeur mobile qui a œuvré à la fois sur Android et iOS et qui souhaite une certaine cohérence dans l’évaluation du comportement et de l’attribution.

L’introduction de la bannière intelligente iOS par Apple a poussé les tiers à développer des options différentes compatibles avec Android. Malheureusement, les progrès de ces alternatives sont au point mort ces dernières années, laissant les développeurs démunis une fois de plus. Voici quelques-uns des exemples les plus connus:

  1. Le plug-in de la bannière d’application intelligente pour jQquery https://github.com/jasny/jquery.smartbanner (plus conservé)
  2. La bannière d’application intelligente sans obligation de jQueryhttps://github.com/kudago/smart-app-banner

La bannière d’application intelligente multi-plateformes Branch

Des dizaines de milliers d’applications utilisent Branch chaque jour pour la liaison de leurs applications, utilisant à la fois les liaisons générées dynamiquement à partir des kits SDK natifs iOS/Android et les liaisons de commercialisation créées sur le tableau de bord Branch. Ces liaisons fonctionnent avec tous les systèmes d’exploitation et dans tous les navigateurs pour diriger les utilisateurs vers votre application ou vers le magasin d’applications, en fonction de la situation.

En nous appuyant sur cette expertise, nous avons créé une bannière d’application intelligente de liaison ciblée entièrement personnalisable, multi-plateformes et traçable. Elle fonctionne dans tous les navigateurs, y compris les navigateurs Safari, Chrome, Firefox, et ceux d’origine Android.

Exemple de bannière Branch sur iOS:

smartbanner-blog3-cut_1.png

Exemple de bannière Branch sur le bureau: 

desktop_banner1.png

En utilisant une bannière d’application intelligente Branch, vous obtenez la fonctionnalité complète de la bannière d’application intelligente d’Apple pour iOS plus ces caractéristiques fantastiques:

 

  1. Routage intelligent vers l’application ou vers le bon App Store.

Lorsque vous cliquez sur la bannière et si l’application est effectivement installée, la bannière ouvre l’application. Si l’application n’est pas installée, la bannière vous dirige vers la page App Store appropriée.

  1. Support multi-plateformes

Fonctionne dans tous les navigateurs mobiles et avec tous les systèmes d’exploitation mobiles. Créez facilement une bannière intelligente pour iOS ou une bannière intelligente pour Android et utilisez-la partout.

  1. Détection d’application installée

Si vous disposez du kit SDK Branch dans votre application et si l’utilisateur l’a ouvert au moins une fois, nous sommes en mesure de transformer automatiquement l’appel à l’action Installer en Ouvrir tout comme Apple ou permettre l’adaptation des messages d’appel à l’action respectifs.

  1. Ciblage personnalisé du public

Moduler l’aspect et le comportement de la bannière intelligente ainsi que l’appel à l’action, sur la base des comportements spécifiques de vos utilisateurs à la fois dans le Web mobile et dans votre application. Par exemple, utilisez une bannière différente pour la plupart des utilisateurs actifs

  1. Test A/B

Sans changer aucun code de votre page, exécutez des tests pour définir l’optimisation du ciblage du public par la bannière intelligente et la créativité pour stimuler la conversion la plus importante aux installations de nouvelles applications ainsi qu’aux ré-ouvertures des applications.

  1. Suivi du téléchargement

Sur le tableau de bord Branch, nous fournissons des outils d’analyse diversifiés pour savoir combien de personnes ont visualisé et cliqué sur la bannière et combien ont installé ou ouvert l’application. Cela vous renseigne sur le taux de réussite de conversion de la page Web et vous aide à optimiser vos efforts de croissance.

  1. Liaison ciblée

Vous pouvez spécifier un dictionnaire des données que vous voulez introduire dans l’application afin de pouvoir diriger l’utilisateur vers un produit spécifique ou vers un élément du contenu de l’application également appelée liaison ciblée. La précision de correspondance de pointe de Branch signifie que vous recevez ces paramètres de liaison ciblée même lors de la première installation à partir d’un magasin d’applications, afin de pouvoir adapter le flux d’embarquement à tous les utilisateurs qu’ils soient nouvellement acquis ou qu’ils se réengagent.

  1. Créativité personnalisable de la bannière d’application intelligente au niveau de la mise en page, de la couleur, du contenu et des icônes

ue ce soit pour soutenir l’aspect et le comportement d’origine de votre site Web mobile ou simplement pour personnaliser l’expérience, les itinéraires Branch vous permettent de personnaliser tous les aspects visuels de votre bannière à l’aide de l’éditeur graphique ou de modifier directement le CSS. Cela inclut le titre, la description, les boutons d’appel à l’action, le classement par étoiles et le nombre de vues répétées de l’application. Tout est ajustable pour s’adapter au design de votre site.

Guide de configuration de la bannière d’application intelligente universelle avec Journeys

Branch propose également des Journeys, , une solution optimale qui vous permet de créer sans code des ressources d’application telles que les bannières intelligentes et de les déployer sur le Web. Avec Journeys, les marques peuvent:

1. Créer un nombre illimité d’audiences potentielles sur la base des activités sur le Web et dans l’application, du site de référence, du système d’exploitation et plus encore.

2. Sélectionner un certain nombre de modèles pré-construits et disposer d’un contrôle total sur la mise en page et le design des ressources.

3. Observer la performance en temps réel segmentée par parcours. Réattribuer aux parcours les actions qui ont suivi l’entonnoir du général au particulier. Mettre en œuvre des améliorations sans modifier le code.

Guide de configuration de la bannière d’application intelligente universelle

Il est très facile de démarrer avec la bannière d’application intelligente pour Journeys Branch. Voici un guide étape par étape.

 

Étape 1: Configurer le routage de votre liaison

Rendez-vous d’abord sur https://start.branch.io et suivez les instructions. Vous définissez tous les différents points de terminaison afin que Branch sache où rediriger l’utilisateur quel que soit le scénario.

Étape 2: Ajoutez le kit SDK du Web sur votre site

Ensuite, récupérez votre clé Branch à partir du tableau de bord sur https://dashboard.branch.io/#/settings Collez l’extrait de code ci-dessous dans les balises Javascript de votre site. Ajoutez la clé que vous avez récupérée dans la page Paramètres de la section YOUR-BRANCH-KEY.

Étape 3: Configurez votre bannière d’application intelligente pour Journeys

Rendez-vous à la Journeys section du tableau de bord Branch et suivez l’assistant de configuration de votre bannière d’application intelligente. Vous pouvez également trouver Journeys documentation complète sur les parcours dans le portail de votre développeur..

Étape 4: Configurez votre application iOS ou Android pour la liaison ciblée

Enfin, vous pouvez configurer votre application native pour la liaison ciblée différée et installer très facilement le système de suivi en suivant les instructions d’intégration situées sur ce site pour iOS ou Android.

C’est fait!