Skip to main content
Ce guide complet vous guide à travers la configuration et la personnalisation des notifications push web en utilisant les versions 2.x.x du plugin WordPress OneSignal. Si vous utilisez la version 3 ou supérieure, consultez notre guide WordPress v3+.
Ce guide est spécifiquement pour la version 2.x.x du plugin WordPress OneSignal. Pour la version 3+, veuillez vous référer à notre documentation WordPress mise à jour.

Prérequis

  • Site web WordPress avec accès administrateur
  • HTTPS activé (requis pour les notifications push web)
  • Compte OneSignal (gratuit sur onesignal.com)

Étape 1 : Choisir l’intégration

Créez votre compte OneSignal sur onesignal.com. Si ce n’est pas votre première application, sélectionnez Nouvelle application/site web, nommez votre application, sélectionnez Web et cliquez sur “Suivant”.

Interface de sélection de plateforme montrant l'option Web

Sélectionnez Plugin WordPress ou créateur de site web pour continuer :

Options d'intégration push web avec plugin WordPress en surbrillance

Étape 2 : Configuration du site

Configurez les informations de votre site avec soin car ces paramètres affectent toutes les notifications :

Formulaire de configuration du site avec champs requis

ChampDescriptionExigences
Nom du siteNom par défaut affiché dans les notifications pushRestez concis pour un meilleur affichage
URL du siteL’URL complète de votre site webDoit inclure http:// ou https:// et correspondre à votre format d’URL réel
Réabonnement automatiqueRéabonne automatiquement les utilisateurs qui reviennent (HTTPS uniquement)Recommandé - Réduit les frictions pour les utilisateurs qui ont effacé les données du navigateur
URL de l’icône par défautIcône pour les invites et les notificationsDoit être HTTPS, carré de 256x256 pixels, format PNG/JPG/GIF
Format d’URL important : Assurez-vous que votre URL de site correspond exactement à la façon dont les utilisateurs accèdent à votre site. Des URL incompatibles (www vs non-www, http vs https) peuvent causer des problèmes d’abonnement.

Étape 3 : Paramètres push avancés (optionnel)

OneSignal fournit des certificats push web Safari sans frais. Ne téléchargez des certificats personnalisés que si vous avez des exigences spécifiques.

Paramètres push avancés montrant les options de téléchargement de certificat Safari

Quand utiliser des certificats personnalisés :
  • Vous avez des certificats Safari existants
  • Votre organisation nécessite une gestion spécifique des certificats
  • Vous avez besoin d’une marque de certificat personnalisée

Étape 4 : Configurer le plugin WordPress

Installer le plugin

Ajoutez le plugin WordPress OneSignal depuis votre administration WordPress ou en recherchant “OneSignal” dans le répertoire des plugins.

Configurer les clés API

Copiez votre ID d’application et votre clé API depuis le tableau de bord OneSignal :

Tableau de bord OneSignal montrant les emplacements de l'ID d'application et de la clé API

Naviguez vers votre administration WordPress → OneSignal Push → onglet Configurer et collez les clés :

Configuration du plugin WordPress montrant les champs de saisie des clés API

Activer les invites push

Activez l’invite de glissement et la cloche d’abonnement pour demander l’autorisation aux visiteurs :

Paramètres d'invite montrant les options d'invite de glissement et de cloche d'abonnement

Enregistrez votre configuration - cela est essentiel pour que le plugin fonctionne correctement.

Emplacement du bouton Enregistrer en bas de la page de configuration

Étape 5 : Tester votre configuration

Vérifier l’installation

  1. Visitez votre site web (vous devrez peut-être vider les plugins de cache)
  2. Recherchez l’invite de glissement OneSignal et la cloche d’abonnement
  3. Abonnez-vous pour tester le flux
  4. Vérifiez Tableau de bord OneSignal → Audience → Utilisateurs pour confirmer votre abonnement

Envoyer une notification de test

Naviguez vers Tableau de bord OneSignal → Messages → Nouveau push pour envoyer votre première notification et vérifier que tout fonctionne.
Dépannage : Si les invites n’apparaissent pas, vérifiez que les notifications push sont activées dans les paramètres de votre appareil et essayez de vider le cache de votre navigateur.

Étape 6 : Configurer les invites de notification

Configurez comment et quand les utilisateurs voient les invites d’abonnement dans la section Configurer :

Cloche d’abonnement

Une icône persistante (généralement dans le coin) que les utilisateurs peuvent cliquer à tout moment pour gérer leur statut d’abonnement.

