Browser SDK リファレンス
Browser SDK window.sdk のリファレンスです。ページから PWA インストールを促す方法、訪問者をプッシュに購読する方法、イベントを送信する方法、そのために必要な設定について説明します。全般的な概要は Browser SDK を、ご自身のプレランディングへの接続方法は プレランディング上の SDK をご覧ください。
window.pwaConfig の設定
SDK はページ上でスクリプトタグの前に設定した window.pwaConfig オブジェクトから設定を読み取ります。Qubix が配信するページではオブジェクトが自動的に設定されます。ご自身のプレランディングでは、手動で設定してください。
| フィールド | 目的 |
|---|---|
pwaId | PWA 識別子。インストールとプッシュに必須 |
domain | ページのドメイン。マニフェストとプッシュに必須 |
vapidKey | プッシュ用のキー。通常、/sdk.js 読み込み時に自動的にインライン化されるため、手動での設定は不要 |
offerId | オファー(明示的に渡す必要がある場合) |
campaignId | キャンペーン(明示的に渡す必要がある場合) |
params | 追加のトラッキングタグ |
previewMode | プレビューモード:イベントは送信されない |
PWA 識別子(pwaId)は PWA Apps セクションのアプリカードから取得します。
プッシュを購読する
sdk.subscribePush() はブラウザに通知の許可を求め、サブスクリプションを作成します。明示的に呼び出す必要があります — たとえばボタンクリック時などです。自動では発火しません。
const subscription = await sdk.subscribePush()
if (subscription) {
// 訪問者が通知を許可し、購読が完了した
}
内部での処理:
- ブラウザの許可プロンプトが表示されます。
- 訪問者が許可すると、サブスクリプションが作成されて Qubix に送信されます。
- 繰り返し呼び出しは安全です。訪問者がすでに購読済みの場合、プロンプトは再度表示されません。
プッシュにアプリのインストールは必要ありません — 訪問者は通常のページで購読できます。
プッシュが機能するのは、セキュアな接続(HTTPS)と Qubix に設定されたドメイン上のみです。詳細は プレランディング上の SDK をご覧ください。
PWA をインストールする
window.pwaConfig に pwaId が設定されている場合、SDK は sdk.pwa のメソッドを提供します。
| メソッド | 動作 |
|---|---|
sdk.pwa.init() | 準備:サービスワーカーを登録し、アプリマニフェストを添付 |
sdk.pwa.install() | システムのアプリインストールプロンプトを表示 |
sdk.pwa.canInstall() | 現時点でインストールが利用可能かどうか |
sdk.pwa.isInstalled() | アプリがすでにインストール済みかどうか |
sdk.pwa.open() | インストール済みのアプリを開く |
init、install、isInstalled は非同期です — await を使って呼び出してください。canInstall と open はすぐに値を返します。
if (sdk.pwa && sdk.pwa.canInstall()) {
await sdk.pwa.install()
}
インストールプロンプトはブラウザ自体が表示するため、ブラウザのルールが適用されます。HTTPS、添付済みのマニフェスト(SDK が自動添付)、そして通常はページ上での訪問者のアクション(クリック、スクロール)が必要です。そのため、インストールボタンは通常、明示的なタップに紐づけられています。
イベント
SDK は主要な場面を自動的にアナリティクスに報告します。これらはレポートやイベントストリームで確認できます。
| イベント | タイミング |
|---|---|
campaign_visit | ページへの訪問(自動送信) |
push_prompt_shown | プッシュ許可プロンプトが表示された |
push_allow | 訪問者がプッシュを許可した |
push_deny | 訪問者がプッシュを拒否した |
push_ignored | 訪問者がプロンプトを選択せずに閉じた |
install_accepted | 訪問者がアプリのインストールに同意した |
install_rejected | 訪問者がインストールを辞退した |
独自のイベントを手動で送信することもできます。
sdk.sendEvent('my_button_click', { place: 'hero' })
トラフィックデータ
クリックのコンテキストを読み取るためのヘルパーメソッドです。
| メソッド | 返すもの |
|---|---|
sdk.getOffer() | 現在のオファー(ID と URL) |
sdk.getPwa() | 現在の PWA |
sdk.getPiuid() | 訪問者 ID |
sdk.getTrackingParams() | クリックとともに届いたトラッカータグ |
sdk.buildOfferUrl(url) | タグを引き継いだオファー URL を構築 |
sdk.showStore() | PWA ストアカードへ移動 |
SDK が自動的に行うこと
こちらから何も呼び出さなくても、ページ読み込み時に SDK はデバイスデータを収集し、URL からトラッキングタグを解析し、アプリマニフェストを添付し(pwaId が設定されている場合)、campaign_visit イベントを送信します。インストールとプッシュ購読は自動では開始されません — コードから明示的にトリガーします。