Configuration de Google Tag Manager

​

Prérequis

• Un site qui prend en charge HTTPS.
• Vous pouvez publier des modifications dans GTM pour le conteneur du site.
• Complétez le flux de configuration du SDK Web OneSignal jusqu’à atteindre l’étape Ajouter le code au site. Si vous faites cela, vous aurez :
  • Une application OneSignal Web Push créée avec un OneSignal App ID.
  • La configuration du OneSignal Service Worker.

​

Configuration

​

1. Configurez votre application web OneSignal

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

​

2. Créez des variables GTM

1. Dans GTM, allez dans Variables > New.
2. Choisissez Constant.
3. Nommez-la os_app_id.
4. Définissez la valeur sur votre OneSignal App ID.
5. Enregistrez.

Création d'une variable OneSignal App ID

• Data Layer Variable (recommandé)
• First-Party Cookie
• DOM Variable (avancé)

1. Dans GTM, allez dans Variables > New.
2. Choisissez Data Layer Variable.
3. Nommez-la external_id.
4. Définissez le Data Layer Variable Name sur external_id.
5. Ne définissez pas de valeur par défaut.
6. Enregistrez.

1. Dans GTM, allez dans Variables > New.
2. Variable Type : Data Layer Variable.
3. Nommez-la onesignal_id.
4. Définissez le Data Layer Variable Name sur onesignal_id.
5. Ne définissez pas de valeur par défaut.
6. Enregistrez.

​

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

<script>
  // Ensure dataLayer exists before pushing events
  window.dataLayer = window.dataLayer || [];

  // OneSignal v16 GTM-friendly loader + init
  window.OneSignalDeferred = window.OneSignalDeferred || [];

  (function loadOneSignalSDK() {
    // Prevent double-loading if another tag/theme/plugin already loaded it
    if (window.OneSignal || document.getElementById('onesignal-sdk')) return;

    var s = document.createElement('script');
    s.id = 'onesignal-sdk';
    s.src = 'https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js';
    s.async = true;

    s.onload = function () {
      // Queue init after SDK loads
      window.OneSignalDeferred.push(function (OneSignal) {
        OneSignal.init({
          appId: "{{os_app_id}}"
        })
        .then(function () {
          // Optional: use this as a GTM trigger signal for dependent tags
          window.dataLayer.push({ event: "OneSignalInitialized" });
        })
        .catch(function (e) {
          // Avoid breaking other tags; log for debugging
          console.error("OneSignal initialization failed:", e);
          window.dataLayer.push({
            event: "OneSignalInitFailed",
            oneSignalError: (e && e.message) ? e.message : String(e)
          });
        });
      });
    };

    s.onerror = function () {
      window.dataLayer.push({ event: "OneSignalSdkLoadFailed" });
    };

    document.head.appendChild(s);
  })();
</script>

5. Configurez le timing sous Advanced Settings > Tag firing options sur Once per page.
6. Sous Triggering, sélectionnez Initialization - All Pages.

Configuration de la balise OneSignal - Init

​

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

​

Définissez external_id et capturez le onesignal_id

• Identifier les utilisateurs dans OneSignal avec votre propre ID utilisateur (external_id)
• Capturer l’ID généré par OneSignal pour l’analytique ou l’utilisation GTM en aval lorsqu’aucun external ID n’existe

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    external_id: "user_12345"
  });
</script>

• Tag name : OneSignal – Set External ID or Get OneSignal ID
• Tag type : Custom HTML
• Tag firing options : Once per page (recommandé)
• Trigger : Utiliser avec l’événement OneSignalInitialized (défini dans la balise OneSignal - Init ci-dessus)

<script>
  window.dataLayer = window.dataLayer || [];
  window.OneSignalDeferred = window.OneSignalDeferred || [];

  // Helper function to validate the external ID
  function isValidExternalId(val) {
    if (val == null) return false;
    var s = String(val).trim().toLowerCase();
    if (!s) return false;
    return s !== "undefined" && s !== "null" && s !== "(not set)";
  }

  // Push Subscription Change Listener
  function pushSubscriptionChangeListener(event) {
    console.log("subscription ID", event.current.id);
    console.log("event.current.optedIn", event.current.optedIn);
    // Save the OneSignal ID to the dataLayer
    var oneSignalId = OneSignal.User && OneSignal.User.onesignalId;
    if (oneSignalId && event.current.optedIn) {
      console.log("oneSignalId: ", oneSignalId);
      dataLayer.push({
        event: "OneSignalIdAvailable",
        onesignal_id: oneSignalId
      });
    }
  }

  OneSignalDeferred.push(function (OneSignal) {
    // Save the external ID to the dataLayer
    var externalId = "{{external_id}}";
    if (isValidExternalId(externalId)) {
      console.log("externalId: ", externalId);
      OneSignal.login(String(externalId).trim())
        .then(function () {
          dataLayer.push({
            event: "OneSignalExternalIdSet",
            external_id: String(externalId).trim()
          });
        })
        .catch(function () {
          dataLayer.push({ event: "OneSignalExternalIdSetFailed" });
        });
    }

    // Set up Subscription Change Listener
    OneSignal.User.PushSubscription.addEventListener("change", pushSubscriptionChangeListener);
  });
</script>

​

Définissez les balises de données

• Name : OneSignal - Add Tags.
• Tag Type : Custom HTML.
• Tag firing options : Once per page (recommandé)
• Trigger :
  • Utiliser avec l’événement OneSignalInitialized (défini dans la balise OneSignal - Init ci-dessus)
  • Votre condition pour que la balise se déclenche (par ex. “Connexion réussie”, “Page de profil”, “Achat”, etc.)

<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  window.OneSignalDeferred.push(function(OneSignal) {
    OneSignal.User.addTags({
      "TAG_1": "VALUE_1",
      "TAG_2": "VALUE_2"
    });
  });
</script>

​

Consent Mode et considérations de confidentialité

• Uniquement après consentement (courant pour l’UE/Royaume-Uni), ou
• Immédiatement (courant là où le stockage “fonctionnel” est autorisé par défaut).

• Gestion des données personnelles
• Méthodes de confidentialité du SDK Web

​

Test

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 timeline 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 sur les invites.
4. Dans le tableau de bord OneSignal, allez dans Audience > Subscriptions et confirmez qu’un abonnement apparaît après votre inscription. Vous devriez également voir un External ID si vous en avez défini un.
5. Envoyez un push de test depuis Messages > New Push.

​

Dépannage

• La balise Init se déclenche, mais le SDK ne se charge jamais
  • Vérifiez si une Content Security Policy (CSP) bloque https://cdn.onesignal.com.
  • Vérifiez les bloqueurs de publicités/bloqueurs de scripts.
• Erreurs 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 que vous ne chargez pas également 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.

​

Prochaines étapes

• Demandes de permission web
• Balises de données utilisateur
• Référence du SDK Web