Invite de glissement

Une boîte de dialogue modale qui apparaît en fonction de vos paramètres de timing pour demander l’autorisation. Prochaines étapes : Les utilisateurs souhaitent généralement personnaliser le timing et l’apparence des invites. Consultez la section Personnalisations avancées ci-dessous.

Étape 7 : Notifications automatiques d’articles

Configuration de base

Lors de la création d’articles, vous verrez une section OneSignal. Cochez Envoyer une notification lors de la publication de l’article pour notifier les abonnés :

Éditeur d'article montrant la case à cocher de notification OneSignal

Activer automatiquement les notifications

Pour cocher automatiquement cette case pour tous les nouveaux articles :
  1. Allez dans OneSignal PushParamètres de notification automatique
  2. Activez Envoyer automatiquement une notification push lorsque je crée un article
  3. Enregistrez les paramètres

Paramètres de notification automatique montrant l'option d'envoi automatique

Notifications de bienvenue

Configurez des messages de bienvenue optionnels envoyés immédiatement après l’abonnement des utilisateurs. Modifiez ou désactivez-les dans la section Configurer de votre plugin.
Limitation de débit : Plusieurs notifications pour le même article sont limitées à une par minute pour éviter le spam.

Personnalisations avancées

Le plugin WordPress OneSignal charge notre SDK push web avec vos options configurées. Vous pouvez utiliser n’importe quelle API JavaScript du SDK push web pour personnaliser davantage l’expérience.
Note pour les développeurs : Cette section nécessite des connaissances en JavaScript et PHP. Si vous avez besoin d’aide pour ajouter du code à votre site, envisagez d’utiliser des plugins comme Insert Headers and Footers ou Custom CSS & JS.

Personnalisation des invites d’abonnement

Configuration avancée des invites

Pour une personnalisation sophistiquée des invites incluant des délais, des catégories et la collecte d’e-mails :
Étape 1 : Désactiver les invites par défaut
Dans Plugin WordPress OneSignal → Paramètres d’invite, désactivez l’invite de glissement et l’invite native (vous pouvez garder la cloche activée).

Paramètres d'invite montrant les invites de glissement et native désactivées

Étape 2 : Activer l’initialisation manuelle
Faites défiler jusqu’à Paramètres avancés et activez “Désactiver l’initialisation OneSignal”, puis Enregistrer.

Paramètres avancés montrant le bouton d'initialisation manuelle

Étape 3 : Ajouter du JavaScript personnalisé
Ajoutez ce code à votre site (après le délai de 3 secondes montré dans les exemples) :
// Invite retardée de base
setTimeout(function(){
  window._oneSignalInitOptions.promptOptions = {
    slidedown: {
      prompts: [
        {
          type: "push",
          autoPrompt: true,
          text: {
            actionMessage: "Recevez des notifications pour les nouveaux articles et mises à jour !",
            acceptButton: "Oui",
            cancelButton: "Non merci",
          },
          delay: {
            timeDelay: 10, // Attendre 10 secondes
            pageViews: 2,  // Afficher après 2 vues de page
          }
        }
      ]
    }
  }
  window.OneSignal = window.OneSignal || [];
  window.OneSignal.push(function() {
    window.OneSignal.init(window._oneSignalInitOptions);
  });
}, 3000);
// Invite basée sur les catégories
setTimeout(function(){
  window._oneSignalInitOptions.promptOptions = {
    slidedown: {
      prompts: [
        {
          type: "category",
          autoPrompt: true,
          text: {
            actionMessage: "Choisissez les notifications que vous souhaitez recevoir :",
            acceptButtonText: "S'abonner",
            cancelButtonText: "Pas maintenant",
            positiveUpdateButton: "Enregistrer les préférences",
            negativeUpdateButton: "Annuler",
            updateMessage: "Mettez à jour vos préférences de notification.",
          },
          categories: [
            {
              tag: "news",
              label: "Dernières nouvelles",
            },
            {
              tag: "sports",
              label: "Actualités sportives",
            },
            {
              tag: "tech",
              label: "Actualités technologiques",
            }
          ]
        }
      ]
    }
  }
  window.OneSignal = window.OneSignal || [];
  window.OneSignal.push(function() {
    window.OneSignal.init(window._oneSignalInitOptions);
  });
}, 3000);

Invites spécifiques à une page

