Les notifications d'onglet de navigateur sont l'une de ces fonctionnalités simples mais efficaces qui maintiennent discrètement l'engagement des visiteurs et les encouragent à revenir.
Par exemple, WPForms utilise cela pour rappeler gentiment aux utilisateurs de revenir et de terminer leur achat lorsqu'ils changent d'onglet. C'est subtil, non intrusif et peut augmenter les taux de conversion sur votre site.
Dans ce guide, nous vous montrerons comment ajouter facilement ces notifications d'onglet qui attirent l'attention à votre site WordPress. 🙌
Une fois que vous l'aurez essayé, vous comprendrez pourquoi c'est un outil si utile pour maintenir l'attention des visiteurs et les faire revenir.
💡 Réponse rapide : Comment ajouter des notifications d'onglet de navigateur
La façon la plus sûre d'ajouter des notifications d'onglet de navigateur est d'utiliser le plugin WPCode. Il vous permet d'insérer du JavaScript personnalisé sans modifier les fichiers du thème.
Ce guide couvre trois types spécifiques :
- Type 1 (Nombre de notifications) : Affiche un nombre dynamique dans le titre de l'onglet (par exemple, « (1) Nouveau message ») pour simuler une activité.
- Type 2 (Alerte favicon) : Remplace votre icône de site par une image différente pour attirer l'attention visuelle lorsque l'utilisateur quitte l'onglet.
- Type 3 (Message personnalisé) : Modifie le titre de la page avec une phrase comme « N'oubliez pas de jeter un œil ! » pour inciter les visiteurs à revenir.
Qu'est-ce qu'une notification d'onglet de navigateur ?
Une notification d'onglet de navigateur est un message qui apparaît dans l'onglet de votre site Web lorsqu'un de nos visiteurs consulte un autre site dans son navigateur.
En ajoutant une fonctionnalité de notification d'onglet de navigateur sur votre site Web WordPress, vous pouvez attirer l'attention de l'utilisateur au moment où il ouvre un autre onglet pour quitter votre page.
Par exemple, vous pouvez changer la favicon de votre site Web, l'animer, écrire un message personnalisé ou simplement faire clignoter l'onglet.
Si vous avez une boutique en ligne, les notifications d'onglet de navigateur peuvent vraiment vous aider. Ces notifications ramèneront les clients distraits, réduiront les taux d'abandon de panier et augmenteront l'engagement client.
En utilisant cette fonctionnalité, vous pouvez alerter vos clients sur l'abandon de panier ou même offrir une réduction s'ils reportent leur attention sur votre site.
Voici un exemple de notification d'onglet de navigateur.
Cela dit, nous allons vous montrer comment ajouter facilement différents types de notifications d'onglets de navigateur dans WordPress.
Vous pouvez utiliser les liens ci-dessous pour accéder à la méthode de votre choix :
- Installez WPCode pour ajouter des notifications d'onglets de navigateur
- Type 1 : Afficher les nouvelles mises à jour comme notification d'onglet de navigateur
- Type 2 : Changer les favicons comme notification d'onglet de navigateur
- Type 3 : Changer le titre du site comme notification d'onglet de navigateur
- Bonus : Ajoutez des notifications push web à votre site WordPress
- Questions fréquemment posées sur l'ajout de notifications d'onglet de navigateur
Installez WPCode pour ajouter des notifications d'onglets de navigateur
Vous pouvez facilement ajouter des notifications d'onglet de navigateur sur votre site en ajoutant du code personnalisé dans WordPress. Habituellement, vous devez modifier le fichier functions.php de votre thème, mais même une petite erreur peut casser votre site Web.
C'est pourquoi nous recommandons d'utiliser WPCode, qui est le meilleur plugin d'extraits de code WordPress sur le marché.
Nous avons constaté que c'est le moyen le plus sûr et le plus simple d'ajouter du code personnalisé à votre site. Pour plus de détails, consultez notre avis sur WPCode.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus de détails, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.
🚨Remarque : WPCode dispose également d'une version gratuite que vous pouvez utiliser pour ce tutoriel. Cependant, la mise à niveau vers le plan payant vous donnera accès à plus de fonctionnalités.
Après l'activation, visitez la page Extraits de code » + Ajouter un extrait depuis la barre latérale d'administration de votre WordPress.
Maintenant, survolez l'option « Ajouter votre code personnalisé (Nouvel extrait) » avec votre souris et cliquez sur le bouton « + Ajouter un extrait personnalisé » en dessous.
Sélectionnez ensuite le type de code dans la liste des options à l'écran.
Après cela, vous serez dirigé vers la page « Créer un extrait personnalisé ».
Quel que soit le type de notification d'onglet de navigateur que vous utilisez, vous entrerez le code ici.
Type 1 : Afficher les nouvelles mises à jour comme notification d'onglet de navigateur
Cette méthode est idéale si vous souhaitez attirer l'attention des utilisateurs en simulant une activité sur votre site. Un nombre apparaîtra dans le titre de l'onglet, donnant l'impression qu'un nouveau message ou une nouvelle mise à jour attend l'utilisateur.
Par exemple, des sites comme Facebook et LinkedIn utilisent cela pour afficher les notifications non lues. Vous pouvez utiliser ce déclencheur psychologique pour encourager les utilisateurs à revenir à votre onglet pour voir ce qu'ils manquent.
Une fois sur la page « Créer un extrait de code personnalisé », vous devez nommer votre extrait. Vous pouvez choisir tout ce qui vous aide à identifier le code.
Ensuite, sélectionnez « Extrait JavaScript » comme « Type de code » dans le menu.
Ensuite, tout ce que vous avez à faire est de copier et coller l'extrait de code suivant dans la boîte « Aperçu du code » :
let count = 0;
const title = document.title;
function changeTitle() {
count++;
var newTitle = '(' + count + ') ' + title;
document.title = newTitle;
}
function newUpdate() {
const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );
Ce code indique au navigateur de commencer à compter lorsque l'utilisateur bascule vers un autre onglet. Dès qu'il revient sur votre site, le titre revient à la normale.
Une fois que vous avez fait cela, faites défiler vers le bas jusqu'à la section « Insertion ». Choisissez simplement l'option « Insertion automatique » et laissez l'emplacement sur « En-tête de tout le site ».
Après cela, faites défiler vers le haut de la page et basculez le commutateur « Inactif » sur « Actif ».
Enfin, cliquez sur le bouton « Enregistrer le extrait » pour sauvegarder vos paramètres.
Une fois cela terminé, votre extrait de code personnalisé sera ajouté à votre site et commencera à fonctionner.
Type 2 : Changer les favicons comme notification d'onglet de navigateur
Avec cette méthode, vous afficherez une favicon différente dans l'onglet du navigateur lorsque les utilisateurs naviguent vers un autre onglet. C'est une façon subtile de leur rappeler que votre site est toujours ouvert.
Pour ce faire, nous utiliserons un extrait de code JavaScript qui échange l'image lorsque l'utilisateur quitte la page.
Tout d'abord, visitez la page Extraits de code » + Ajouter un extrait et cliquez sur « + Ajouter un extrait personnalisé ».
Sur la page de création, sélectionnez « Extrait de code JavaScript » comme « Type de code » dans le menu.
Une fois que vous avez fait cela, copiez et collez le code suivant dans la boîte « Aperçu du code » :
<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>
<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';
function changeFavicon() {
document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
const update = setInterval(changeFavicon, 3000);
setTimeout(function() {
clearInterval( update );
}, 3100);
}
Après avoir collé le code, vous devez remplacer l'URL dans la ligne Favicon par le lien vers votre propre image de notification.
Téléchargez simplement votre nouvelle favicon dans la bibliothèque de médias de WordPress et copiez le nom du fichier (dans mon exemple, c'est daisy.jpeg). Ensuite, collez-le entre les guillemets dans le code.
Une fois que vous avez fait cela, faites défiler jusqu'à la section « Insertion ».
Vous pouvez choisir l'option « Insertion automatique » si vous souhaitez intégrer automatiquement le code sur chaque page.
Pour changer le favicon sur des pages spécifiques uniquement, sélectionnez l'option « Shortcode » et collez-le dans n'importe quelle zone prenant en charge les shortcodes, comme les widgets de la barre latérale ou en bas de l'éditeur de contenu.
Ensuite, allez en haut de la page et basculez le commutateur de « Inactif » à « Actif » dans le coin supérieur droit, puis cliquez sur le bouton « Enregistrer le snippet ».
Après cela, votre favicon commencera à changer en tant que notification d'onglet de navigateur.
Type 3 : Changer le titre du site comme notification d'onglet de navigateur
Cette méthode est pour vous si vous souhaitez modifier le titre du site pour capter à nouveau l'attention de vos visiteurs.
En utilisant ce snippet de code, le titre de votre site changera pour afficher un message accrocheur lorsque les utilisateurs basculeront vers un autre onglet du navigateur.
Nous utiliserons le plugin WPCode pour changer le titre de votre site en une notification d'onglet de navigateur.
Pour accéder à la page « Créer un extrait personnalisé », visitez la page Extraits de code » + Ajouter un extrait depuis la barre latérale d'administration.
Ici, cliquez sur « + Ajouter un extrait personnalisé » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».
Ensuite, vous devez sélectionner « Snippet JavaScript » comme type de code dans la liste des options qui apparaissent à l'écran.
Maintenant que vous êtes sur la page « Créer un extrait personnalisé », commencez par entrer un titre pour votre extrait de code.
Cela peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.
Ensuite, tout ce que vous avez à faire est de copier et coller l'extrait de code suivant dans la boîte « Aperçu du code » :
function changeTitleOnBlur() {
var timer = null;
var title = document.title;
var altTitle = 'Return to this page!';
window.onblur = function() {
timer = window.setInterval( function() {
document.title = altTitle === document.title ? title : altTitle;
}, 1500 );
}
window.onfocus = function() {
document.title = title;
clearInterval(timer);
}
}
changeTitleOnBlur();
Une fois que vous avez collé le code, vous pouvez le modifier et simplement écrire le message que vous souhaitez afficher sur votre onglet de navigateur dans le code.
Pour écrire votre message souhaité, accédez simplement à la ligne var altTitle = 'Return to this page!'; et supprimez le texte de remplacement par le message pour la notification de votre onglet de navigateur.
Ensuite, faites défiler jusqu'à la section « Insertion » et choisissez le mode « Insertion automatique » pour activer la notification de votre onglet de navigateur sur chaque page.
Cependant, si vous souhaitez uniquement votre message accrocheur sur des pages spécifiques, vous pouvez choisir l'option « Shortcode ».
Par exemple, vous pourriez seulement vouloir ajouter ce code à la page « Ajouter au panier » pour réduire l'abandon de panier sur votre site web.
Si tel est le cas, vous pouvez choisir l'option Shortcode.
Après cela, faites défiler jusqu'à l'option « Emplacement » et cliquez sur le menu déroulant à côté.
À partir de là, sélectionnez l'option « Pied de page du site entier ».
Enfin, faites défiler jusqu'en haut de la page et basculez le commutateur de « Inactif » à « Actif ».
Ensuite, cliquez sur le bouton « Enregistrer l'extrait » pour sauvegarder vos paramètres.
C'est tout ! Désormais, la notification de votre onglet de navigateur alertera les utilisateurs qui quittent votre site.
Bonus : Ajoutez des notifications push web à votre site WordPress
Les notifications d'onglet de navigateur sont efficaces, mais elles ont une limitation majeure. Elles ne fonctionnent que si l'utilisateur garde votre onglet ouvert.
Si vous souhaitez atteindre les visiteurs même après qu'ils aient fermé votre site web, vous avez besoin de notifications push web. Contrairement aux alertes d'onglet, ce sont des messages actifs envoyés directement à l'appareil ou au navigateur de l'utilisateur.
La façon la plus simple de configurer cela est avec PushEngage. C'est le meilleur logiciel de notification push sur le marché.
PushEngage vous permet d'envoyer des mises à jour automatiques pour les nouveaux articles de blog, les baisses de prix ou les paniers abandonnés. Nous l'utilisons ici chez WPBeginner pour informer nos abonnés des nouveaux tutoriels, et c'est une source majeure de trafic de retour pour nous.
Pour en savoir plus à ce sujet, consultez notre critique complète de PushEngage.
Il comprend des fonctionnalités puissantes comme les tests A/B, les notifications automatiques, la segmentation des utilisateurs et les rappels d'abonnement intelligents. Ces outils vous aident à construire une audience fidèle qui revient sans cesse.
Pour plus de détails, consultez notre guide pour débutants sur comment ajouter des notifications push web dans WordPress.
Questions fréquemment posées sur l'ajout de notifications d'onglet de navigateur
Voici quelques questions que nos lecteurs posent fréquemment concernant l'ajout de notifications d'onglet de navigateur dans WordPress :
Comment ajouter une barre d'annonce dans WordPress ?
La façon la plus simple d'ajouter une barre d'annonce est d'utiliser un plugin comme OptinMonster. Il vous permet de créer des barres collantes qui se placent en haut ou en bas de votre site pour afficher des mises à jour, des promotions ou des alertes sans écrire de code.
Pour plus d'informations, consultez notre tutoriel sur la création d'une barre d'alerte dans WordPress.
Comment ajouter des notifications dans WordPress ?
Pour ajouter des notifications sur le site, vous pouvez utiliser un plugin comme PushEngage ou WPCode.
PushEngage gère les notifications push Web actives envoyées aux navigateurs, tandis que WPCode vous permet d'ajouter des scripts personnalisés pour des alertes de titre d'onglet passives, comme celles de ce guide.
Comment activer les notifications du navigateur Web ?
Vous devez vous inscrire à un service de notification push Web comme PushEngage.
Une fois que vous avez installé leur plugin WordPress, votre site peut automatiquement demander aux visiteurs la permission d'envoyer des alertes à leur navigateur/appareil, même lorsqu'ils ne sont pas actuellement sur votre site Web.
Comment ajouter un avis dans WordPress ?
Vous pouvez ajouter un simple avis dans un article en utilisant le bloc Groupe par défaut avec une couleur d'arrière-plan dans l'éditeur WordPress.
Pour les avis sur l'ensemble du site qui apparaissent sur chaque page, nous recommandons d'utiliser un plugin de barre flottante comme OptinMonster ou SeedProd.
Comment ajouter une bannière popup dans WordPress ?
Le meilleur outil pour ajouter des bannières popup est OptinMonster.
Il fournit un constructeur par glisser-déposer pour créer des lightboxes, des pop-ups et des bannières flottantes qui se déclenchent en fonction de comportements spécifiques de l'utilisateur, tels que le temps passé sur la page ou l'intention de sortie.
Pour commencer, consultez notre tutoriel sur l'ajout d'une popup dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter des notifications d'onglet de navigateur dans WordPress. Vous voudrez peut-être aussi consulter notre tutoriel sur comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress et consulter notre liste de façons d'ajouter un site WordPress adapté aux mobiles.
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.
Dennis Muthomi
J'ai implémenté la méthode de modification du favicon pour plusieurs clients e-commerce, et elle s'est avérée particulièrement efficace lorsqu'elle est combinée avec des messages d'abandon de panier.
Un conseil que j'ajouterais est de tester A/B différents messages de notification et intervalles de temps. Nous avons constaté une réduction de 15 % des taux d'abandon de panier après avoir testé et optimisé le déclenchement à 45 secondes au lieu des 30 par défaut. L'implémentation WPCode facilite l'ajustement de ces paramètres pour les besoins de différents clients.
Jiří Vaněk
J'ai remarqué à quel point cela fonctionne bien dans des applications comme Messenger, où l'onglet du navigateur affiche un nouveau message de quelqu'un avec qui vous discutez. D'après mon expérience, cela fonctionne très bien. Il est vraiment utile de savoir comment implémenter quelque chose de similaire dans WordPress car cela attire l'attention et peut augmenter considérablement le temps qu'un utilisateur passe sur le site. Et l'implémentation dans WordPress, selon ce guide, n'est pas compliquée du tout.
Carole
Est-il possible de faire en sorte que les onglets alternatifs aient un temps plus long entre les changements ? Je pense que le clignotement constant deviendrait ennuyeux et que les gens pourraient simplement fermer l'onglet.
Support WPBeginner
Oui, cela dépendrait des méthodes que vous utiliseriez, vous changeriez les nombres qui sont dans les milliers pour les extraits de code car ceux-ci déterminent combien de millisecondes attendre pour le code.
Admin