Skip to main content
OneSignalはVendoと提携し、シームレスなShopify統合を実現しました。Vendoはワンクリックでお客様のShopifyストアフロントにOneSignal SDKを展開します — テーマコードの手動編集は不要です。顧客タグ、クライアントサイドの閲覧イベント、サーバーサイドのコマースイベントをOneSignalに同期し、実際の行動と購買履歴からセグメントを構築してプッシュキャンペーンをトリガーできます。 Vendoのドキュメントについては、Vendo OneSignal Destinationをご覧ください。

前提条件

始める前に、以下が揃っていることを確認してください:
  • VendoアプリがインストールされたShopifyストア
  • OneSignalアカウントとアプリ(Webプラットフォーム)
  • OneSignalのApp ID(必須)
  • OneSignalのREST API Key(注文同期やユーザータグ付けなどのサーバーサイドイベントに必要)
  • Shopifyテーマ設定でVendoアプリ埋め込みが有効になっていること

OneSignalの設定

1

OneSignalアプリを作成する

onesignal.comにログインし、アプリを作成または選択します。プラットフォームとしてWebを選択し、統合タイプとしてCustom Codeを選択します。
必ずCustom Codeを選択してください。Typical SiteオプションではService Workerパスの設定が公開されないため、SDKはストアのルートから/OneSignalSDKWorker.jsを読み込もうとします — Shopifyはこれをブロックし、プッシュ購読は静かに失敗します。すでにTypical Siteでアプリを作成した場合は、Settings > Platforms > WebでCustom Codeに切り替えるか、アプリを削除して再作成してください。
2

Webプッシュ設定を構成する

