Publicité
One Signal

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.

  1. Cliquer sur Add a new app
  2. Nommer l'application
  3. Sélectionner le type de notifications pour nous WebsitePush
  4. Sélectionner un plateforme (on peut en ajouter ensuite) Google Chrole - Mozilla (mais il y a un bug pour Mozilla)
  5. Entrer l'url du site web 
  6. Choisir si on a un CMS ou pas
  7. 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à.
  8. 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.

  1. 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.
  2. 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"
    }​
  3. 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.

One Signal 001One Signal 002One Signal 003One Signal 004One Signal 005One Signal 006One Signal 007One Signal 008

Vous pouvez envoyer vos premiers messages. Avec Zapier vous pouvez automatiser tout ça. 

One Signal 009One Signal 010One Signal 011One Signal 012One Signal 013One Signal 014One Signal 015One Signal 016
Voici la version complète de mon code (sauf clef évidemment)  avec les traductions qui vont bien pour le Français :D.
    <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 

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


Commentaires

  • Aucun commentaire trouvé

Poster un commentaire en tant qu'invité

0

Publicité - Ce contenu peut vous intéresser - Test

Les pubs Adsense enregistrent pas mal de choses dans ses cookies, c'est votre droit de ne pas en vouloir (par ailleurs j'utilise piwik avec Do not track activé).