Skip to main content
このガイドでは、Google Tag Manager(GTM)を使用して OneSignal Web SDK を読み込み、初期化する方法を説明します。その後、オプションで初期化後に External ID と OneSignal タグを設定できます。

前提条件

  • HTTPS をサポートするサイト。
  • サイトのコンテナに対して GTM で変更を公開できること。
  • OneSignal の Web SDK セットアップ フローを サイトにコードを追加 まで完了していること。これにより以下が得られます:

セットアップ

1. OneSignal Web アプリをセットアップする

Web SDK セットアップ を サイトにコードを追加 まで進めます。ここで OneSignal App ID を取得します。
OneSignal Web SDK セットアップダッシュボードのサイトにコードを追加ステップ

このステップに到達したら、Google Tag Manager で動作するようにコードにいくつかの調整を行う必要があります。

OneSignal Service Worker ファイルをサーバーに直接アップロードする必要があります。OneSignal Service Worker を参照してください。

2. GTM 変数を作成する

タグ全体で参照する値の GTM 変数を作成します。これによりハードコーディングを避け、セットアップの保守が容易になります。 ONESIGNAL_APP_ID 変数を作成する
  1. GTM で、Variables > New に移動します。
  2. Constant を選択します。
  3. ONESIGNAL_APP_ID という名前を付けます
  4. 値を OneSignal App ID に設定します。
  5. 保存
Google Tag Manager で OneSignal App ID 変数を作成する

OneSignal App ID 変数の作成

GTM のどこでも {{ ONESIGNAL_APP_ID }} を使用して App ID を参照できるようになりました。
ONESIGNAL_EXTERNAL_ID 変数を作成する(推奨) ユーザーを外部識別子と関連付ける場合(たとえば、データベースまたは認証システムからのユーザー ID)、この変数を使用します。 サイトで値がどのように利用可能かに基づいて変数タイプを選択します。一般的なオプション:
  • Data Layer Variable(推奨)
  • First-Party Cookie
  • DOM Variable(高度)

3. OneSignal init タグを作成する

  1. GTM で、Tags > New に移動します
  2. タグに名前を付けます:OneSignal - Init
  3. Tag Type:Custom HTML
  4. 以下のコードを貼り付けます。
  5. Advanced Settings > Tag firing options で、Once per page に設定します。
  6. Triggering で、Initialization - All Pages を選択します。
HTML
Google Tag Manager で OneSignal - Init タグを設定する

OneSignal - Init タグの設定

同意バナー / CMP を使用している場合は、以下の Consent Mode とプライバシーに関する考慮事項オプションを参照してください。

4. External ID とタグを設定する

External ID の設定はオプションですが、推奨されます。デバイス間でユーザーを識別し、バックエンドと同期できるようになります。 ONESIGNAL_EXTERNAL_ID を dataLayer にプッシュする この例では、GTM が ONESIGNAL_EXTERNAL_ID 変数(ステップ 2 で作成)を介して読み取れるように、ユーザー ID を dataLayer にプッシュする方法を示します。
HTML
External ID を設定する GTM タグを作成する タグの設定:
  • タグ名:OneSignal – Set External ID
  • タグタイプ:Custom HTML
  • Tag firing options:Once per page
  • Trigger:
    • OneSignalInitialized のカスタムイベントトリガーを作成(上記の OneSignal - Init タグで設定)し、
    • オプションでページ読み込み時にユーザー ID が利用可能であることがわかっている場合。
External ID を設定するために必要なメソッドは OneSignal.login(externalId) です。ここで externalId は文字列です。{{ONESIGNAL_EXTERNAL_ID}} が空(または GTM が “undefined” / “null” に置換した場合)、login 呼び出しはスキップされ、External ID は設定されません。これは一般的な GTM のタイミング問題です。

タグを設定する

Web SDK を使用して OneSignal タグ を送信します。 タグの設定:
  • 名前:OneSignal - Add Tags
  • Tag Type:Custom HTML
  • Tag firing options:Once per page
  • Trigger:
    • OneSignalInitialized、および
    • タグデータが利用可能な条件(例:ログイン後、プロフィールページ、購入後)。
このコードを貼り付けて、サンプルのタグ TAG と VALUE を置き換えます。
HTML
ユーザーデータが利用可能な場合にのみタグを送信してください(例:ログイン後、プロフィールの読み込み後、または既知のコンバージョンイベント後)。
サイトで Consent Mode / CMP を使用している場合、OneSignal をいつ読み込むかを決定します:
  • 同意後のみ(EU / UK で一般的)、または
  • 即座に(デフォルトで「機能的」ストレージが許可されている場所で一般的)。
GTM は、Consent Initialization トリガーとタグレベルの同意コントロールをサポートしており、ユーザーの同意に基づいてタグの動作を管理します。ただし、OneSignal は SDK がいつ読み込まれるかを制御するためのプライバシー同意メソッドも提供しています。

テスト

  1. GTM でプレビューモードを開きます。
  2. サイトを読み込んで確認します:
    • OneSignal - Init が一度発火します。
    • OneSignalInitialized が GTM イベントタイムラインに表示されます(イベントプッシュを保持した場合)。
  3. ウェブサイトに登録します。プロンプトの詳細については、Web パーミッションプロンプト を参照してください。
  4. OneSignal ダッシュボードで、Audience > Subscriptions に移動し確認します:
    • オプトイン後にサブスクリプションが表示されること。
    • External ID を設定した場合、External ID が表示されること。
  5. Messages > New Push からテストプッシュを送信します。
初期化が機能している場合、オプトイン後に OneSignal にサブスクリプションが表示されます。

トラブルシューティング

  • Init タグが発火するが、SDK が読み込まれない
    • Content Security Policy(CSP)が https://cdn.onesignal.com をブロックしていないか確認してください。
    • 広告ブロッカー / スクリプトブロッカーを確認してください。
  • dataLayer エラー
    • dataLayer.push() 呼び出しの前に window.dataLayer = window.dataLayer || [] が設定されていることを確認してください。
  • 重複プロンプト / 重複 SDK 読み込み
    • サイトコード、CMS プラグイン、または別の GTM タグ経由で OneSignal を読み込んでいないことを確認してください。
  • Add Tags が実行されるが OneSignal に表示されない
    • Trigger Group が OneSignalInitialized を待っていることを確認してください。
    • ユーザーアクショントリガーが実際に発火していることを確認してください。
    • タグが有効なキー / 値のペアであり、プラン制限 内であることを確認してください。
それでもヘルプが必要な場合は、Web SDK トラブルシューティング を参照して、一般的な修正方法を確認してください。

次のステップ