OneSignalアプリで、Settings > Push & In-App > Web Settingsに移動するか、Webプッシュ設定ガイドに従ってください。サイト設定
  • Site Name:ストア名。デフォルトの通知タイトルとして使用されます。
  • Site URL:Shopifyストアの公開アクセス可能なURL(例:https://yourstore.com)。
    • サイトの正確なオリジンである必要があります。
    • 顧客がhttps://your-site.com/のようなカスタムドメインからサイトにアクセスする場合は、https://your-site.myshopify.com/を使用しないでください。
  • Default Icon URL:通知とプロンプトに表示される正方形256×256のPNG、JPG、または非アニメーションGIFをアップロードします。設定されていない場合は、デフォルトとしてベルアイコンが使用されます。通知アイコンをご覧ください。
3

Service Workerパスを設定する

Shopifyはサイトのルートからファイルを配信できないため、VendoがService Workerファイルを配信する場所をOneSignalに伝える必要があります。OneSignalで、Settings > Push & In-App > Web Settingsに移動し、Advanced Push Settingsまでスクロールして、Customize service worker paths and filenamesをオンに切り替え、次のように設定します:

Vendoを使用するShopifyストアのService Worker設定。

Vendoはhttps://yourstore.myshopify.com/apps/vendo/OneSignalSDKWorker.jsに必要なOneSignalSDKWorker.jsファイルを自動的に配信します — 手動でのファイルアップロードは不要です。
VendoアプリのOneSignal > Push Settingsページには、これらの正確な値がクリックでコピーできる形で表示されるため、再入力する必要はありません。Updater FilenameとMain Service Worker Filenameは同じファイルです。OneSignal v16+は両方の目的に単一のService Workerを使用します。
4

認証情報をコピーする

OneSignalで、Settings > Keys & IDsに移動し、App IDREST API Keyをコピーします。これらをVendoに入力します。

Vendoの設定

1

Vendoアプリをインストールする

Shopify App StoreからVendoアプリをインストールします。
2

OneSignal統合を追加する

Vendoで、Destinations > OneSignalに移動します。

VendoにOneSignal統合を追加する。

3

OneSignalの認証情報を入力する

前のセクションのOneSignalのApp IDREST API Keyを入力し、Saveをクリックします。
4

Vendoテーマブロックを有効にする

VendoテーマブロックはストアフロントにOneSignal SDKを読み込みます。これがないとプッシュプロンプトが表示されず、クライアントサイドのトラッキングも機能しません。
  1. Shopify管理者で、Online Store > Themes > Customizeに移動します。
  2. App embeds(左サイドバーのパズルピースアイコン)をクリックします。
  3. Vendoをオンにします。
  4. Saveをクリックします。
テーマブロックはSDKの初期化、Service Workerの登録、プッシュプロンプトの表示、ユーザー識別(プッシュ購読、ログイン、ニュースレター登録)、識別済みユーザーのタグ同期を処理します。
5

同期するイベントを選択する

VendoアプリのOneSignal > Eventsで、OneSignalに送信したいクライアントサイドとサーバーサイドのイベントを有効にします。イベントの完全なリストについては、以下のトラッキングをご覧ください。
6

プッシュプロンプトを設定する

各プロンプトがストアフロントに表示されるかどうか — そしていつ表示されるか — は、OneSignalダッシュボードではなくVendoアプリから制御されます。Vendoアプリで、OneSignal > Push Settingsを開きます。それぞれ独自のトグルを持つ4つのセクションが表示されます:Push SlideプロンプトとNativeプロンプトでは、トリガーも設定します — プロンプトが発動するまでに待機するページビュー数と秒数です。妥当なデフォルト値があらかじめ入力されています。4つのプロンプトはすべてデフォルトでオフです — 必要なものだけを有効にしてください。ページ下部で一度保存すると、テーマの再デプロイなしで次のストアフロント読み込み時に変更が有効になります。
プロンプトのボタン文言、アクションメッセージのテキスト、アイコン、A/Bテストやローカライゼーションなどの高度なオプションは、OneSignalダッシュボードで設定します。VendoのPush SettingsからOpen OneSignal Dashboardをクリックすると、Permission Prompt Setupページに直接移動できます。プロンプトがOneSignalのダッシュボードで設定されていても、Vendoのトグルがオフの場合は表示されません — 表示の可否についてはVendoのトグルが信頼できる情報源です。
7

履歴データの同期(オプション)

Vendoは既存の顧客と最近の注文履歴をOneSignalにバックフィルできます。これは認証情報を保存した後、バックグラウンドで自動的に行われます。

Vendoの履歴データ同期オプション。

トラッキング

ユーザー識別

Vendoは識別済みユーザーのみのアプローチを使用します — 匿名の訪問者はOneSignalでトラッキングされません。イベントが送信される前に、ユーザーは4つの方法のいずれかで識別される必要があります。これにより重複ユーザーを防ぎ、クリーンで実用的なデータを確保します。
モバイルアプリやサードパーティの接続がある場合は、ユーザープロファイルをプラットフォーム間で一貫させるために、他のツールと一致する識別子(Shopify Customer ID vs. Email)を選択してください。VendoアプリのSettings > Customer Identifierで設定します。

アイデンティティのマージ

プッシュ購読者(OneSignal IDで識別)が後でログインしたり購入を完了した場合、VendoはそのShopify Customer IDまたはメールでOneSignal.login()を呼び出します。OneSignalはプッシュ購読を識別済みユーザーにリンクします — 重複ユーザーは作成されません。過去のすべてのプッシュ購読が保持され、サーバーサイドイベント(注文、履行)が正しいユーザープロファイルに届きます。

顧客タグ

Vendoはセグメンテーションのために顧客プロパティをOneSignalのタグとして同期します。すべての値は文字列として保存されます(OneSignalのネイティブフォーマット)。

アイデンティティとプロファイル

マーケティング同意

コマース統計

アトリビューションタグ

Vendoはチェックアウト時にUTMパラメータとクリックIDをキャプチャし、タグとして同期します。ラストタッチの値はチェックアウトのたびに上書きされ、ファーストタッチの値(initial_utm_*)は一度だけ書き込まれます。

セグメントメンバーシップ

VendoはShopifyのセグメントメンバーシップを、shopify_segment_{segment_id}という形式で値が"true"のタグとして同期できます。同期の実行方法の詳細については、VendoのEvents & Propertiesリファレンスをご覧ください。

クライアントサイドイベント

VendoはShopify Web Pixelを通じてストアフロントのクライアントサイドカスタムイベントをトラッキングし、OneSignalに送信します。これらのイベントはユーザーが識別された後にのみ送信されます。

Vendoのクライアントサイドイベント設定。

サーバーサイドイベント

Shopifyのコマースイベントはエクスポートされ、Vendoパイプラインを通じてOneSignalに転送されます。これらは常にShopify Customer IDをexternal_idとして使用します。

Vendoのサーバーサイドイベント設定。

プラットフォーム詳細

ユースケース

放棄カート回収

cart_abandonedイベントでトリガーされるJourneyを作成します。放棄から1時間待って、checkout_urlプロパティを使用した回収リンク付きのプッシュ通知を送信します。

注文状態の更新

order_fulfilledorder_deliveredのJourneyを作成し、注文が発送・配達された際に追跡情報を含む即時プッシュ通知を送信します。

VIP顧客のエンゲージメント

total_spentがしきい値を超えるセグメントを作成し、first_nameタグでパーソナライズされた限定オファーを送信します。

再エンゲージメントキャンペーン

last_order_dateが90日以上前のセグメントを作成して非アクティブな顧客をターゲットにし、ウィンバックキャンペーンを送信します。

対応ソース

OneSignalは以下のVendoデータソースに対応しています:

テスト

1

Service Workerを確認する

ブラウザーでhttps://yourstore.myshopify.com/apps/vendo/OneSignalSDKWorker.jsにアクセスします。JavaScriptコードが表示されるはずです。404が表示された場合は、Vendoアプリがインストールされており、テーマブロックが有効になっていることを確認してください。ブラウザーのDevTools(F12)を開き、Application > Service Workersに移動して、OneSignalSDKWorker.jsがスコープ/apps/vendo/で登録されていることを確認することもできます。
2

プッシュプロンプトをテストする

シークレット/プライベートウィンドウでストアフロントを開きます。OneSignalの通知許可プロンプトが表示されるはずです。許可をクリックして購読します。
3

テスト通知を送信する

OneSignalダッシュボードで、Messages > New Pushに移動します。購読者にテスト通知を送信し、表示されることを確認します。
4

OneSignalでユーザーデータを確認する

Audience > All Usersに移動し、テストユーザーが表示されていることを確認します。識別済みユーザーのユーザータグ(メール、名前など)が同期されているか確認します。
5

テストイベントをトリガーする

ストアで商品を閲覧するか、テストチェックアウトを完了します。OneSignalダッシュボードのユーザーアクティビティにイベントが表示されることを確認します。

トラブルシューティング

Service Workerが404を返す

Service Workerは/apps/vendo/OneSignalSDKWorker.jsに存在する必要があります。ルートパス(/OneSignalSDKWorker.js)で404エラーが表示される場合、Service WorkerパスがOneSignalに設定されていません — Service Worker設定ステップに従ってください。/apps/vendo/パスで404が表示される場合は、Vendoアプリがインストールされておりテーマブロックが有効になっていることを確認してください。

OneSignalのセットアップ中に「Typical Site」を選択してしまった

VendoにはCustom Code統合タイプが必要です。Typical SiteではService Workerパスの設定が公開されないため、SDKはストアのルートから/OneSignalSDKWorker.jsを読み込もうとします — Shopifyはこれをブロックし、プッシュ購読は静かに失敗します。 修正方法:OneSignalダッシュボードで、Settings > Platforms > Webでアプリの統合タイプをCustom Codeに切り替えるか、アプリを削除して最初からCustom Codeで再作成してください。

プッシュプロンプトが表示されない

  • App embedsでVendoテーマブロックが有効になっているか確認してください。
  • VendoアプリのOneSignal > Push Settingsで、少なくとも1つのプロンプトトグル(Subscription Bell、Push Slide Prompt、またはNative Browser Prompt)がオンになっていることを確認してください — 4つすべてデフォルトでオフになっています。
  • トリガーの遅延を確認してください — 複数ページビューに設定されたPush Slideは最初のページ読み込みでは発動しません。
  • ブラウザーが通知を許可しているか確認してください(アドレスバーの錠前アイコンをクリック)。
  • 以前にプロンプトが拒否されていた場合に備えて、シークレット/プライベートウィンドウを試してください。

タグがOneSignalに表示されない

タグは識別済みユーザーにのみ同期されます — 匿名の訪問者はトラッキングされません。ユーザーがプッシュ購読、ログイン、ニュースレター登録、またはチェックアウトで識別されていることを確認してください。初期タグ同期には数時間かかる場合があります。

イベントがトリガーされない

VendoアプリのOneSignal > Eventsでイベントが有効になっていることを確認してください。クライアントサイドイベントにはShopify Web Pixelがアクティブで、ユーザーが識別されている必要があります。サーバーサイドイベントにはREST API Keyが設定されている必要があります。

通知は「配信済み」と表示されるが表示されない

統合は正常に機能しています — 問題はブラウザーまたはOSの通知設定にあります。ブラウザーのOSの通知設定を確認し、おやすみモード/集中モードがオフになっていることを確認し、ブラウザーレベルの通知権限を確認してください。

FAQ

セットアップ後に顧客識別子を変更できますか?

はい。VendoアプリのSettings > Customer Identifierで設定を更新します。既存のユーザーがすでに以前の方法で識別されていた場合、識別子を変更すると別々のユーザープロファイルが作成される可能性があります。

Vendo統合はモバイルアプリをサポートしますか?

Vendo統合はShopifyストアフロントとWebプッシュに特化しています。モバイルアプリも持っている場合は、ユーザープロファイルを一貫させるために、Vendoで選択する識別子がモバイルアプリで使用するものと一致することを確認してください。

訪問者が識別されなかった場合はどうなりますか?

識別されていない訪問者のイベントはOneSignalに送信されません。訪問者が自己を識別すると(プッシュ購読、ログイン、ニュースレター登録、またはチェックアウト完了)、Vendoはイベントの送信を開始します。この識別済みユーザーのみのアプローチにより、重複ユーザーを防ぎ、クリーンなデータを確保します。

VendoはなぜIdentified-Onlyアプローチを使用するのですか?

匿名訪問者をトラッキングすると、適切にマージできない重複OneSignalユーザーが作成され、ユーザー数の水増しとデータの断片化につながります。Identified-Onlyアプローチにより、すべてのOneSignalユーザーが実在し、実用的であることを保証します。

関連ページ

Keys & IDs

OneSignalのApp IDとREST APIキーを確認します。

カスタムイベント

ユーザー行動をトラッキングし、Shopifyイベントに基づいて自動化をトリガーします。

Webプッシュ設定

ShopifyストアのWebプッシュ通知を設定します。

Web権限プロンプト

訪問者にWebプッシュ許可を求める方法とタイミングを設定します。