push-notifications

プッシュ通知

概要

ウェブプッシュ通知を使うと、在庫切れ商品の再入荷通知、値下げ通知、カートへのリマインダーなど、ユーザーがサイトを離れているときでも、タイムリーなメッセージを購読者に届けられます。プッシュ通知にはブラウザーの明示的な許可が必要なため、オプトインを求めるタイミングが重要です。Shopify、WooCommerce、BigCommerceでは、専用のプッシュ通知アプリ（PushOwl、OneSignal）が、カスタムのサービスワーカーコードを用意しなくても、購読者の管理、配信のトリガー設定、通知の送信をすべて処理します。

このスキルを使う場面

• 固定の「通知を受け取る」メールフォームに代わる、再入荷通知を追加するとき
• メールに加えて、ブラウザープッシュ通知でもカート放棄ユーザーを呼び戻すとき
• ウィッシュリストに登録された商品の価格を監視する機能を構築するとき
• メールの到達率が低く、補完的なチャネルが必要なとき
• プッシュ通知のオプトイン率がメールより高い、モバイルファーストの市場をターゲットにするとき

主な手順

手順 1：適切なプッシュ通知プラットフォームを選ぶ

プラットフォーム	最適な用途	Shopify	WooCommerce	BigCommerce	価格
PushOwl	Shopify ネイティブ、再入荷通知＋カート放棄対策	App Store	—	—	無料プランあり；月額 $19 以上
OneSignal	全プラットフォーム、無料プラン、高いカスタマイズ性	JS タグ経由	プラグイン	JS タグ経由	無料プランあり；月額 $9 以上
Klaviyo Web Push	すでにメールに Klaviyo を使っている場合	App Store	プラグイン	App Marketplace	Klaviyo に含まれる
PushEngage	WooCommerce＋セグメント化したキャンペーン	—	プラグイン	JS タグ経由	無料プランあり；月額 $9 以上

Shopify の推奨： PushOwl を使用してください。再入荷通知、カート放棄対策、配送通知が組み込まれており、Shopify との連携が最も充実したプッシュ通知アプリです。

WooCommerce の推奨： PushEngage または OneSignal を使用してください。どちらも WordPress プラグインを提供しており、購読者を自動的に管理します。

手順 2：プッシュ通知を設定する

---

PushOwl を使った Shopify の設定

1. Shopify App Store から PushOwl をインストールします
2. PushOwl → Settings → Opt-in Prompt に移動し、次の項目を設定します。
   • プロンプトの表示を遅らせます。顧客が 2 ページ以上閲覧した後、または商品をカートに追加した後に表示されるよう設定します
   • オプトインメッセージ：「商品が再入荷したときや値下げしたときに通知を受け取る」
3. PushOwl → Automations → Back in Stock に移動して有効にします。PushOwl は在庫切れ商品の「通知を受け取る」ボタンを自動で追加し、在庫が補充されたときにプッシュ通知を送信します
4. PushOwl → Automations → Cart Abandonment に移動して有効にします。
   • 配信タイミングを設定します。カート放棄の 1 時間後、その後 24 時間後に送信します
   • 通知メッセージとカート復帰 URL をカスタマイズします
5. PushOwl → Campaigns に移動して、セール、新商品の入荷、期間限定割引について一斉プッシュ通知を送信します

---

PushEngage を使った WooCommerce の設定

1. WordPress プラグインディレクトリから PushEngage をインストールします（無料プランあり）
2. PushEngage → Settings → Subscription Prompt に移動し、オプトインダイアログを設定します
3. 自動キャンペーンを有効にします。
   • PushEngage → Automation → Cart Abandonment に移動し、配信タイミングとメッセージを設定します
   • PushEngage → Automation → Back in Stock に移動して有効にします（WooCommerce の在庫イベントとの連携が必要です）
4. 値下げ通知を設定するには、PushEngage → Automation → Price Drop Alert に移動し、商品ごとの購読者オプトインを有効にします
5. PushEngage → Broadcast を使って、すべての購読者に手動でプッシュ通知キャンペーンを送信します

---

OneSignal を使った BigCommerce の設定

1. onesignal.com で OneSignal に登録し、Web Push アプリを作成します
2. OneSignal → Settings → Web Push → Setup に移動し、HTTPS ドメインの検証手順に従います
3. Storefront → Script Manager から、OneSignal の JavaScript スニペットを BigCommerce ストアに追加します。

   <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
   <script>
     window.OneSignalDeferred = window.OneSignalDeferred || [];
     OneSignalDeferred.push(async function(OneSignal) {
       await OneSignal.init({ appId: "YOUR_APP_ID" });
     });
   </script>
   

4. 再入荷通知を設定するには、BigCommerce の Webhook を使い、商品の在庫が 0 から購入可能な状態に変わったときに OneSignal API 呼び出しをトリガーします
5. カート放棄対策を設定するには、BigCommerce の Abandoned Cart Webhook と OneSignal REST API を使って、カート復帰用のプッシュ通知を送信します

---

カスタム／ヘッドレス

ヘッドレスストアでは、Web Push API を直接使用してプッシュ通知を実装します。

// Service worker — save as /sw.js in your public directory
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {};
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon ?? '/icons/icon-192.png',
      image: data.image,
      data: { url: data.url },
      actions: data.actions ?? [],
    })
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data?.url ?? '/'));
});

