Adresse des Notifications Push aux visiteurs de ton site WordPress [Tutoriel]

Cet article prend environ 10 minutes à lire.

T Tu souhaites développer ton trafic ou convertir avec ton site sans avoir recours à la publicité ?

Touche tes visiteurs dès qu’ils sont sur internet avec OneSignal.

Tu les incites à revenir à l’aide d’alertes ciblées : nouveaux articles, vidéos ou podcasts, promotions, évènements…

Découvre OneSignal, son installation et comment envoyer tes messages dans ce tutoriel détaillé.

Comment fonctionnent les notifications push ?

Les notifications web sont les petits frères des alertes des applications mobiles pour les navigateurs.

Tu proposes à ton visiteur de s’abonner aux notifications quand il arrive sur ton site. Il pourra toujours y revenir plus tard avec la cloche.

Tu rédiges un message qui s’ouvrira dans une fenêtre popup quand il naviguera sur n’importe quel site.

Je te présente les avantages et les limites de cette solution avant de passer à l’installation.

Pourquoi utiliser OneSignal et les notifications push sur les navigateurs ?

OneSignal est un moyen efficace de communiquer avec tes visiteurs qu’ils soient sur mobile, ordinateur ou tablette.

Les notification push complètent tes autres canaux de communication :

• Certains visiteurs ne souhaitent pas partager leur e-mail pour recevoir ta newsletter.
• La publicité est la seule option pour retrouver tes visiteurs sur les réseaux sociaux.
• Les flux RSS sont de l’histoire ancienne.

Tu personnalises tes messages. Tu maîtrises à qui tu les envoies et quand.

J’aborde dans cet article uniquement les alertes aux visiteurs de ton site qui se sont abonnés à tes notifications. OneSignal est une plateforme qui gère également les messages au sein des applications, l’envoi d’e-mails et de SMS.

Fonctionnalités intéressantes

• Tu touches ton audience même lorsqu’ils ne sont pas présents sur ton site.
• OneSignal offre des fonctionnalités avancées telles que la segmentation de ton audience et les tests A/B.
• Tu touches tes abonnés au meilleur moment avec l’option d’envoi intelligent qui détermine l’heure en fonction des usages habituels de l’abonné.
• Tu traduis les textes de ton message en fonction de la langue du destinataire.

Avis, notes, alternatives et retour d’expérience

L’extension OneSignal est installée sur plus de 100 000 sites WordPress. Son score de 4,5 est positif.

Ils indiquent être utilisés par plus d’un million d’utilisateurs et envoyer 6 milliards de notifications par jour.

Comme les routeurs d’e-mails, le choix pour ta solution d’envoi de notifications est vaste. La compétition est intense au vu du nombre d’annonces sur Google. Quelques alternatives à OneSignal :

• iZooto
• Urban Airship
• Intercom
• Pusher
• Batch
• Pushsafer

Mon expérience

J’utilise OneSignal quasiment chaque semaine depuis mai 2018. J’apprécie la rapidité pour créer une notification. J’y passe rarement plus de 2 minutes.

Ils améliorent la solution régulièrement sans tout perturber du point de vue de l’utilisateur ce qui évite de devoir tout réapprendre tous les 3 mois.

La solution est stable. Je n’ai jamais rencontré de problème.

Tarifs

La version gratuite est parfaite pour la grande majorité des sites. La limite de 10 000 destinataires par message laisse une belle marge.

Les tarifs montent rapidement ensuite.

La configuration est rapide. Elle prend environ 15 minutes.

Installe OneSignal sur ton site WordPress

Crée ton compte gratuit sur le site de OneSignal

Tu t’inscris avec Sign Up sur le site de OneSignal.

Tu complètes ton e-mail, ton mot de passe et le nom de ton entreprise.

Tu actives ton compte à l’aide de l’e-mail reçu.

Tu indiques le nom de ton site et tu sélectionnes Web.

Tu valides WordPress Plugin or Website builder puis WordPress.

Tu complètes le nom de ton site et l’url de ta page d’accueil. Tu charges ton favicon (logo au format carré).

Si ton site n’est pas sécurisé en HTTPS, tu désactives Auto resubscribe et actives My site is not fully HTTPS.

Si tu n’as pas de compte de développeur Apple, tu passes cette étape et tu sauvegardes.

Tu disposes désormais des clés d’identification que tu vas copier sur WordPress.

Installe et configure l’extension OneSignal sur WordPress

Dans le répertoire officiel de WordPress, tu installes OneSignal – Web Push Notifications.

Tu retrouves le plugin OneSignal Push dans ton menu latéral.

