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

/

article onesignal pour des notifications sur WordPress

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 ?

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.

Apparence demande abonnement onesignal
demande d'abonnement aux notifications onesignal sur un site

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

exemple de notification onesignal

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 ?

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.

✅ Avantages

  • 10 000 destinataires gratuits par message
  • Fonctionne sur web et mobile (Android & iOS)
  • Un ralentissement modéré de ton site (0,31 sec pour moi sur mobiles)
  • Facile et rapide à utiliser au quotidien

❌ Inconvénients

  • En anglais
  • Faible taux de clic
  • RGPD : pas de possibilité de couper la collecte de données même si les IPs des Européens ne sont pas collectées

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.

note onesignal

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.

tarifs onesignal

La configuration est rapide. Elle prend environ 15 minutes.

Installe OneSignal sur ton site WordPress

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.

onesignal page accueil

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

création de compte OneSignal

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

confirmation de compte

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

débuter par les notifications Web Push

Tu valides WordPress Plugin or Website builder puis WordPress.

onesignal choix installation 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.

configuration du site wordpress

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

certificat safari

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

clés d'identification OneSignal

Installe et configure l’extension OneSignal sur WordPress

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

installer l'extension WordPress OnesSgnal

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

onesignal menu wordpress

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

wordpress identification

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.

titre des notifications

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

apparence de l'inscription aux notifications

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.

position cloche

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
personnalisation des couleurs des notifications push

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

traduction des messages
  • 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.

personnalisation de la bannière

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 2e point (message) du message de bienvenue avec : Merci de votre inscription.

message de bienvenue à la souscription des notifications OneSignal

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.
notifications automatiques

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.

suivi des résultats des notifications dans google analytics avec les UTM

Tu finalises avec Save.

onesignal fin de la configuration de l'extension

Nous retournons sur le site de OneSignal.

Finalise le paramétrage sur OneSignal

Tu cliques sur Go to my website.

onesignal validation mise en place

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

onesignal bouton d'inscription

et tu autorises les notifications.

autorisation des notifications

Tu valides avec Finish sur OneSignal.

finalisation installation 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

Rédige et programme ta première notification

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

accès liste

Tu cliques sur New Push.

nouvelle notification 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
nommer notification

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

interface redaction notification

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
rédiger notification

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.

modifier image

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

ajout autre angue

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

choix langue

et tu personnalises les textes de chaque version.

texte personnalise autre langue onesignal

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

option a/b test de OneSignal

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

variante a/b test

Tu disposes des aperçus en fonction des configurations.

visualisation creation notification onesignal

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

MacOs

apercu macos

Windows

apercu windows

Androïd

apercu android

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

réglages échantillon a/b test onesignal

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
programmation notification onesignal

Tu valides le résumé.

résumé du message avant envoi

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.

activec notifications dans article

Segmente ton audience

Audience > Segments

menu segments

Trois segments sont disponibles par défaut :

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

Tu crées un nouveau segment.

création nouveau segment

Tu le nommes.

nom du segment

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

critères segmentation notifications onesignal

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

message sur segment

Tu retrouves ton segment.

definition segment
message selection segment

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

Suis les résultats de tes notifications

Suis les résultats de tes notifications

Dans OneSignal

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

menu suivi envois

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
statistiques envoi

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

détail message

La répartition des clics dans le temps

Répartition des clics des notifications OneSignal dans le temps

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

statistiques plateformes

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

statuts de livraison

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.

notifications google analytics

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

campagnes

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

sessions

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.

Installe des notifications sur ton site WordPress pour fidéliser tes lecteurs [Tutoriel]. Cliquez pour tweeter

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

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous les tutoriels pour Attirer des visiteurs sur ton site

Ressources

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

bannière pour l'inscription à la newsletter
portrait jean

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


Comment installer OneSignal Sur WordPress ?

Une extension permet de disposer de notifications push sur WordPress sans rédiger une ligne de code. Tu relies facilement WordPress et OneSignal.


Pourquoi utiliser des notifications push ?

Les notifications push permettent de communiquer avec les visiteurs de son site. Ils reçoivent des messages spécifiques dès qu’ils sont sur internet quel que soit l’appareil utilisé : mobile (Android et iOS), tablette ou ordinateur.


12 réponses à “Adresse des Notifications Push aux visiteurs de ton site WordPress [Tutoriel]”

    • Bonjour Deltrey,

      Merci de ton commentaire. Je suis heureux que cet article t’ait été utile.
      Cela m’encourage à poursuivre.

      Excellente journée,
      Jean

  1. Bonjour, j’arrive après la bataille. J’ai bien procédé à toutes les étapes mais… la cloche n’apparaît pas sur mon site.
    Bien à vous !

    • Bonjour,

      Il est possible que les notifications n’apparaissent pas sur ton site car tu as installé une extension de cache. Cela se résout en vidant le cache.

      Magnifique journée,
      Jean

  2. bonjour
    j’ai installé e système et de nombreuses personnes ne reçoivent pas les notifications alors que d’autres oui.
    Y a t’il une raison ?
    A bientôt
    Jérôme

    • Bonjour Jérôme,

      Tu ne pourras pas atteindre tous les inscrits.

      Pour voir les abonnés qui recevront tes notifications, tu auras les volumes d’inscrits par langue dans Message. Il faut rédiger un message par langue (tu peux supposer que tous les inscrits parlent français et répéter un message identique).

      Pour s’assurer de toucher un maximum de lecteurs, le réglage Intelligent delivery
      dans Schedule optimise les heures de publication.

      A bientôt,
      Jean

  3. Bonjour,
    Je ne connaissais pas du tout ce système. J’ai bien fait de m’intéresser à ton blog !
    Mais je me demande si Onesignal ne pourrait pas être contre-productif si on cherche à créer une liste.
    Pourquoi un visiteur s’inscrirait-il sur une liste si il peut s’engager moins ?
    A priori ça devrait permettre de récupérer des lecteurs, c’est bon pour le trafic.
    Mais je me demande si certains qui se seraient inscrits sur la liste ne vont pas se contenter des notifications.
    Alors trafic ou liste il faut choisir ?
    Cordialement,

    • Bonjour André,

      Je n’ai pas remarqué d’incidences sur les inscriptions à ma newsletter après l’installation des notifications. Je pense qu’il s’agit de deux systèmes complémentaires qui répondent au même besoin créer un lien avec les lecteurs pour les faire revenir sur ton site.

      La newsletter :
      + : la création d’une relation de longue durée avec de très bons retours
      – : complexe à installer et la difficulté à acquérir des lecteurs

      Les notifications :
      + : simplicité d’installation déconcertante et acquisition rapide d’abonnés
      – : taux de clic plus faible et la longueur limitée des messages

      Je vois la question dans le sens inverse : tu proposes une solution aux allergiques des newsletters qui n’auraient jamais souscrit.

      J’ai choisi les deux et j’en suis très heureux.

      A bientôt,
      Jean

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *