Configuration ReactJS et NextJS

​

Vue d’ensemble

​

Exigences

• Application et plateforme OneSignal configurées. Consultez Configuration push web pour commencer.

​

Installation

yarn add react-onesignal

​

Initialisation

"use client";

import { useEffect } from 'react';
import OneSignal from 'react-onesignal';

export default function Page() {
  useEffect(() => {
    // Assurez-vous que ce code s'exécute uniquement côté client
    if (typeof window !== 'undefined') {
      OneSignal.init({
        appId: 'YOUR_APP_ID',
        // Vous pouvez ajouter d'autres options d'initialisation ici
        notifyButton: {
          enable: true,
        }
      });
    }
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      {/* Reste du contenu de votre page */}
    </div>
  );
}

​

Personnalisation des options init

​

Paramètres du service worker

​

Hébergement du worker

• Racine publique (par défaut) : /OneSignalSDKWorker.js
• Dossier personnalisé (recommandé) : par exemple, /onesignal/OneSignalSDKWorker.js comme défini à l’étape précédente.

​

Vérifier l’hébergement du service worker

https://your-site.com/OneSignalSDKWorker.js

https://your-site.com/onesignal/OneSignalSDKWorker.js

​

Notes importantes

• Éviter l’initialisation en double en développement
  • Lors des tests dans un environnement de développement, vous pourriez voir le SDK OneSignal s’initialiser deux fois, ce qui peut causer des erreurs console.
  • Cela se produit en raison de <React.StrictMode> qui fait que les effets s’exécutent deux fois en développement. Pour résoudre cela, supprimez <React.StrictMode> de votre composant racine pendant le développement.

​

Tester l’intégration du SDK OneSignal

​

Vérifier les abonnements web push

1

Lancez votre site sur un appareil de test.

• Utilisez Chrome, Firefox, Edge ou Safari pendant les tests.
• N’utilisez pas le mode Navigation privée ou Incognito. Les utilisateurs ne peuvent pas s’abonner aux notifications push dans ces modes.
• Les invites devraient apparaître en fonction de votre configuration des invites de permission.
• Cliquez sur Autoriser dans l’invite native pour vous abonner aux notifications push.

Invite de permission native web push

2

Vérifiez votre tableau de bord OneSignal

Vérifiez le tableau de bord OneSignal :

• Allez dans Audience > Subscriptions.
• Vous devriez voir une nouvelle entrée avec le statut Subscribed.

Tableau de bord affichant un abonnement avec le statut 'Subscribed'

Vous avez créé avec succès un abonnement web push. Les abonnements web push sont créés lorsque les utilisateurs s’abonnent pour la première fois aux notifications push sur votre site.

​

Configurer les abonnements de test

1

Ajouter aux abonnements de test.

Dans le tableau de bord, à côté de l’abonnement, cliquez sur le bouton Options (trois points) et sélectionnez Add to Test Subscriptions.

Ajout d'un appareil aux abonnements de test

2

Nommez votre abonnement.

Nommez l’abonnement afin de pouvoir identifier facilement votre appareil plus tard dans l’onglet Test Subscriptions.

Tableau de bord affichant le champ 'Name your subscription'

3

Créer un segment d'utilisateurs de test.

Allez dans Audience > Segments > New Segment.

4

Nommez le segment.

Nommez le segment Test Users (le nom est important car il sera utilisé plus tard).

5

Ajoutez le filtre Test Users et cliquez sur Create Segment.

Création d'un segment 'Test Users' avec le filtre Test Users

Vous avez créé avec succès un segment d’utilisateurs de test. Nous pouvons maintenant tester l’envoi de messages à cet appareil individuel et à des groupes d’utilisateurs de test.

​

Envoyer un push de test via l’API

1

Obtenez votre clé API d'application et votre ID d'application.

Dans votre tableau de bord OneSignal, allez dans Settings > Keys & IDs.

2

Mettez à jour le code fourni.

Remplacez YOUR_APP_API_KEY et YOUR_APP_ID dans le code ci-dessous par vos clés réelles. Ce code utilise le segment Test Users que nous avons créé plus tôt.

Copy

Ask AI

curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'

3

Exécutez le code.

Exécutez le code dans votre terminal.

4

Vérifiez les images et la livraison confirmée.

Si toutes les étapes de configuration ont été complétées avec succès, les abonnements de test devraient recevoir une notification.

Seul Chrome prend en charge les images. Les images apparaîtront petites dans la vue de notification réduite. Développez la notification pour voir l’image complète.

Notification push développée avec image sur Chrome macOS

5

Vérifiez la livraison confirmée.

Dans votre tableau de bord, allez dans Delivery > Sent Messages, puis cliquez sur le message pour afficher les statistiques.Vous devriez voir la statistique confirmed, ce qui signifie que l’appareil a reçu la push.

Safari ne prend pas en charge la Livraison confirmée.

Statistiques de livraison affichant la livraison confirmée

Si vous avez un forfait Professional ou supérieur, faites défiler jusqu’à Audience Activity pour voir la confirmation au niveau de l’abonnement :

Livraison confirmée au niveau de l'appareil dans Audience Activity

Vous avez envoyé avec succès une notification via notre API à un segment.

Besoin d’aide ? Contactez support@onesignal.com avec les informations suivantes :

• Copiez-collez la requête et la réponse API dans un fichier .txt
• Votre Subscription ID
• L’URL de votre site Web avec le code OneSignal

Nous serons ravis de vous aider !

​

Identification des utilisateurs

​

Attribuer un External ID

​

Ajouter des tags de données

Un profil utilisateur dans OneSignal avec un tag appelé "current_level" défini sur "6"

Éditeur de segment montrant un segment ciblant les utilisateurs avec une valeur current_level supérieure à 4 et inférieure à 10

Capture d'écran montrant une notification push ciblant le segment Niveau 5-10 avec un message personnalisé

​

Ajouter des abonnements email et/ou SMS

• Utilisez la méthode addEmail pour créer des abonnements email.
• Utilisez la méthode addSms pour créer des abonnements SMS.

Un profil utilisateur avec des abonnements push, email et SMS unifiés par External ID

​

Confidentialité et consentement de l’utilisateur

• setConsentRequired(true) : Empêche la collecte de données jusqu’à ce que le consentement soit donné.
• setConsentGiven(true) : Active la collecte de données une fois le consentement accordé.

• Données collectées par le SDK
• Gestion des données personnelles

​

Écouter les événements push, utilisateur et in-app

​

Événements de notification push

• Écouteur d’événement de clic : Détecter quand une notification est tapée.
• Écouteur du cycle de vie au premier plan : Contrôler comment les notifications se comportent au premier plan.

​

Changements d’état de l’utilisateur

• Écouteur d’événement de changement d’état utilisateur : Détecter quand l’External ID est défini.
• Observateur de permission : Suivre l’interaction spécifique de l’utilisateur avec l’invite d’autorisation push native.
• Observateur de changement d’abonnement push : Suivre quand le statut de l’abonnement push change.

​

Configuration avancée et capacités

• 🔁 Migrer vers OneSignal depuis un autre service
• 🔌 Intégrations
• 🛎️ Boutons d’action
• 🌐 Messagerie multilingue
• 🛡️ Vérification d’identité
• 📊 Résultats personnalisés

​

Configuration et référence du SDK Web