Comment ajouter facilement des bannières d'applications intelligentes dans WordPress

De nombreux développeurs d'applications nous ont demandé : existe-t-il un moyen de promouvoir les applications mobiles directement depuis votre site WordPress ? La réponse est oui, et c'est plus facile que vous ne le pensez.

L'une des façons les plus simples de le faire est d'utiliser des bannières d'application intelligentes. Ces bannières apparaissent en haut de votre site Web lorsqu'elles sont consultées sur iPhone et iPad, encourageant les visiteurs à télécharger ou à ouvrir votre application. Vous pouvez même afficher des bannières aux utilisateurs Android en utilisant le bon plugin.

Les bannières d'application intelligentes ne sont pas gênantes comme les pop-ups. Au lieu de cela, elles s'intègrent naturellement à votre site et incitent doucement les visiteurs à télécharger ou à ouvrir votre application. Le résultat ? Plus de téléchargements, un meilleur engagement des utilisateurs et une expérience mobile plus professionnelle.

Nous avons testé diverses méthodes pour ajouter ces bannières à WordPress et avons trouvé deux approches qui fonctionnent parfaitement pour tous les niveaux de compétence.

La première utilise un simple extrait de code pour ajouter la bannière native d'iOS d'Apple, tandis que la seconde utilise un plugin qui prend en charge les appareils iOS et Android avec une personnalisation complète du design. Nous vous guiderons à travers les deux options étape par étape.

TLDR Résumé rapide : Les bannières d'application intelligentes sont des bannières natives d'iOS qui apparaissent dans Safari, encourageant les visiteurs à télécharger ou à ouvrir votre application. Le moyen le plus simple de les ajouter dans WordPress est d'utiliser un plugin gratuit appelé WPCode.

Si vous souhaitez également afficher des bannières aux utilisateurs Android, vous pouvez utiliser le plugin Mobile Smart App Banner, qui prend en charge les deux plateformes et vous permet de personnaliser entièrement le design de la bannière.

Pourquoi ajouter des bannières d'application intelligentes dans WordPress ?

L'utilisation d'une bannière d'application intelligente sur votre site Web WordPress peut vous aider à obtenir plus de téléchargements et d'achats de votre application mobile.

De nombreux propriétaires de sites Web créent une application mobile compagnon où les visiteurs peuvent parcourir leur contenu d'une manière optimisée pour le mobile.

Comme ces applications sont conçues pour les appareils mobiles, elles offrent souvent une meilleure expérience utilisateur. Vous pouvez également afficher des rappels, du contenu personnalisé, des offres, des mises à jour, et plus encore à l'aide de notifications push mobiles. Tout cela signifie plus d'engagement, de conversions et de ventes.

Vous pouvez encourager les utilisateurs d'iPhone et d'iPad à télécharger votre application mobile à l'aide d'une bannière d'application intelligente.

Il s'agit d'une bannière qui apparaît en haut de l'écran lorsqu'un utilisateur iOS visite votre site à l'aide du navigateur Safari.

Les visiteurs peuvent cliquer sur la bannière pour télécharger votre application depuis l'App Store. Si le visiteur possède déjà votre application, la bannière lui demandera de l'ouvrir à la place. De cette façon, vous pouvez obtenir plus de téléchargements et d'engagement d'applications.

Si le visiteur utilise un appareil non Apple ou un navigateur Web différent, la bannière d'application intelligente native d'Apple n'apparaîtra pas.

Cependant, comme nous vous le montrerons dans la méthode 2, vous pouvez utiliser un plugin pour afficher des bannières de téléchargement d'applications aux utilisateurs Android et aux visiteurs utilisant d'autres navigateurs.

Cela étant dit, voyons comment ajouter des bannières d'application intelligentes dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Utiliser WPCode (Afficher une bannière d'application intelligente sur tout WordPress)

Le moyen le plus simple d'ajouter des bannières d'application intelligentes à votre site WordPress est d'utiliser WPCode. Ce plugin gratuit vous permet d'afficher la même bannière sur chaque page et article à l'aide d'une seule ligne de code.

Lorsque vous ajoutez du code personnalisé à WordPress, certains guides vous demanderont de modifier le fichier functions.php de votre site. Nous ne recommandons pas cela, car même une petite faute de frappe ou une erreur pourrait causer des erreurs WordPress courantes ou même rendre votre site inaccessible.

