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.
• Vous avez complété le flux de configuration du SDK Web OneSignal jusqu’à Ajouter le code au site. Cela vous donne :
  • Une application OneSignal Web Push et un App ID.
  • La configuration du OneSignal Service Worker.

​

Configuration

​

1. Configurez votre application web OneSignal

​

2. Créez des variables GTM

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

• 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.

<!--
  OneSignal – Web SDK initialization using Google Tag Manager

  This snippet:
  - Loads the OneSignal Web SDK
  - Initializes OneSignal with your App ID
  - Enables the Subscription Bell (notifyButton)

  Works for most sites out of the box.
-->

<!-- 1. Load the OneSignal Web SDK (v16) -->
<!-- This script must load on every page where you want OneSignal available -->
<script
  src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js"
  defer>
</script>

<script>
  // Ensure the GTM dataLayer exists
  // Used here only to optionally push a "OneSignalInitialized" event
  window.dataLayer = window.dataLayer || [];

  // OneSignalDeferred is a queue that runs once the SDK is fully loaded
  window.OneSignalDeferred = window.OneSignalDeferred || [];

  // 2. Initialize OneSignal once the SDK is ready
  window.OneSignalDeferred.push(function (OneSignal) {

    OneSignal.init({
      /*
        REQUIRED
        It is recommended to set the OneSignal App ID as a GTM variable.
        You can find this in your OneSignal Dashboard under:
        Settings > Keys & IDs
      */
      appId: "{{ONESIGNAL_APP_ID}}",

      /*
        OPTIONAL – ONLY NEEDED IF YOUR SERVICE WORKER IS NOT AT THE ROOT

        If your service worker is hosted at:
          /OneSignalSDKWorker.js

        …then you should NOT set serviceWorkerPath or serviceWorkerParam.

        Uncomment and update the options below ONLY if your service worker
        is hosted in a subdirectory (for example: /push/onesignal/).
      */

      //serviceWorkerPath: "push/onesignal/OneSignalSDKWorker.js",
      //serviceWorkerParam: { scope: "/push/onesignal/" },

      /*
        OPTIONAL
        Enable the OneSignal Subscription Bell (notifyButton),
        which allows users to subscribe or unsubscribe from notifications.
        For more prompt options, see: https://documentation.onesignal.com/docs/en/permission-requests
      */
      notifyButton: {
        enable: true
      }
    })
    .then(function () {
      // OneSignal initialized successfully
      console.log("[OneSignal] init success");

      // Recommended: push an event to GTM for triggering other tags
      window.dataLayer.push({
        event: "OneSignalInitialized"
      });
    })
    .catch(function (e) {
      // Initialization failed (invalid App ID, missing service worker, etc.)
      console.log("[OneSignal] init failed", e);
    });
  });
</script>

​

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

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

  // Get your user ID from your database or auth system.
  // Ensure this is a string value.
  var userId = "your_user_id_here";

  dataLayer.push({
    ONESIGNAL_EXTERNAL_ID: String(userId),
  });
</script>

• 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.

<script>
  // OneSignalDeferred ensures this runs after the OneSignal SDK is ready
  window.OneSignalDeferred = window.OneSignalDeferred || [];

  window.OneSignalDeferred.push(function (OneSignal) {
    /*
      Read the External ID from Google Tag Manager.
      This should be a GTM variable (Data Layer Variable or Custom JS Variable).
    */
    var externalId = "{{ONESIGNAL_EXTERNAL_ID}}";

    console.log("[OneSignal] raw external ID from GTM:", externalId);

    /*
      Basic validation:
      - GTM may substitute undefined/null as strings
      - OneSignal.login requires a string
    */
    if (!externalId || externalId === "undefined" || externalId === "null") {
      console.log("[OneSignal] External ID missing, skipping login");
      return;
    }

    // Ensure the External ID is a clean string
    externalId = String(externalId).trim();

    console.log("[OneSignal] Calling OneSignal.login with External ID:", externalId);

    /*
      Log the user into OneSignal using the External ID.
      This links the current browser/device to this user.
    */
    OneSignal.login(externalId)
      .then(function () {
        console.log("[OneSignal] External ID set successfully:", externalId);
      })
      .catch(function (e) {
        console.log("[OneSignal] Failed to set External ID", e);
      });
  });
</script>

​

Définir les balises de données

• 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).

<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é

• Seulement 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

​

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.

​

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.

​

Prochaines étapes

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