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 nos applications mobiles directement depuis notre 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 élégantes apparaissent de manière transparente en haut de votre site Web lorsqu'elles sont vues sur iPhone et iPad.

Elles 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. Que vous préfériez un plugin ou que vous souhaitiez ajouter du code simple, nous vous guiderons à travers les deux options étape par étape.

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

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.

Étant donné que 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 en utilisant des 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, WordPress masquera automatiquement la bannière pour lui.

Par exemple, l'image suivante montre le même site Web dans le navigateur mobile Chrome.

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)
• Méthode 2 : Utiliser Smart App Banner (Ajouter des bannières à des pages et articles spécifiques)
• FAQ sur l'ajout de bannières d'application intelligentes dans WordPress

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 Web 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.

Dans cette optique, WPCode est le choix idéal si vous souhaitez promouvoir une seule application iOS. Cependant, si vous souhaitez afficher différentes bannières sur différentes pages, nous vous recommandons d'utiliser la méthode 2 à la place.

Lors de l'ajout de code personnalisé à WordPress, certains guides vous demanderont de modifier le fichier functions.php de votre site. Nous ne recommandons pas cela, car une petite faute de frappe ou une erreur pourrait causer des erreurs WordPress courantes, voire 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 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 fragment de code 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 elle n'est pas déjà sélectionnée, cliquez sur « Insertion automatique » puis sélectionnez « En-tête du 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.

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

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 visualiser la version mobile de votre site WordPress depuis un ordinateur de bureau.

Si vous avez besoin de vérifier rapidement si le fragment de code fonctionne, une solution de contournement consiste à utiliser l'outil Inspecter 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 publication 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 : Utiliser Smart App Banner (Ajouter des bannières à des pages et articles spécifiques)

Parfois, vous voudrez peut-être seulement promouvoir des applications sur des pages et des publications spécifiques.

Dans ce cas, nous vous recommandons d'utiliser le plugin Smart App Banner. Ce plugin vous permet d'afficher différentes bannières sur différentes pages Web et d'inclure des données d'affiliation dans ces bannières. Ces fonctionnalités en font un excellent plugin pour les spécialistes du marketing d'affiliation.

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

Une fois activé, vous pouvez ajouter une bannière d'application à des pages ou des articles spécifiques, à la page d'accueil WordPress, ou sur l'ensemble de votre site web.

Pour commencer, examinons les paramètres de l'application. Ici, vous pouvez ajouter une bannière à chaque page et article ou ajouter une bannière d'application intelligente uniquement aux pages de destination à forte conversion.

Pour commencer, allez dans Paramètres » Bannière d'application intelligente et tapez la valeur de l'application dans le champ « ID de l'application ».

Vous pouvez obtenir ces informations en suivant le même processus décrit dans la méthode 1.

Si vous utilisez le marketing d'affiliation pour gagner de l'argent en ligne en bloguant, vous pouvez alors taper votre jeton d'affiliation dans le champ « Données d'affiliation ». Les informations varieront, vous devrez donc peut-être vous connecter à votre portail d'affiliation ou parler à vos partenaires pour obtenir le bon jeton.

Après cela, vous pouvez cocher la case « Afficher sur toutes les pages » ou la laisser décochée. Si vous laissez la case décochée, la bannière de l'application n'apparaîtra que sur votre page d'accueil.

Lorsque vous êtes satisfait de la configuration de la bannière, cliquez simplement sur le bouton « Enregistrer les modifications » pour la rendre active.

Voulez-vous ajouter une bannière d'application intelligente à des pages et des articles spécifiques à la place ? Cela vous permet de contrôler exactement où la bannière apparaît sur votre site web.

Par exemple, si vous êtes un marketeur affilié, vous pourriez promouvoir différentes applications sur différentes pages, puis utiliser Google Analytics pour voir quelles bannières génèrent le plus de conversions.

Pour ce faire, ouvrez simplement la page ou l'article où vous souhaitez ajouter la bannière. Trouvez maintenant la nouvelle section « Bannière d'application intelligente » dans l'éditeur de contenu WordPress.

Ici, ajoutez simplement l'identifiant de l'application et les informations d'affiliation facultatives en suivant le même processus décrit ci-dessus.

Lorsque vous êtes satisfait des informations que vous avez saisies, cliquez simplement sur « Mettre à jour » ou « Publier » pour rendre vos modifications actives.

Ensuite, vous pouvez simplement répéter ces étapes pour ajouter une bannière d'application intelligente à vos autres pages de destination.

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.

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 meilleures pratiques pour les appels à l'action (CTA) ou nos meilleurs choix pour les meilleurs outils de lead magnet WordPress pour faire exploser les conversions.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.