Dans l’onglet Configuration, tu copies-colles les trois codes que tu viens d’obtenir sur le site de OneSignal. Tu actives My site uses an HTTPS connection si ton site est sécurisé.

Nous passons à la personnalisation des notifications.
Ce n’est clairement pas la partie la plus passionnante mais tu n’y reviendras plus ensuite.

Les réglages des notifications

Tu inscris le titre qui apparaîtra en haut de tes notifications. Le plus simple est d’indiquer le nom de ton site.

Tu actives les notifications sur mobiles : Send notifications additionally to iOS & Android platforms.

L’apparence et l’emplacement de la cloche

Tu actives Automatically prompt… pour faire apparaître le message de OneSignal en premier. La validation du navigateur sera toujours indispensable mais ce sera plus clair pour ton visiteur.

Tu ajoutes la personnalisation de l’emplacement (offset position) et des couleurs (theme colors).

Tu définis la taille (petit, moyen, grand), la position à droite (Right par défaut) ou à gauche et l’apparence classique (red) ou les couleurs inversées (white).

La personnalisation de l’emplacement

Tu précises la position de la cloche (en pixel) par rapport au bas, à la gauche et à la droite de l’écran.

La personnalisation des couleurs

Tu peux modifier l’ensemble des couleurs. Toutes les références sont acceptées : Hex, Rgb… ainsi que la valeur transparent.

• Main button background color : couleur de fond du bouton
• Main button foreground color : couleur du bouton
• Pre-notify badge background color : couleur de fond du badge
• Pre-notify badge foreground color : couleur du badge
• Pre-notify badge border color : couleur de la bordure du badge
• Pulse animation color : couleur de l’animation
• Popup action button background color : couleur de fond du popup
• Popup action button background color (on hover) : couleur de fond du popup au survol
• Popup action button background color (on click) : couleur de fond du popup au clic
• Popup action button text color : couleur du texte du popup

Tu traduis les messages. Je te facilite le boulot. Tu copies-colles.

• Tip when unsubscribed : Souscrivez aux notifications
• Tip when subscribed : Vous êtes inscrit aux notifications
• Tip when blocked : Vous avez bloqué les notifications
• Message on subscribed : Merci de votre inscription
• Message on re-subscribed : Vous êtes réinscrit aux notifications
• Message on unsubscribed : Vous ne recevrez plus les notifications
• Main dialog title : Gérez les notifications
• Main dialog subscribe button : Souscrire
• Main dialog unsubscribe button : Se désabonner
• Blocked dialog title : Débloquez les notifications
• Blocked dialog message : Suivez ces instructions pour autoriser les notifications

Tu recommences l’opération avec les textes de la bannière.

La bannière de souscription

La bannière s’affiche lors de la première visite.

Tu ne complètes que les trois premières lignes si ton site est en HTTPS.

• Action Message : Souscrivez aux notifications pour être alerté des derniers articles.
• Accept Button Text : Accepter
• Cancel Button Text : Non Merci
• Auto Accept Title (Click Allow) – HTTP Only : Autoriser
• Site Name – HTTP Only : url complète de ton site
• Example Notification Title (Desktop) – HTTP Only : Voici un exemple de notification
• Example Notification Message (Desktop) – HTTP Only : Les notifications apparaîtront sur votre ordinateur
• Example Notification Title (Mobile) – HTTP Only : Voici un exemple de notification
• Example Notification Message (Mobile) – HTTP Only : Les notifications apparaîtront sur votre mobile
• Example Notification Caption – HTTP Only : Vous pouvez vous désinscrire à tout moment

Personnalise le message de remerciement à l’inscription

Je n’ai complété que le 2^e point (message) du message de bienvenue avec : Merci de votre inscription.

Cette option est séduisante sur le papier. Tu installes les notifications et elles sont ensuite envoyées automatiquement sans que tu aies besoin d’intervenir.

Les notifications automatiques à la parution

Je te recommande de les désactiver par défaut. Les raisons :

• Le texte du message n’est pas optimisé.
• L’envoi est réalisé au moment de la parution. Ce n’est pas forcément le moment idéal où les abonnés sont disponibles.
• Tu ne bénéficies pas des fonctionnalités d’optimisation d’envoi.
• La publication manuelle ne prend que deux minutes.

Pour finir, tu indiques comment tu souhaites que tes résultats apparaissent dans tes statistiques.

Le suivi Google Analytics

Je te suggère le code suivant.

utm_source=onesignal&utm_medium=notifications-push&utm_campaign=notifications-onesignal

Je te montre dans la suite de l’article où tu retrouves tes résultats dans Google Analytics et le détail par messages dans OneSignal.

Tu finalises avec Save.

Nous retournons sur le site de OneSignal.

Finalise le paramétrage sur OneSignal