En utilisant WPCode, vous pouvez ajouter du code personnalisé aux fichiers de votre thème WordPress sans aucun risque. Vous pouvez également activer et désactiver des extraits de code en un clic.

Tout d'abord, vous devez installer et activer le plugin gratuit WPCode. Pour plus d'instructions, veuillez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, allez dans Extraits de code » Ajouter un extrait. Ensuite, cliquez sur le bouton « + Ajouter un extrait personnalisé » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Ensuite, vous devez sélectionner « Extrait HTML » comme type de code dans la liste des options qui apparaissent à l'écran.

Cela vous mènera à la page ‘Créer un extrait personnalisé’, où vous pourrez saisir un nom pour l'extrait de code.

Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.

Pour l'étape suivante, vous devrez connaître l'ID de votre application.

Pour obtenir ces informations, ouvrez un nouvel onglet de navigateur et accédez à la page des outils de marketing des services Apple. Ici, tapez le nom de l'application que vous souhaitez promouvoir et cliquez sur l'icône « Rechercher ».

Pour voir toutes les applications iOS qui correspondent à votre terme de recherche, faites simplement défiler jusqu'à la section « Apps ».

Ici, trouvez l'application que vous souhaitez promouvoir et cliquez dessus.

En bas de l'écran, vous verrez un « Lien de contenu ».

L'ID de l'application est la valeur entre id et ?. Vous aurez besoin de ces informations à l'étape suivante, alors laissez cet onglet ouvert ou notez l'ID de l'application.

Maintenant que vous avez l'ID de l'application, revenez au tableau de bord WordPress.

Vous pouvez maintenant ajouter le snippet suivant dans l'éditeur de code, en remplaçant l'ID de l'application par les informations que vous avez obtenues à l'étape précédente :

<meta name="apple-itunes-app" content="app-id=12345678">

Une fois cela fait, faites défiler jusqu'à la boîte « Insertion ».

Si ce n'est pas déjà sélectionné, cliquez sur « Insertion automatique », puis sélectionnez « En-tête de tout le site » dans le menu déroulant.

Lorsque vous êtes prêt, faites défiler jusqu'en haut de la page et basculez le commutateur « Inactif » sur « Actif ».

Enfin, cliquez simplement sur le bouton « Enregistrer le fragment » pour enregistrer vos modifications.

Maintenant, la bannière d'application intelligente apparaîtra sur votre site Web WordPress.

Comment afficher différentes bannières sur des pages et des articles spécifiques

Comme vous l'avez vu, il est facile d'ajouter une bannière intelligente à WordPress en utilisant WPCode.

Mais que faire si vous voulez promouvoir différentes applications sur différentes pages ?

Par exemple, vous gérez peut-être un blog de style de vie et vous avez une application de recettes que vous souhaitez promouvoir sur vos articles liés à la nourriture. En même temps, vous pourriez avoir une application de fitness que vous souhaitez promouvoir sur vos pages d'entraînement.

Dans ce cas, nous vous recommandons de passer à WPCode Premium (à partir de 49 $/an). Ce plugin dispose d'une logique conditionnelle intelligente qui vous permet de contrôler exactement où chaque extrait de code s'exécute. Cela signifie que vous pouvez créer plusieurs bannières d'application intelligentes, puis les afficher sur n'importe quelle page ou publication. 

Ensuite, faites défiler un peu plus bas jusqu'à la section « Logique conditionnelle intelligente ». 

Après cela, allez dans WPCode » Paramètres dans votre tableau de bord WordPress et entrez votre clé de licence.

Vous pouvez trouver ces informations en vous connectant à votre compte sur le site Web de WPCode, ou en vérifiant l'e-mail de confirmation d'achat que vous avez reçu lors de l'achat de WPCode. 

Une fois cela fait, allez dans Extraits de code » Ajouter un extrait dans votre tableau de bord WordPress. Ici, survolez la section « Ajouter votre code personnalisé ».

Lorsqu'elle apparaît, sélectionnez « Ajouter un extrait personnalisé ».

Dans le panneau suivant, cliquez sur « Extrait HTML ».

Ensuite, donnez un nom descriptif à votre extrait afin de pouvoir identifier facilement l'application qu'il promeut.

Par exemple, vous pourriez le nommer « Bannière d'application intelligente – Application de recettes ».

Dans l'éditeur de code, ajoutez la balise méta pour votre première application.

Assurez-vous de remplacer l'ID de l'application par celui correct pour votre application :

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Ensuite, faites défiler jusqu'à la section « Insertion » et sélectionnez « Insertion automatique », si ce n'est pas déjà fait.

Après cela, ouvrez le menu déroulant « Emplacement » et sélectionnez « En-tête de tout le site ».

Ensuite, faites défiler un peu plus loin jusqu'à la section « Logique conditionnelle intelligente ». 

Ici, cliquez pour activer le paramètre « Activer la logique ».

Il est maintenant temps de créer votre règle de logique conditionnelle intelligente.

Pour commencer, ouvrez le menu déroulant « Conditions » et sélectionnez « Afficher ». Ensuite, cliquez sur « Ajouter un nouveau groupe ».

Après cela, cliquez sur le premier menu déroulant (qui affiche « Connecté » par défaut).

Cela ajoute une section entièrement nouvelle.

Dans le menu de gauche, sélectionnez « Où ».

Ensuite, choisissez « Publication/Page ».

Une fois cela fait, cliquez sur le deuxième menu déroulant et choisissez « Est l'un de », si ce n'est pas déjà fait.

Enfin, cliquez sur le troisième champ et recherchez la page ou la publication spécifique où vous souhaitez afficher cette bannière d'application.

Voulez-vous afficher cette bannière sur plusieurs pages ou publications ? Cliquez simplement sur « Ajouter un nouveau groupe ».

Vous pouvez maintenant répéter ces étapes pour sélectionner des publications ou des pages supplémentaires.

Lorsque vous êtes satisfait de la configuration de cet extrait, faites défiler jusqu'en haut de la page et basculez le commutateur « Inactif » sur « Actif ». Enfin, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos modifications.

Maintenant, répétez ce processus pour chaque application supplémentaire que vous souhaitez promouvoir. 

WPCode affichera désormais la bannière d'application intelligente appropriée en fonction de la page ou de la publication que le visiteur consulte actuellement.

Comment tester le code de la bannière d'application intelligente dans WordPress

La meilleure façon de tester la bannière d'application intelligente est de visiter votre site Web sur un appareil iOS en utilisant l'application mobile Safari. En fait, la bannière d'application intelligente n'apparaîtra même pas si vous essayez de voir la version mobile de votre site WordPress depuis un ordinateur de bureau.

Si vous avez besoin de vérifier rapidement si l'extrait de code fonctionne, une solution de contournement consiste à utiliser l'outil d'inspection de votre navigateur. Il vous permet de voir si le code <meta name> a été inséré dans la section <head> de votre site, ce qui suggère qu'il fonctionne comme prévu.

Pour ce faire, allez sur n'importe quelle page ou article de votre blog WordPress. Ensuite, faites un clic droit n'importe où sur la page et sélectionnez « Inspecter ».

Un nouveau panneau s'ouvrira, affichant tout le code du site.

Trouvez simplement la section <head> et cliquez sur sa flèche pour l'étendre.

Maintenant, recherchez le code <meta name="apple-itunes-app"> que vous avez ajouté à l'étape précédente.

Si vous voyez ce code, alors la bannière d'application intelligente devrait apparaître sur les appareils iOS.

Méthode 2 : Utilisation de Mobile Smart App Banner (Ajouter des bannières pour iOS et Android)

Si vous souhaitez un plugin qui prend en charge les utilisateurs iOS et Android, nous vous recommandons d'utiliser le plugin Mobile Smart App Banner.

C'est un plugin gratuit qui détecte automatiquement l'appareil du visiteur et affiche le lien approprié vers l'App Store. 

La bannière inclut un bouton « Fermer » intégré pour que les visiteurs puissent la masquer, et elle utilise des cookies pour mémoriser cette décision.

Gardez à l'esprit que la bannière n'apparaîtra pas pendant 7 jours après avoir été masquée.

Tout d'abord, vous devrez installer et activer le plugin Mobile Smart App Banner. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Après l'activation, allez dans Paramètres » Mobile Smart App Banner dans votre tableau de bord WordPress.

Ici, cochez la case à côté de l'option « Activer la bannière de l'application » afin d'activer la bannière sur votre site. 

Une fois cela fait, cliquez sur le bouton « Télécharger ».

Ensuite, sélectionnez l'image que vous souhaitez utiliser comme icône de votre application (nous recommandons d'utiliser une image de 512x512px).

Vous pouvez également choisir où la bannière apparaît à l'écran en ouvrant le menu déroulant « Position de la bannière » et en choisissant une option dans la liste.