Méthode PHP côté serveur
Utilisez le filtre onesignal_initialize_sdk pour contrôler l’initialisation en fonction des propriétés de la page.
Méthode JavaScript côté client
Activez “Désactiver l’initialisation OneSignal” et ajoutez du JavaScript conditionnel pour initialiser OneSignal uniquement sur des pages spécifiques.

Invites multilingues

Pour les sites monolingues, traduisez simplement le texte dans la configuration de l’invite. Pour les sites multilingues, utilisez la méthode d’initialisation manuelle ci-dessus et détectez la langue de la page pour afficher le texte approprié.

Segmentation et ciblage des utilisateurs

Marquer les utilisateurs

Catégorisez les utilisateurs avec des tags de données pour envoyer des notifications ciblées :
// Marquer les utilisateurs en fonction de leurs intérêts
OneSignal.push(function() {
  OneSignal.sendTag("interest", "technology");
  OneSignal.sendTag("location", "california");
});

Cibler les segments

Créez des segments dans votre tableau de bord OneSignal en utilisant des filtres Tag utilisateur, puis ciblez-les avec le filtre onesignal_send_notification :
<?php
add_filter('onesignal_send_notification', 'target_tech_users', 10, 4);

function target_tech_users($fields, $new_status, $old_status, $post) {
  // Envoyer uniquement aux utilisateurs intéressés par la technologie
  $fields['included_segments'] = array('Technology Enthusiasts');
  return $fields;
}

Images en vedette dans les notifications

Activer la prise en charge des images en vedette

Assurez-vous que votre thème prend en charge les images en vedette. Vérifiez le fichier functions.php de votre thème pour :
add_theme_support('post-thumbnails');

Configurer les paramètres d’image

Dans OneSignal Push → Paramètres de notification envoyée, activez les options d’image en vedette souhaitées :

Paramètres d'image en vedette montrant les options d'icône et de grande image

Intégration de plugin tiers

Types d’articles standard

Activez Envoyer automatiquement une notification push lorsque je publie un article depuis des plugins tiers pour les types d’articles standard.

Paramètres d'intégration de plugin tiers

Types d’articles personnalisés

Ajoutez des types d’articles personnalisés (séparés par des virgules) au champ Types d’articles personnalisés supplémentaires :

Champ de configuration des types d'articles personnalisés

Trouver les types d’articles personnalisés : Regardez l’URL de votre navigateur lors de la création du type d’article personnalisé : https://votresite.com/wp-admin/post-new.php?post_type=votre_type_personnalise Le paramètre post_type indique le nom à ajouter.

Intégration d’application mobile

Méthode 1 : Ouverture simple du navigateur web

Activez Envoyer des notifications supplémentairement aux plateformes iOS et Android dans les paramètres de votre plugin WordPress.

Bouton d'intégration de plateforme mobile

Méthode 2 : Liens profonds

Pour un comportement d’application mobile personnalisé, désactivez le paramètre ci-dessus et utilisez ce code PHP :
<?php
add_filter('onesignal_send_notification', 'send_to_mobile_apps', 10, 4);

function send_to_mobile_apps($fields, $new_status, $old_status, $post) {
  $fields['isAndroid'] = true;
  $fields['isIos'] = true;
  $fields['isAnyWeb'] = true;
  $fields['data'] = array("customkey" => $fields['url']);
  $fields['web_url'] = $fields['url'];
  unset($fields['url']); // Empêche l'ouverture du navigateur sur mobile

  return $fields;
}

Hooks et filtres du plugin WordPress

Emplacement du code

Placez le code PHP personnalisé dans wp-content/mu-plugins/ pour éviter qu’il ne soit écrasé lors des mises à jour.
Créez wp-content/mu-plugins/onesignal-custom.php avec votre code personnalisé.

onesignal_send_notification

Modifiez les paramètres de notification avant l’envoi :
<?php
add_filter('onesignal_send_notification', 'customize_notification', 10, 4);

function customize_notification($fields, $new_status, $old_status, $post) {
  // Personnaliser le titre et le message
  $fields['headings'] = array("en" => "Dernières nouvelles !");
  $fields['contents'] = array("en" => "Découvrez notre dernier article");

  // Planifier pour plus tard
  $fields['send_after'] = "2024-12-25 09:00:00 GMT-0800";

  // Ajouter des boutons d'action
  $fields['web_buttons'] = array(
    array(
      "id" => "read-more",
      "text" => "Lire la suite",
      "url" => get_permalink($post->ID)
    )
  );

  return $fields;
}

onesignal_initialize_sdk

