メインコンテンツまでスキップ

Browser SDK リファレンス

Browser SDK window.sdk のリファレンスです。ページから PWA インストールを促す方法、訪問者をプッシュに購読する方法、イベントを送信する方法、そのために必要な設定について説明します。全般的な概要は Browser SDK を、ご自身のプレランディングへの接続方法は プレランディング上の SDK をご覧ください。

window.pwaConfig の設定

SDK はページ上でスクリプトタグの前に設定した window.pwaConfig オブジェクトから設定を読み取ります。Qubix が配信するページではオブジェクトが自動的に設定されます。ご自身のプレランディングでは、手動で設定してください。

フィールド目的
pwaIdPWA 識別子。インストールとプッシュに必須
domainページのドメイン。マニフェストとプッシュに必須
vapidKeyプッシュ用のキー。通常、/sdk.js 読み込み時に自動的にインライン化されるため、手動での設定は不要
offerIdオファー(明示的に渡す必要がある場合)
campaignIdキャンペーン(明示的に渡す必要がある場合)
params追加のトラッキングタグ
previewModeプレビューモード:イベントは送信されない

PWA 識別子(pwaId)は PWA Apps セクションのアプリカードから取得します。

プッシュを購読する

sdk.subscribePush() はブラウザに通知の許可を求め、サブスクリプションを作成します。明示的に呼び出す必要があります — たとえばボタンクリック時などです。自動では発火しません。

JavaScript
const subscription = await sdk.subscribePush()
if (subscription) {
// 訪問者が通知を許可し、購読が完了した
}

内部での処理:

  1. ブラウザの許可プロンプトが表示されます。
  2. 訪問者が許可すると、サブスクリプションが作成されて Qubix に送信されます。
  3. 繰り返し呼び出しは安全です。訪問者がすでに購読済みの場合、プロンプトは再度表示されません。

プッシュにアプリのインストールは必要ありません — 訪問者は通常のページで購読できます。

注記

プッシュが機能するのは、セキュアな接続(HTTPS)と Qubix に設定されたドメイン上のみです。詳細は プレランディング上の SDK をご覧ください。

PWA をインストールする

window.pwaConfigpwaId が設定されている場合、SDK は sdk.pwa のメソッドを提供します。

メソッド動作
sdk.pwa.init()準備:サービスワーカーを登録し、アプリマニフェストを添付
sdk.pwa.install()システムのアプリインストールプロンプトを表示
sdk.pwa.canInstall()現時点でインストールが利用可能かどうか
sdk.pwa.isInstalled()アプリがすでにインストール済みかどうか
sdk.pwa.open()インストール済みのアプリを開く

initinstallisInstalled は非同期です — await を使って呼び出してください。canInstallopen はすぐに値を返します。

JavaScript
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訪問者がインストールを辞退した

独自のイベントを手動で送信することもできます。

JavaScript
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 イベントを送信します。インストールとプッシュ購読は自動では開始されません — コードから明示的にトリガーします。

次のステップ