Après la version pushalert.co, je vous présente la même chose avec OneSignal. Avec PushAlert.co et Joomla tout était facile, mais plutôt limité sur certains aspects. On va donc enlever certaines limites. Cela se fera au prix d'un ergonomie moins bonne.
Vous les avez vu apparaître, certains se sont abonnés, d'autres ont décliné l'offre, les WebPush sont sur le site. Avec PushAlert version free, on ne voit pas le nombre de notifications acceptés, le nombre refusées. Avec OneSignal oui. Cependant la mise en place est légèrement différente, pour ne pas dire un poil plus compliqué. En plus, cela ne fonctionne pas avec Firefox pour une sombre histoire de changement de BDD.
Tutorial OneSignal
Après avoir installé PushAlert, je n'étais pas satisfait. Je ne voulais pas mélanger les personnes qui souhaitez n'avoir que les bons plans et les lecteurs habituels du blog. J'ai donc voulu créer une autre application sur le même site web avec un répertoire différent. Ce n'était pas possible avec pushAlert. J'ai donc choisi l'ajout OneSignal sur le site BonPlans.
Pour l'installation sur un site, la démarche est la même que pour Pushalert.co . Il faut s'inscrire, puis créer son application. Cette création se passe en 8 étapes actuellement. La dernière est un peu étrange à mon goût.
- Cliquer sur Add a new app
- Nommer l'application
- Sélectionner le type de notifications pour nous WebsitePush
- Sélectionner un plateforme (on peut en ajouter ensuite) Google Chrole - Mozilla (mais il y a un bug pour Mozilla)
- Entrer l'url du site web
- Choisir si on a un CMS ou pas
- On récupère son ID et on teste si on a des Subscribed et c'est là que ça devient bizarre (voir ci-dessous comment j'ai fais) en fait c'est presque fini là.
- C'est fini cliquer sur Done
Comment mettre en place le code et créer son premier abonné (vous), pour finaliser l'application. Il faut lire la doc.
- récupérer 3 fichiers manifest.json, OneSignalSDKWorker.js et OneSignalSDKUpdaterWorker.js et les envoyer à la racine de votre site (on les trouve sur la page https://documentation.onesignal.com/docs/web-push-sdk-setup-https sur le lien 2.1 Download and unzip the SDK files.) Autant le manifest.json est utile, autant les deux autres seront télécharger depuis le CDN de OneSignal.
- Vous devez modifier le Manifest JSON en changeant les valeur YOUR_SITE_NAME
{ "name": "YOUR_SITE_NAME", "short_name": "YOUR_SITE_NAME", "start_url": "/", "display": "standalone", "gcm_sender_id": "482941778795" } - Enfin il faudra coller le code minimal suivant dans index.php de votre template Joomla en remplaçant la valeur YOUR_APP_ID par la valeur obtenu dans le dernier écran. Cela dit, tout va être en Anglais !!
<link rel="manifest" href="/manifest.json"> <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(["init", { appId: "YOUR_APP_ID", autoRegister: true, notifyButton: { enable: true /* Set to false to hide */ } }]); </script>
Maintenant vous devez vider vos caches, rafraîchir la page, et cliquer sur la cloche pour vous abonner et ainsi finir l'installation de l'application en appuyant sur le bouton "Check Subscribed Users'
Captures d'écran pour la création d'une App.
Vous pouvez envoyer vos premiers messages. Avec Zapier vous pouvez automatiser tout ça.
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "VOTRE_CLEF_API",
autoRegister: true,
notifyButton: {
enable: true /* Set to false to hide */
},
httpPermissionRequest: {
enable: true,
modalTitle: 'Merci !!',
modalMessage: "Vous êtes maintenant abonné aux notifications. Vous pouvez vous désinscrire à tout moment.",
modalButtonText: 'Fermer'
},
promptOptions: {
/* These prompt options values configure both the HTTP prompt and the HTTP popup. */
/* actionMessage limited to 90 characters */
actionMessage: "Nous souhaiterions vous présenter des notifications pour les dernièrs bon plan, promotions, ventes flashs.",
/* acceptButtonText limited to 15 characters */
acceptButtonText: "AUTORISER",
/* cancelButtonText limited to 15 characters */
cancelButtonText: "NON MERCI"
},
welcomeNotification: {
"title": "Merci!!",
"message": "Merci de vous être enregistré à Bon Plan GeekMPS:D"
},
notifyButton: {
enable: true, /* Required to use the notify button */
size: 'medium', /* One of 'small', 'medium', or 'large' */
theme: 'default', /* One of 'default' (red-white) or 'inverse" (white-red) */
position: 'bottom-right', /* Either 'bottom-left' or 'bottom-right' */
offset: {
bottom: '0px',
left: '0px', /* Only applied if bottom-left */
right: '0px' /* Only applied if bottom-right */
},
prenotify: true, /* Show an icon with 1 unread message for first-time site visitors */
showCredit: false, /* Hide the OneSignal logo */
text: {
'tip.state.unsubscribed': 'Souscrire aux notifications',
'tip.state.subscribed': "Vous avez dejà souscrit aux notifications",
'tip.state.blocked': "Vous avez bloquez les notifications",
'message.prenotify': 'Clic pour souscrire aux notifications',
'message.action.subscribed': "Merci d'avoir souscrit!",
'message.action.resubscribed': "Vous avez dejà souscrit aux notifications",
'message.action.unsubscribed': "Vous ne recevrez plus de notifications",
'dialog.main.title': 'Gérer les notifications du site',
'dialog.main.button.subscribe': 'SOUSCRIRE',
'dialog.main.button.unsubscribe': 'DESINSCRIRE',
'dialog.blocked.title': 'Debloquer les Notifications',
'dialog.blocked.message': "Suivez ces instructions pour autoriser les notifications:"
}
}
}]);
</script>
Avantage:
- Gratuit, seul le support est payant
- Facile à installer
- Plusieurs App possible
- SDK et documentation sympa
- Les graphiques sur l'interface du site
- A/B testing
Inconvénient
- L'interface manuelle n'est pas top pour envoyer un message, trop d'écran
Comments powered by CComment