Tu cliques sur Go to my website.

Ton site est désormais équipé d’un bouton de notification. Tu vides le cache de ton site.
Note : Firefox bloque les notifications par défaut.

Tu cliques sur le bouton

et tu autorises les notifications.

Tu valides avec Finish sur OneSignal.

La partie technique (et chiante) est derrière toi. Tu peux désormais adresser tes notifications.

Rédige et programme ta première notification

Tu te connectes sur ton compte OneSignal et tu sélectionnes les notifications de ton site.

Tu cliques sur New Push.

Tu nommes ton message si tu souhaites l’identifier dans tes statistiques. Tu sélectionnes tes destinataires :

• Send to All : Toute ta liste
• Send to particular segment(s) : Choix des segments

Tu rédiges en conservant un œil sur l’aperçu de ton message.

Tu complètes :

• Ton titre
• Le corps de ton message
• Tu charges ton illustration (au format 720 X 480 px en centrant tes textes et avec le maximum de marge par exemple).
• L’URL de l’article partagé ou de ta page

Tu disposes de l’option pour retailler ton image.

J’ai fait un effort pour toi dans les exemples de cet article. Au quotidien, je reprends les visuels Twitter ou YouTube déjà réalisés.

Si ton site est multilingue, tu personnalises les messages en fonction des langues.

Tu sélectionnes les langues de ton site (en plus de l’anglais)

et tu personnalises les textes de chaque version.

Tu peux également tester tes messages.
Cependant, mieux vaut avoir des milliers d’abonnés pour que le résultat soit concluant.

Les éléments de la variante sont entièrement modifiables y compris l’url.

Tu disposes des aperçus en fonction des configurations.

Les formats sont loin d’être harmonisés.

MacOs

Windows

Androïd

Tu détermines la taille de ton échantillon de test.

Les options d’envoi :

• Envoi immédiat
• Programmation

et les optimisations :

• Envoi immédiat
• Envoi prédictif en fonction des habitudes des abonnés
• Configuration par fuseau horaire

Tu valides le résumé.

L’envoi automatique lors de la publication d’un article

Tu as désormais un nouvel élément dans le menu à droite quand tu écris tes articles. Une notification de publication sera envoyée automatiquement lors de la publication de ton article. Je ne le recommande pas.

Segmente ton audience

Audience > Segments

Trois segments sont disponibles par défaut :

• Utilisateurs actifs
• Utilisateurs inactifs
• Utilisateurs actifs et engagés (+ de 4 sessions)

Tu crées un nouveau segment.

Tu le nommes.

Tu sélectionnes les filtres : Première session, Langue, Pays…

Au moment de la rédaction du message, tu définis Send to particular segment(s) et tu supprimes le segment All.

Tu retrouves ton segment.

Dernière étape : quel est l’impact des notifications sur ton trafic ?

Suis les résultats de tes notifications

Dans OneSignal

Tu disposes de tes statistiques d’envoi dans Delivery > Sent Messages

Tu retrouves pour chaque notification :

• La description
• Le statut
  • Finalisé (Delivered)
  • Programmé (Schedule)
• L’heure d’envoi
• Le volume d’envoi
• Le taux de clic

Tu obtiens plus d’informations en cliquant sur le message.

La répartition des clics dans le temps

La répartition des envois entre les différentes plateformes

Le statut (en particulier les désinscriptions : Failed)

Si tu as suivi ce tutoriel et défini un UTM, tes statistiques sont disponibles dans Google Analytics.

Dans Google Analytics 3

Tu les retrouves dans Acquisition > Vue d’ensemble > Campagnes > Toutes les campagnes.

Tu retrouveras tes visiteurs issus de OneSignal sous notifications-onesignal si tu as repris mon format d’UTM.

L’agrégation par mois permet d’établir une tendance.

Conclusion

OneSignal est le moyen le plus simple de fidéliser tes visiteurs. 2 minutes suffisent pour envoyer une notification qu’ils recevront dès qu’ils navigueront sur internet quel que soit l’appareil.

OneSignal a tout pour plaire. Puissant, rapide à installer sans complications techniques et, cerise sur le gâteau, gratuit.

Je double les messages de promotion des articles à 3 jours d’intervalle pour augmenter mes chances de toucher les abonnés.

Les articles qui peuvent t’intéresser :

• Crée ta newsletter
• Un bonus pour doper les inscriptions à ta newsletter
• Rédige ton e-mail de bienvenue
• Réalise une bande-annonce vidéo pour tes articles en 20 min

Retrouve tous les tutoriels pour Attirer des visiteurs sur ton site

Ressources

La documentation officielle en anglais est complète et détaillée.

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean