Skip to main content
Ce guide vous montre comment charger et initialiser le SDK Web OneSignal en utilisant Google Tag Manager (GTM), puis définir éventuellement un External ID et envoyer des balises OneSignal après l’initialisation.

Prérequis

  • Un site qui prend en charge HTTPS.
  • Vous pouvez publier des modifications dans GTM pour le conteneur du site.
  • Vous avez complété le flux de configuration du SDK Web OneSignal jusqu’à Ajouter le code au site. Cela vous donne :

Configuration

1. Configurez votre application web OneSignal

Suivez la configuration du SDK Web jusqu’à atteindre l’étape Ajouter le code au site. C’est ici que vous obtiendrez l’OneSignal App ID.
Étape Ajouter le code au site dans le tableau de bord de configuration du SDK Web OneSignal

Une fois que vous atteignez cette étape, vous devrez apporter quelques ajustements au code pour qu'il fonctionne avec Google Tag Manager.

Vous devez télécharger le fichier OneSignal Service Worker directement sur votre serveur. Consultez OneSignal Service Worker.

2. Créez des variables GTM

Créez des variables GTM pour les valeurs que vous référencez dans les balises. Cela évite de coder en dur les valeurs et facilite la maintenance de votre configuration. Créez une variable ONESIGNAL_APP_ID
  1. Dans GTM, allez dans Variables > New.
  2. Choisissez Constant.
  3. Nommez-la ONESIGNAL_APP_ID
  4. Définissez la valeur sur votre OneSignal App ID.
  5. Enregistrez
Création d'une variable OneSignal App ID dans Google Tag Manager

Création d'une variable OneSignal App ID

Vous pouvez maintenant référencer votre App ID n’importe où dans GTM en utilisant {{ ONESIGNAL_APP_ID }}.
Créez une variable ONESIGNAL_EXTERNAL_ID (Recommandé) Utilisez cette variable si vous associez des utilisateurs à un identifiant externe (par exemple, un ID utilisateur de votre base de données ou système d’authentification). Choisissez un type de variable en fonction de l’emplacement de la valeur sur votre site. Options courantes :
  • Data Layer Variable (recommandé)
  • First-Party Cookie
  • DOM Variable (avancé)

3. Créez la balise d’initialisation OneSignal

  1. Dans GTM, allez dans Tags > New
  2. Nommez la balise : OneSignal - Init
  3. Tag Type : Custom HTML
  4. Collez le code ci-dessous.
  5. Sous Advanced Settings > Tag firing options, définissez Once per page.
  6. Sous Triggering, sélectionnez Initialization - All Pages.
HTML
Configuration de la balise OneSignal - Init dans Google Tag Manager

Configuration de la balise OneSignal - Init

Si vous utilisez une bannière de consentement / CMP, consultez les options Consent Mode et considérations de confidentialité ci-dessous.

4. Définissez l’External ID et les balises

La définition de l’External ID est optionnelle mais recommandée car elle vous permet d’identifier les utilisateurs sur plusieurs appareils et de synchroniser avec votre backend. Envoyer ONESIGNAL_EXTERNAL_ID dans le dataLayer Cet exemple montre comment vous pouvez transmettre un ID utilisateur dans le dataLayer afin que GTM puisse le lire via la variable ONESIGNAL_EXTERNAL_ID (créée à l’étape 2).
HTML
Créez une balise GTM pour définir l’External ID Configuration de la balise :
  • Nom de la balise : OneSignal – Set External ID
  • Type de balise : Custom HTML
  • Options de déclenchement : Once per page
  • Déclencheur :
    • Créez un déclencheur d’événement personnalisé pour OneSignalInitialized (défini dans la balise OneSignal - Init ci-dessus) et
    • Éventuellement si vous savez que l’ID utilisateur est disponible au chargement de la page.
La méthode requise pour définir l’External ID est OneSignal.login(externalId)externalId est une chaîne.Si {{ONESIGNAL_EXTERNAL_ID}} est vide (ou si GTM substitue “undefined” / “null”), l’appel login sera ignoré et l’External ID ne sera pas défini. C’est un problème de timing GTM courant.

Définir les balises

Cette étape envoie des balises OneSignal à l’aide du SDK Web. Configuration de la balise :
  • Nom : OneSignal - Add Tags
  • Type de balise : Custom HTML
  • Options de déclenchement : Once per page
  • Déclencheur :
    • OneSignalInitialized, et
    • Votre condition pour que les données de balise soient disponibles (par exemple : après la connexion, sur une page de profil, après un achat).
Collez ce code et remplacez l’exemple de balise TAG et VALUE.
HTML
N’envoyez des balises que lorsque vous avez les données utilisateur disponibles (par exemple : après la connexion, après le chargement d’un profil ou après un événement de conversion connu).
Si votre site utilise Consent Mode / un CMP, décidez si OneSignal doit se charger :
  • Seulement après consentement (courant pour l’UE/Royaume-Uni), ou
  • Immédiatement (courant là où le stockage “fonctionnel” est autorisé par défaut).
GTM prend en charge un déclencheur d’initialisation du consentement et des contrôles de consentement au niveau de la balise pour gérer le comportement des balises en fonction du consentement de l’utilisateur. Cependant, OneSignal fournit également des méthodes de consentement de confidentialité pour contrôler quand le SDK se charge.

Tests

  1. Dans GTM, ouvrez le mode Preview.
  2. Chargez votre site et confirmez :
    • OneSignal - Init se déclenche une fois.
    • OneSignalInitialized apparaît dans la chronologie des événements GTM (si vous avez conservé le push d’événement).
  3. Abonnez-vous à votre site web. Consultez Demandes de permission web pour les détails des invites.
  4. Dans le tableau de bord OneSignal, allez dans Audience > Subscriptions et confirmez :
    • Un abonnement apparaît après avoir accepté.
    • Un External ID est visible si vous en avez défini un.
  5. Envoyez un push de test depuis Messages > New Push.
Si l’initialisation fonctionne, vous verrez les abonnements apparaissant dans OneSignal après avoir accepté.

Dépannage

  • La balise Init se déclenche, mais le SDK ne se charge jamais
    • Vérifiez si la Content Security Policy (CSP) bloque https://cdn.onesignal.com.
    • Vérifiez les bloqueurs de publicité/bloqueurs de scripts.
  • Erreurs de dataLayer
    • Assurez-vous que window.dataLayer = window.dataLayer || [] est défini avant tout appel dataLayer.push().
  • Invites en double / chargement en double du SDK
    • Assurez-vous de ne pas charger OneSignal via le code du site, un plugin CMS ou une autre balise GTM.
  • Add Tags s’exécute mais n’apparaît pas dans OneSignal
    • Confirmez que le Trigger Group attend OneSignalInitialized.
    • Confirmez que votre déclencheur d’action utilisateur se déclenche réellement.
    • Confirmez que les balises sont des paires clé/valeur valides et dans les limites du plan.
Si vous avez encore besoin d’aide, consultez Dépannage du SDK Web pour les corrections courantes.

Prochaines étapes