// Server-side push sending using the web-push library
import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:[email protected]',
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

// Generate VAPID keys once: npx web-push generate-vapid-keys

async function sendPushNotification(subscription: PushSubscription, payload: {
  title: string;
  body: string;
  url: string;
  icon?: string;
}) {
  try {
    await webpush.sendNotification(subscription, JSON.stringify(payload));
  } catch (err: any) {
    if (err.statusCode === 410) {
      // Subscription expired — remove from database
      await db.pushSubscriptions.deleteByEndpoint(subscription.endpoint);
    }
  }
}

// Triggered when inventory transitions from 0 to > 0
async function notifyBackInStock(productId: string) {
  const product = await db.products.findById(productId);
  const waitlist = await db.pushWaitlist.findByProduct(productId);

  for (const entry of waitlist) {
    const sub = await db.pushSubscriptions.findByUserId(entry.userId);
    if (!sub) continue;
    await sendPushNotification(sub, {
      title: 'Back in stock!',
      body: `${product.name} is available again`,
      url: `${process.env.STORE_URL}/products/${product.slug}`,
      icon: product.images[0]?.url,
    });
  }
}

ステップ 3：オプトインのタイミングを最適化する

プッシュ通知の効果を左右する最も重要な要素は、許可を求めるプロンプトをいつ表示するかです。最初のページ読み込み時に許可を求めてはいけません。

オプトインプロンプトを表示するおすすめのタイミング：

• 訪問者が3つ以上の商品を閲覧した後
• 顧客が商品をカートに追加した直後
• 顧客が在庫切れの商品を閲覧したとき（「再入荷時に通知を受け取る」）
• 注文確認ページ（「ブラウザーのプッシュ通知で配送状況やお得な情報を受け取る」）

PushOwlの場合：Settings → Opt-in Prompt → Advancedに移動し、トリガー条件を設定します。 PushEngageの場合：Subscription Prompt → Display Rulesに移動し、ページビュー数またはカートイベントのトリガーを設定します。

ステップ 4：コンバージョン率の高いプッシュキャンペーンを設定する

コンバージョン率に基づく優先順位：

1. 再入荷アラート — CTRが最も高く（15～25％）、顧客はこの商品を目的としてオプトインしています
2. カート放棄 — 放棄から1時間後と24時間後に設定します。2回目のプッシュでは緊急性を訴求します（「カートの有効期限がまもなく切れます」）
3. 値下げアラート — 特定の商品をチェックしている顧客に目標価格を通知すると、10～20％がコンバージョンします
4. 配送状況の更新 — 注文確認時に登録を促せるため、手軽にプッシュ通知の購読者を増やせます。ブランドを顧客に印象づけ続けられます

PushOwlの場合： 4つすべてがAutomationsに既成の自動化として用意されています。有効にして、メッセージをカスタマイズします。

ステップ 5：プッシュ通知のパフォーマンスを測定する

指標	目標値の目安	確認場所
オプトイン率	新規訪問者の5～15％	アプリのダッシュボード
再入荷通知のクリック率	15～25％	PushOwl／PushEngage の分析
カート放棄からの回復率	2～5％	アプリの分析
キャンペーンごとの配信停止率	< 2%	アプリの分析

配信停止率が2％を超える場合は、プッシュ通知の頻度を下げるか、メッセージの関連性を高めてください。

ベストプラクティス

• 最初のページ読み込み時に許可を求めないでください — カートへの追加など、ユーザーの操作後に表示すると、許可率は約5％から約25％に上昇します
• ユーザーごとのプッシュ通知は1日最大2件に制限してください — 過剰な頻度は、通知をオプトアウトする主な原因です
• 時間制限のある通知にはTTLを設定してください — フラッシュセールのプッシュ通知はセール終了時に期限切れになるようにします。PushOwlとPushEngageはどちらも通知の有効期限に対応しています
• 通知本文は100文字未満にしてください — Androidでは長い本文が途中で切り詰められます。配信前にモバイルでテストしてください
• 在庫切れの商品には、商品ページ単位で「通知を受け取る」を使用してください — これにより、状況を把握した購買意欲の高い購読者を獲得できます。サイト全体での一般的なオプトインは効果が劣ります

よくある問題

問題	解決策
オプトイン率が低い	許可プロンプトをカート追加後、または3つ目の商品閲覧後に移動します。最初の読み込み時には表示しないでください
iOSユーザーがプッシュ通知を受信できない	iOSでのWebプッシュにはiOS 16.4以降が必要で、ユーザーはサイトをPWAとしてインストールする必要があります（「ホーム画面に追加」）。これはブラウザーの制限です
再入荷のプッシュ通知が送信されない	PushOwl／PushEngageの設定で在庫のWebhookが接続されていることを確認します。アプリの自動化ログを確認してください
配信停止率が高い	プッシュ通知の頻度を下げます。購読者が受け取る通知の種類を選べるよう、配信設定を管理する機能を追加してください
データベースに重複した購読がある	カスタム実装では、upsertを使用し、(userId, endpoint)をキーにします

関連スキル

• @email-marketing-automation
• @cart-abandonment-recovery
• @sms-marketing
• @exit-intent-popups
• @customer-retention-engine