Nous avons constaté que placer la bannière en bas de l'écran est moins intrusif et peut souvent entraîner un engagement plus élevé.

Après cela, vous pouvez taper le nom de votre application dans le champ « Nom de l'application » et entrer une courte description dans la zone « Sous-titre de l'application ». 

Ensuite, ajoutez le lien de votre App Store et le lien de votre Play Store dans les champs corrects.

Si vous souhaitez modifier l'apparence de la bannière, faites simplement défiler jusqu'à la section « Paramètres de couleur ». 

Ici, vous pouvez modifier la couleur d'arrière-plan, la couleur du bouton, la couleur du texte du bouton, et plus encore, en utilisant les différents paramètres.

Il y a aussi un aperçu en temps réel, vous pouvez donc facilement essayer de nombreux paramètres pour voir ce qui rend le mieux. 

Alternativement, vous pouvez utiliser la bannière intelligente native d'Apple dans Safari, en décochant la case à côté de « Activer la bannière d'application intelligente iOS ».

Vous devrez ensuite entrer votre identifiant App Store, que vous pouvez trouver en utilisant le même processus décrit dans la méthode 1. 

Lorsque cela est activé, les utilisateurs de Safari verront la bannière native d'Apple, tandis que les utilisateurs de Chrome, Firefox et d'autres navigateurs iOS verront votre bannière personnalisée à la place.

Une fois cela fait, faites défiler jusqu'en bas de l'écran et cliquez sur « Enregistrer les modifications » pour rendre votre bannière active.

FAQ sur l'ajout de bannières d'application intelligentes dans WordPress

Si vous avez encore des questions, voici nos FAQ les plus fréquentes sur la façon d'ajouter des bannières intelligentes à votre site web WordPress.

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

Les bannières d'application intelligentes apparaissent en haut du navigateur web Safari et offrent aux utilisateurs d'applications la possibilité d'ouvrir une application ou de la télécharger depuis l'App Store d'Apple.

Comme elles ont été créées par Apple, les bannières d'application intelligentes ont un design cohérent que de nombreux utilisateurs d'iOS reconnaissent. Elles n'apparaissent qu'aux personnes qui utilisent des iPhones et des iPads exécutant iOS 6 ou une version ultérieure.

Pourquoi ma bannière d'application intelligente ne s'affiche-t-elle pas sur mon ordinateur de bureau ?

La bannière d'application intelligente n'apparaîtra pas sur les ordinateurs de bureau, même si vous consultez la version mobile de votre site.

Pour voir la bannière en action, vous devrez visiter votre site sur un iPhone ou un iPad en utilisant l'application mobile Safari.

Pourquoi ne puis-je pas voir la bannière d'application intelligente sur mon iPhone ou mon iPad ?

Les bannières d'application intelligentes n'apparaissent que sur les appareils exécutant iOS 6 ou une version ultérieure lorsque vous utilisez l'application mobile Safari. Si vous ne voyez pas la bannière d'application intelligente, vous devriez commencer par vérifier que vous avez les dernières versions d'iOS et de l'application mobile Safari.

La bannière d'application intelligente détecte également si l'appareil peut prendre en charge l'application et si l'application est disponible dans votre région. Si vous ne voyez pas la bannière d'application intelligente, il est possible que votre appareil n'ait pas réussi l'une de ces vérifications.

Pourquoi la bannière d'application intelligente a-t-elle disparu de Safari ?

Si vous rejetez la bannière en cliquant sur le bouton « x », elle n'apparaîtra plus par défaut.

Selon votre appareil mobile, vous devrez peut-être ouvrir un onglet de navigateur privé, effacer votre cache ou vos cookies, ou effectuer une autre action pour réinitialiser vos paramètres.

Les bannières d'applications intelligentes fonctionnent-elles sur les appareils Android ?

Non, les bannières d'applications intelligentes natives d'Apple sont exclusives aux appareils iOS utilisant le navigateur Safari. Android n'a pas d'équivalent intégré.

Cependant, vous pouvez utiliser un plugin WordPress comme Mobile Smart App Banner pour afficher des bannières de téléchargement d'applications personnalisées aux visiteurs Android.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des bannières d'application intelligentes dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur les bonnes pratiques en matière d'appel à l'action ou nos sélections d'experts pour les meilleurs outils de lead magnet WordPress pour multiplier les conversions.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.