Passer au contenu principal
Ce guide explique comment intégrer OneSignal à votre site Web en utilisant Google Tag Manager (GTM). Il couvre la configuration du service worker OneSignal, le code d’initialisation mis à jour et introduit une nouvelle étape pour envoyer des tags de profil utilisateur (attributs) à OneSignal.

​
Configurer votre application OneSignal

Suivez notre documentation de Configuration push Web. Lorsque vous y êtes invité, notez votre ID d’application, que vous remplacerez dans le code ci-dessous.

​
Copier et mettre à jour le code d’initialisation OneSignal

Lorsque vous arrivez à l’étape Add Code to Site, cliquez sur Copy Code.

Copiez le code fourni dans votre tableau de bord OneSignal.

Vous devrez apporter quelques ajustements au code pour qu’il fonctionne avec Google Tag Manager comme indiqué ici : 
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  // remove async
  OneSignalDeferred.push( function(OneSignal) {
    // remove await
    OneSignal.init({
      // replace with YOUR_APP_ID
      appId: "YOUR_APP_ID",
    })
    // Add event to track OneSignal initialization if desired
      .then(function() {
        dataLayer.push({ event: 'OneSignalInitialized' });
      }).catch(function(e) {
        console.error("OneSignal initialization failed:", e);
    });
  });
</script>

​
Configurer Google Tag Manager

Connectez-vous à votre compte Google Tag Manager et configurez un nouveau tag appelé OneSignal Init. La Configuration du tag/Type de tag doit être Custom HTML. Collez le code OneSignal dans le champ HTML. Sous Advanced Settings > Tag firing options, sélectionnez Once per page.
Pour Triggering, sélectionnez Initialization - All Pages.
Cliquez sur Save en haut à droite pour enregistrer votre tag. De retour sur votre Workspace, vous pouvez Publier ou Soumettre pour déployer les modifications. Assurez-vous que votre conteneur est installé sur chaque page du site où vous souhaitez que OneSignal se charge et que le tag d’initialisation se déclenche comme prévu.
Consultez l’aide de Google Tag Manager si vous avez besoin d’une assistance supplémentaire pour la configuration.

​
Tests

Visitez votre site Web et vous devriez être invité à vous abonner aux notifications push en fonction des paramètres d’invite que vous avez configurés. Consultez Invites de permission Web pour plus de détails. Vérifiez votre tableau de bord OneSignal Audience > Subscriptions pour voir vos Abonnements. Trouvez votre abonnement et définissez-le comme Abonnements de test. Ensuite, rendez-vous dans Messages > New Push pour vous envoyer une notification.
Si vous rencontrez des problèmes, consultez le Guide de dépannage des push Web pour les corrections courantes.
Visitez les Tutoriels push Web pour les prochaines étapes ou continuez ci-dessous pour d’autres options GTM.

​
Ajouter des tags de données

Cette étape envoie des Tags de données utilisateur personnalisés (attributs) à OneSignal depuis GTM en utilisant la méthode OneSignal.User.addTags. Utilisez l’extrait de code suivant pour définir des tags. Remplacez "TAG_1" et "VALUE_1" par la clé et la valeur de tag souhaitées : 
<script>
window.OneSignalDeferred = window.OneSignalDeferred || [];
OneSignalDeferred.push(function(OneSignal) {
  OneSignal.User.addTags({
      "TAG_1": "VALUE_1"
  });
});
</script>
Pour garantir que le tag se déclenche dans les bonnes conditions, configurez un groupe de déclencheurs qui combine :
  • Déclencheur 1 : Un déclencheur d’événement personnalisé qui se déclenche sur l’événement OneSignalInitialized (garantissant que OneSignal a été initialisé).
  • Déclencheur 2 : Le déclencheur supplémentaire que vous souhaitez utiliser (par exemple, une page vue ou un événement utilisateur personnalisé).
Pour créer le groupe de déclencheurs :
  1. Dans votre espace de travail GTM, accédez à Triggers et cliquez sur New.
  2. Sélectionnez Trigger Group comme type de déclencheur.
  3. Nommez le groupe de déclencheurs (par ex., “OS Tag – Initialized & Custom Trigger”).
  4. Sous Configure Trigger Group, ajoutez les déclencheurs suivants :
    1. Déclencheur d’événement personnalisé :
      1. Choisissez Custom Event comme type de déclencheur.
      2. Définissez le nom de l’événement sur OneSignalInitialized.
    2. Déclencheur supplémentaire :
      1. Sélectionnez le déclencheur qui répond à vos critères (par ex., All Pages, ou un déclencheur personnalisé tel qu’après la connexion de l’utilisateur).
  5. Enregistrez le groupe de déclencheurs.
  1. Dans votre espace de travail GTM, cliquez sur New Tag.
  2. Définissez la Tag Configuration sur Custom HTML et collez l’extrait de code de l’étape 5.1.
  3. Sous Advanced Settings > Tag firing options, sélectionnez Once per page (ou ajustez en fonction de vos besoins).
  4. Pour Triggering, sélectionnez le groupe de déclencheurs que vous avez créé à l’étape 5.2.
  5. Enregistrez le tag.

​
Publier les modifications

Après avoir configuré le nouveau tag et son groupe de déclencheurs, publiez votre conteneur pour déployer la nouvelle fonctionnalité de marquage utilisateur.

​
Dépannage

Utilisez le mode Aperçu et débogage de GTM pour vous assurer que le tag d’initialisation et le tag de marquage du profil utilisateur se déclenchent correctement. Vérifiez la console du navigateur pour toute erreur liée à OneSignal et consultez votre tableau de bord OneSignal pour les notifications d’erreur. Événements DataLayer : Confirmez que les événements (par ex., OneSignalInitialized) sont poussés dans le dataLayer comme prévu pour un suivi ultérieur dans votre configuration d’analyse. Consultez Dépannage du SDK Web pour plus de détails.
Avec ces mises à jour, votre site Web utilise désormais la dernière initialisation OneSignal et envoie des tags de profil utilisateur personnalisés via GTM en utilisant la méthode OneSignal.User.addTags.Le groupe de déclencheurs ajouté garantit que le tag se déclenche uniquement après l’initialisation de OneSignal et lorsque les conditions choisies sont remplies.
Pour une personnalisation supplémentaire ou un suivi avancé, consultez notre référence du SDK Web et la documentation de Google Tag Manager. Si vous avez des questions ou rencontrez des problèmes, veuillez consulter Dépannage du SDK Web ou contacter le support OneSignal.