Contrôlez quand OneSignal s’initialise :
<?php
add_filter('onesignal_initialize_sdk', 'control_initialization', 10, 1);

function control_initialization($settings) {
  // Initialiser uniquement sur les articles de blog
  if (is_single() && get_post_type() == 'post') {
    return true;
  }
  return false;
}

onesignal_include_post

Forcez les notifications pour des types d’articles spécifiques :
<?php
add_filter('onesignal_include_post', 'include_pages', 10, 3);

function include_pages($new_status, $old_status, $post) {
  // Envoyer des notifications lorsque des pages sont publiées
  if ($post->post_type == "page" && $new_status == "publish") {
    return true;
  }
  return false;
}

onesignal_meta_box_send_notification_checkbox_state

Contrôlez l’état par défaut de la case à cocher de notification :
<?php
add_filter('onesignal_meta_box_send_notification_checkbox_state', 'auto_check_checkbox', 10, 2);

function auto_check_checkbox($post, $settings) {
  // Toujours cocher la case pour les articles de la catégorie actualités
  if (has_category('news', $post)) {
    return true;
  }
  return false;
}

Sites mixtes WordPress/non-WordPress

Pour les sites avec des pages WordPress et non-WordPress :
  1. Utilisez la configuration de code personnalisé dans le tableau de bord OneSignal
  2. Ajoutez ce code aux pages non-WordPress :
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
var initConfig = {
  appId: "YOUR_APP_ID_FROM_WORDPRESS_PLUGIN",
  notifyButton: {
    enable: true
  },
};
OneSignal.push(function () {
  OneSignal.SERVICE_WORKER_PARAM = {
    scope: '/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/'
  };
  OneSignal.SERVICE_WORKER_PATH = 'wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js'
  OneSignal.SERVICE_WORKER_UPDATER_PATH = 'wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js'
  OneSignal.init(initConfig);
});
</script>

Dépannage

Problèmes courants

Erreur “No Recipients” (Aucun destinataire)

  • Cause : Tentative d’envoi de plusieurs notifications pour le même article trop rapidement
  • Solution : Attendez au moins une minute entre les notifications pour le même article

Les invites n’apparaissent pas

  • Cause : Plugins de cache, paramètres du navigateur ou problèmes d’initialisation
  • Solutions :
    • Videz tous les plugins de cache
    • Vérifiez les autorisations de notification du navigateur
    • Vérifiez que HTTPS est activé
    • Confirmez que la configuration du plugin est enregistrée

Avertissement “Couldn’t load wp.data”

  • WordPress 5+ avec Gutenberg : Peut indiquer des problèmes de configuration - contactez le support
  • WordPress 4.x : Peut être ignoré en toute sécurité - cet avertissement n’affecte pas la fonctionnalité

Les types d’articles personnalisés ne fonctionnent pas

  • Cause : Métadonnées requises manquantes
  • Solution : Utilisez le filtre onesignal_include_post pour inclure explicitement votre type d’article

Les notifications ne se planifient pas

  • Cause : Cron WordPress ou conflits de thème
  • Solutions :
    1. Utilisez le tableau de bord OneSignal ou l’API pour la planification
    2. Implémentez une planification personnalisée avec le filtre onesignal_send_notification
    3. Utilisez l’intégration Zapier pour l’automatisation

Entrées de base de données

OneSignal crée ces entrées dans votre table wp_postmeta :
EntréeDescription
onesignal_meta_box_presentConfirme que OneSignal était actif lors de la publication de l’article
onesignal_send_notificationSuit l’envoi de notification
statusStatut HTTP de la notification (200 = succès)
response_bodyRéponse API avec ID de notification et nombre de destinataires
recipientsNombre d’utilisateurs qui ont reçu la notification

Obtenir de l’aide


Prochaines étapes

Après avoir terminé cette configuration :
  1. Surveiller les performances : Vérifiez régulièrement votre tableau de bord OneSignal pour la croissance des abonnés et les métriques d’engagement
  2. Optimiser les invites : Expérimentez avec différents timings et messages d’invite
  3. Segmenter les utilisateurs : Implémentez le marquage pour envoyer des notifications plus ciblées
  4. Tester minutieusement : Envoyez des notifications de test à différents appareils et navigateurs
  5. Planifier la stratégie de contenu : Développez une stratégie de notification qui ajoute de la valeur sans surcharger les utilisateurs
Pour des fonctionnalités avancées comme les tests A/B, la segmentation avancée et les analyses détaillées, envisagez de passer à un plan OneSignal payant.