Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Vous souhaitez ajouter des bannières d’applications intelligentes dans WordPress ?

Les bannières intelligentes sont un moyen facile de promouvoir votre appli mobile et d’inciter les internautes à la télécharger. Si un utilisateur iOS possède déjà votre appli, alors la bannière l’incitera à ouvrir l’appli pour une meilleure expérience utilisateur.

Dans cet article, nous allons vous afficher comment ajouter des bannières d’applications intelligentes sur WordPress.

How to add smart app banners in WordPress (easy)

Pourquoi ajouter des bannières d’applications intelligentes dans WordPress ?

De nombreux propriétaires de sites web créent une application mobile d’accompagnement où les internautes peuvent parcourir leur contenu de manière optimisée pour le mobile.

Comme ces apps sont conçues pour les appareils mobiles, elles offrent souvent un meilleur compte/utilisatrices. Vous pouvez également afficher des rappels, du contenu personnalisé, des offres, des mises à jour et bien plus encore à l’aide des notifications push mobiles. Tout cela se traduit par une augmentation de l’engagement, des conversions et des ventes.

Si vous n’avez pas encore d’application mobile, alors vous pouvez consulter notre guide terminé sur la conversion d’un site WordPress en application mobile.

Vous pouvez encourager les utilisateurs/utilisatrices 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.

An example of a smart app banner on a WordPress website

Les internautes peuvent cliquer sur la bannière pour télécharger votre application depuis l’App Store. Si l’internaute possède déjà votre app, alors la bannière lui demandera d’ouvrir l’app à la place. De cette manière, vous pouvez augmenter le nombre de téléchargements d’applications et l’engagement.

Si l’internaute utilise un appareil qui n’appartient pas à Apple ou un navigateur web différent, alors WordPress lui masquera automatiquement la bannière.

Par exemple, l’image suivante affiche le même site dans le navigateur mobile Chrome.

A hidden smart app banner.

Ceci étant dit, voyons comment vous pouvez ajouter des bannières d’applications intelligentes dans WordPress. Il suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Utiliser WPCode (Afficher une bannière Smart App à travers WordPress)

La façon la plus simple d’ajouter des bannières d’applications intelligentes à votre site WordPress est d’utiliser WPCode. Cette extension gratuite vous permet d’afficher la même bannière sur chaque page et publication en utilisant une ligne de code.

Dans cette optique, WPCode est le choix parfait si vous souhaitez promouvoir une seule application iOS. Cependant, si vous souhaitez afficher différentes bannières sur différentes pages, alors nous vous recommandons plutôt d’utiliser la méthode 2.

Lorsque vous ajoutez du code personnalisé à WordPress, certains guides vous demanderont de modifier le fichier functions.php de votre site. Nous ne le recommandons pas, car même une petite faute de frappe ou une erreur peut provoquer des erreurs courantes sur WordPress 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 les extraits de code en cliquant sur un bouton.

Tout d’abord, vous devez installer et activer l’extension gratuite WPCode. Pour plus d’instructions, veuillez consulter notre guide pour débutants sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous dans la rubrique Extraits de code  » Ajouter un extrait. Cliquez ensuite sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Adding an iOS smart app banner to WordPress

Vous accéderez à la page « Créer un extrait personnalisé », où vous pourrez saisir un nom pour l’extrait de code. Il s’agit d’un nom de référence, vous pouvez donc utiliser ce que vous voulez.

Ensuite, ouvrez le menu déroulant « Type de code » et choisissez « Extrait HTML ».

Creating an Apple app banner using WPCode

Pour l’étape par étape, vous devez connaître l’ID de votre demande.

Pour obtenir ces informations, ouvrez un nouvel onglet de navigateur et rendez-vous sur la page des outils marketing des services Apple. Tapez-y le nom de l’application que vous souhaitez promouvoir et cliquez sur l’icône « Rechercher ».

The App Marketing Tools website

Pour voir toutes les apps iOS correspondant à votre terme de recherche, il vous suffit de défiler jusqu’à la section  » Apps « .

Ici, trouvez l’appli que vous voulez promouvoir et donnez-lui un clic.

Getting the app ID for an iPhone or iPad iOS app

En bas de l’écran, vous verrez un « Content Link » (lien vers le contenu).

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

An Apple App ID

Maintenant que vous avez l’ID de l’application, retournez dans le Tableau de bord WordPress. Vous pouvez maintenant ajouter l’extrait de code suivant dans l’éditeur/éditrices, en remplaçant l’ID de l’app par les informations que vous avez obtenues à l’étape précédente :

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

Cela fait, vous devez défiler jusqu’à la case « 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.

Adding custom code to the WordPress theme header

Lorsque vous êtes prêt, défilez vers le haut de la page et permutez le commutateur « Inactif » sur « Actif ».

Enfin, cliquez sur le bouton « Enregistrer l’extrait » pour stocker vos modifications.

Publishing a smart app banner to WordPress

Maintenant, la bannière de l’application intelligente apparaîtra sur votre site WordPress.

Comment tester le code de la bannière Smart App dans WordPress

La meilleure façon de tester la bannière smart app est de visiter votre site sur un appareil iOS en utilisant l’application mobile Safari. En fait, la bannière smart app 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 consiste à utiliser l’outil Inspect de votre navigateur. Il vous permet de voir si le code <nom Meta> a été inséré dans la section <head>de votre site, ce qui suggère qu’il fonctionne comme prévu.

Pour ce faire, accédez à n’importe quelle page ou publication de votre blog WordPress. Cliquez ensuite avec le bouton droit de la souris n’importe où sur la page et sélectionnez « Inspecter ».

The Google Chrome Inspect tool

Un nouveau panneau s’ouvre, affichant tout le code du site.

Il suffit de trouver la section <head> et de cliquer sur sa flèche pour la déplier.

Apple app code in the WordPress header

Recherchez maintenant le code <meta name="apple-itunes-app"> que vous avez ajouté à l’étape par étape.

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

Testing the Apple smart app banner code

Méthode 2 : Utiliser Smart App Banner (Ajouter des bannières à des pages et publications spécifiques)

Parfois, vous pouvez vouloir promouvoir uniquement des apps sur des pages et des publications spécifiques. Par exemple, vous n’afficherez généralement pas de bannière d’application intelligente sur les pages de vente et les pages d’atterrissage, car la bannière pourrait détourner l’attention de l’appel à l’action principal.

Vous pouvez même afficher différentes bannières sur différentes parties de votre site. Par exemple, si vous êtes un spécialiste du marketing d’affiliation, vous avez peut-être une liste d’applications à promouvoir.

Dans ce cas, nous vous recommandons d’utiliser l’extension Smart App Banner. Cette extension 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 une excellente extension pour les spécialistes du marketing d’affiliation.

Tout d’abord, vous devrez installer et activer l’extension Smart App Banner. Si vous avez besoin d’aide, veuillez consulter notre guide sur l’installation d’une extension WordPress.

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

Pour commencer, jetons un coup d’œil aux Réglages de l’appli. Ici, vous pouvez ajouter une bannière à chaque page et publication ou ajouter une bannière d’application intelligente à votre page d’accueil uniquement.

Pour commencer, allez dans Réglages  » Smart App Banner et tapez la valeur de l’application dans le champ ‘App ID’.

Adding an app ID to a WordPress plugin

Vous pouvez obtenir ces informations en suivant la même procédure que celle décrite dans la méthode 1.

Si vous utilisez le marketing d’affiliation pour gagner de l’argent sur votre blog, vous pouvez saisir votre jeton d’affiliation dans le champ « Données d’affiliation ». Les informations varient, vous devrez donc peut-être vous connecter à votre portail d’affiliation ou vous adresser à vos partenaires pour obtenir le bon jeton.

Ensuite, vous pouvez soit cocher la case « Afficher sur toutes les pages », soit la laisser décochée. Si vous ne cochez pas la case, la bannière de l’application apparaîtra uniquement sur votre page d’accueil.

Showing a smart app banner across your WordPress blog or website

Lorsque vous êtes satisfait de la façon dont la bannière est configurée, il vous suffit de cliquer sur le bouton « Enregistrer les modifications » pour la mettre en direct.

Vous souhaitez plutôt ajouter une bannière d’application intelligente à des pages et publications spécifiques ? Cela vous permet de contrôler exactement où la bannière apparaît sur votre site.

Par exemple, si vous êtes un spécialiste du marketing d’affiliation, vous pouvez promouvoir différentes applications sur différentes pages, puis utiliser Google Analytics pour voir quelles bannières obtiennent le plus de conversions.

Pour ce faire, il suffit d’ouvrir la page ou la publication où vous souhaitez ajouter la bannière. Maintenant, trouvez la nouvelle section  » Smart App Banner  » dans l’éditeur de contenu de WordPress.

Adding a smart app banner to a WordPress page or post

Ici, il suffit d’ajouter l’ID de l’app et les informations facultatives sur l’affiliation en suivant le même processus décrit ci-dessus.

Lorsque les informations saisies vous conviennent, il vous suffit de cliquer sur « Mettre à jour » ou « Publier » pour que vos modifications soient directes.

An example of a smart app banner on a WordPress blog or website

Ensuite, vous pouvez simplement répéter ces étapes pour ajouter une bannière d’application intelligente à d’autres publications et pages WordPress.

FAQs sur l’Ajout de Bannières d’Applications Intelligentes dans WordPress

Dans ce guide, nous vous avons affiché comment promouvoir votre application mobile sur des publications et des pages spécifiques ou sur l’ensemble de votre site WordPress.

Si vous avez encore des questions, alors voici nos principales FAQ sur la façon d’ajouter des bannières intelligentes à votre site WordPress.

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

Les bannières d’applis intelligentes apparaissent en haut du navigateur web Safari et donnent aux utilisateurs/utilisatrices d’applis l’option d’ouvrir une appli ou de la télécharger depuis l’App Store d’Apple.

Comme elles ont été créées par Apple, les bannières d’applications intelligentes ont un design cohérent que de nombreux utilisateurs/utilisatrices d’iOS reconnaissent. Elles apparaissent uniquement aux personnes qui utilisent des iPhones et des iPads fonctionnant sous iOS 6 ou supérieur.

Pourquoi ne puis-je pas voir la bannière de mon application intelligente sur l’ordinateur ?

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

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

Pourquoi la bannière de l’application intelligente ne s’affiche-t-elle pas sur mon iPhone ou mon iPad ?

Les bannières d’applications intelligentes apparaissent uniquement sur les appareils fonctionnant sous iOS 6 ou une version plus récente lorsque vous utilisez l’application mobile Safari. Si vous ne voyez pas la bannière de l’application intelligente, commencez par vérifier que vous disposez des dernières versions d’iOS et de l’application mobile Safari.

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

Pourquoi la bannière de l’application intelligente a-t-elle disparu dans Safari ?

Si vous ignorez 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é, vider votre cache ou vos cookies, ou effectuer une autre action pour réinitialiser vos réglages.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des bannières d’applications intelligentes sur WordPress. Vous voudrez peut-être aussi voir notre guide ultime étape par étape sur le référencement WordPress ou nos choix d’experts pour les meilleures extensions de fenêtres surgissantes WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

6 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Is there a similar option for Android device owners, or is it only for the Apple store? I write articles on the topic of Android and this would really come in handy.

      • Jiří Vaněk says

        I’m sorry because my articles are mostly about Android. But thank you for your response, and I’ll try to find an equivalent plugin for Android and Google Play.

  3. Ralph says

    I didn’t know such thing… is a thing :)
    I have technical blog and often get offers of promoting apps for money in my articles and this is great way to do this. Especially that we get more and more mobile traffic. I used to have 60% mobile 40% desktop, but now it is 75% mobile and still growing trend.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.