Google Tag Manager kurulumu

​

Ön Koşullar

• HTTPS’yi destekleyen bir site.
• Sitenin container’ı için GTM’de değişiklikleri yayınlayabilmeniz.
• Tamamladınız: OneSignal Web SDK kurulumu akışını Siteye Kod Ekle adımına kadar. Bu size şunları sağlar:
  • Bir OneSignal Web Push uygulaması ve App ID.
  • OneSignal Service Worker kurulumu.

​

Kurulum

​

1. OneSignal web uygulamanızı kurun

​

2. GTM değişkenleri oluşturun

1. GTM’de Variables > New kısmına gidin.
2. Constant seçin.
3. Adını ONESIGNAL_APP_ID olarak belirleyin.
4. Değeri OneSignal App ID’niz olarak ayarlayın.
5. Kaydedin.

• Data Layer Variable (önerilen)
• First-Party Cookie
• DOM Variable (gelişmiş)

​

3. OneSignal init etiketini oluşturun

1. GTM’de Tags > New kısmına gidin.
2. Etiketi adlandırın: OneSignal - Init
3. Tag Type: Custom HTML
4. Aşağıdaki kodu yapıştırın.
5. Advanced Settings > Tag firing options altında Once per page olarak ayarlayın.
6. Triggering altında Initialization - All Pages seçin.

<!--
  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. External ID ve Etiketleri ayarlayın

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

• Etiket adı: OneSignal – Set External ID
• Etiket türü: Custom HTML
• Etiket tetikleme seçenekleri: Once per page
• Tetikleyici:
  • OneSignalInitialized için özel olay tetikleyicisi oluşturun (yukarıdaki OneSignal - Init etiketinde ayarlanmıştır) ve
  • İsteğe bağlı olarak, kullanıcı ID’sinin sayfa yüklemesinde mevcut olduğunu biliyorsanız.

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

​

Veri Etiketlerini ayarlayın

• Ad: OneSignal - Add Tags
• Etiket Türü: Custom HTML
• Etiket tetikleme seçenekleri: Once per page
• Tetikleyici:
  • OneSignalInitialized ve
  • Etiket verilerinin mevcut olduğu koşulunuz (örneğin: giriş sonrası, profil sayfasında, satın alma sonrası).

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

​

Consent Mode ve gizlilik hususları

• Yalnızca onaydan sonra (AB/Birleşik Krallık için yaygın), veya
• Hemen (varsayılan olarak “işlevsel” depolamaya izin verilen yerlerde yaygın).

• Kişisel verilerin işlenmesi
• Web SDK Gizlilik Yöntemleri

​

Test

1. GTM’de Preview modunu açın.
2. Sitenizi yükleyin ve onaylayın:
   • OneSignal - Init bir kez tetiklenir.
   • OneSignalInitialized, GTM olay zaman çizelgesinde görünür (olay push’unu tuttuyseniz).
3. Web sitenize abone olun. İstem ayrıntıları için Web izin istemleri’ne bakın.
4. OneSignal panosunda Audience > Subscriptions’a gidin ve onaylayın:
   • Kabul ettikten sonra bir Abonelik görünür.
   • Bir External ID ayarladıysanız görünür olur.
5. Messages > New Push’tan bir test push gönderin.

​

Sorun Giderme

• Init etiketi tetiklenir ancak SDK asla yüklenmez
  • Content Security Policy (CSP)‘nin https://cdn.onesignal.com’u engelleyip engellemediğini kontrol edin.
  • Reklam engelleyicileri/betik engelleyicileri kontrol edin.
• dataLayer hataları
  • Herhangi bir dataLayer.push() çağrısından önce window.dataLayer = window.dataLayer || []’nin ayarlandığından emin olun.
• Yinelenen istemler / yinelenen SDK yüklemesi
  • OneSignal’i site kodu, bir CMS eklentisi veya başka bir GTM etiketi aracılığıyla da yüklemediğinizden emin olun.
• Add Tags çalışır ancak OneSignal’de görünmez
  • Trigger Group’un OneSignalInitialized’i beklediğini onaylayın.
  • Kullanıcı eylem tetikleyicinizin gerçekten tetiklendiğini onaylayın.
  • Etiketlerin geçerli anahtar/değer çiftleri olduğunu ve Plan limitleri içinde olduğunu onaylayın.

​

Sonraki adımlar

• Web izin istemleri
• Kullanıcı Veri Etiketleri
• Web SDK referansı