再入荷フォームの設定方法

オンラインストア用の再入荷サインアップフォームの設定とカスタマイズ方法について説明します。Klaviyo のフォームエディターでは、サイト上の商品が在庫切れの時に表示される「再入荷を通知」のボタンと、顧客が再入荷通知のメール、テキストメッセージ、WhatsApp を受け取るための登録フォームの両方をカスタマイズできます。

始める前に

再入荷フォームは Shopify と BigCommerce でのみ利用可能です。別のプラットフォームを使用している場合は、代わりに再入荷フローのインストールガイドを参照してください。

この記事では、次の方法について説明します。

• Shopify または BigCommerce ストアから、既存の Klaviyo 再入荷コードを削除する方法（該当する場合）
• 再入荷ボタンとサインアップフォームを有効にしてカスタマイズする方法

ストアにおける再入荷フォームの仕組み

再入荷フォームを公開すると、Klaviyo は在庫切れの商品ページに「再入荷を通知」ボタンを自動的に表示します。このボタンはカスタマイズ可能です。ボタンとフォームは両方とも、フォームエディターでカスタマイズできます。ボタンは、商品の在庫状況に応じて自動的に表示または非表示されます。

顧客が「再入荷を通知」ボタンをクリックするとフォームが表示され、商品が再入荷した際の通知方法を、フォームの設定に応じて選択できます。

• メール：メールのフィールドを設けた場合、顧客はメールアドレスを入力して、メールで再入荷通知を受け取ることができます。顧客がメールマーケティングの受信をオプトインできる任意のチェックボックスを追加することも可能です。
• テキストメッセージおよび WhatsApp：電話番号フィールドを追加すると、顧客は電話番号を入力して、テキストメッセージで再入荷通知を受け取れます。テキスト通知を受信するには、顧客がプロモーション用のテキストメッセージの受信に対し、明示的に同意する必要があります。この同意は必須であり、任意にすることはできず、開示文言の記載が必要です。

買い物客がフォームを送信すると、Klaviyo はプロファイルに「再入荷通知を購読」イベントを記録します。このイベントは、再入荷フローをトリガーするために使用されます。購読した買い物客は自動的にフローに入り、商品の再入荷時に通知を受け取ります。

A/B テストや従来と異なる SMS および WhatsApp のオプトイン方式（スマートオプトインや Tap-to-text など）は、再入荷フォームでは対応していません。

既存の再入荷コードスニペットを削除します

以前に Klaviyo の再入荷コードスニペットをインストールした場合、ボタンやフォームの重複を防ぐために、まずスニペットを削除してください。

ストアのプラットフォームからコードを削除する手順については、以下から該当するセクションを開いてください。削除するスクリプトやコードが不明な場合は、開発者に連絡するか、最初にインストールしたときの記録を確認してください。

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

再入荷フォームを作成する

1. Klaviyo のメインナビゲーションから、[サインアップフォーム] を選択します。
2. [フォームを作成]をクリックします。
3. 検索バーに「再入荷」と入力し、カスタマイズするための事前構築済みの 再入荷 テンプレートを選択します。
   

• 空のフォームを使って作成する場合は、[空のフォームを使って作成] をクリックし、フォームタイプとして [再入荷] を選択します。

4. メール、SMS、WhatsApp の購読登録を収集するリストを選択してください。
5. [フォームを作成]をクリックします。

6. メニューバーで商品表示ボタンのステップを選択します。これは常にフォームの最初のステップである必要があり、削除することはできません。
7. 左側の編集メニューで、商品ページのどこにボタンを表示するか選択します。
9. • 「カートに追加」ボタンを差し替え：在庫切れ商品に表示される「カートに追加」ボタンを「再入荷を通知」ボタンに置き換えます。
   • 縦並び表示：[再入荷を通知] ボタンは、[カートに追加] ボタンの下に表示されます（[カートに追加] が [売り切れ] と表示されている場合）。
     

1. テキスト、ボタンのスタイル、枠線、ドロップシャドウのオプションを使用して、「再入荷を通知」ボタンのラベルとスタイルを変更します。
2. メールのオプトインステップに切り替えて、[スタイル] メニューを使用し、フォームの色やフォント、レイアウトをブランドのスタイルに合わせて調整します。
   

3. メニューバーで各ステップをクリックし、ステップ 9 を繰り返すことで、SMS オプトインや完了ステップなど、フォームの後続の各ステップにもスタイルを適用できます。

1. Shopify 限定（任意）: "Notify me" ボタンの表示場所を決めるには、ターゲティングと動作 > ターゲティング を開き、Shopify タグ を使用して、ボタンを表示する商品を指定または除外してください。
   

2. フォームに問題がなければ、[公開] をクリックします。フォームが公開されると、サイト内の商品が在庫切れの場合に、商品表示ボタンが自動的に表示されます。
3. 公開後、公開確認モーダルに再入荷フローの設定を求めるプロンプトが表示されます。

• メトリック「再入荷通知を購読」をトリガーとして再入荷フローをすでに設定している場合、新しい再入荷フォームが自動的に使用されます。別のフローを作成する必要はありません。[閉じる] をクリックしてください。
• フローをまだ作成していない場合は、[終了してフローを作成する] をクリックして、再入荷フローの設定ガイドに進んでください。

再入荷フォームの分析

再入荷フォームのメトリックは、アナリティクスページでモニタリングできます。対象メトリックには「再入荷フォームの送信」や「マーケティングオプトイン」などがあります。「送信率」は、マーケティングの同意数ではなく、再入荷通知への登録数に基づいて計算されることに注意してください。

また分析ページでは、フォームのステップ別データと収集する情報別データをグラフで確認できます。

• エンゲージメント：これは「再入荷通知の購読」を意味します（例：顧客がメールによる再入荷通知に登録した場合）。
• マーケティングオプトイン：プロモーションメッセージの受信に対する顧客の同意を意味します。これは、顧客がマーケティングメールのオプトインボックスにチェックを入れるか、電話番号を提供した場合のいずれかが該当します。（テキスト通知は SMS マーケティングへの同意が常に必要なため、電話番号の提供はマーケティングオプトインに数えます）。

再入荷のトラブルシューティング

再入荷通知のプロセスが想定通りに機能しない場合は、以下の一般的な原因をご確認ください。

「再入荷を通知」のボタンが表示されないか、正しい場所に配置されない

商品ページに [再入荷を通知] ボタンがない場合、またはボタンを別のカスタムの場所に表示するように設定したい場合は、klaviyo-bis-trigger HTML 属性を使用して配置を手動で制御できます。

<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>

この属性を「再入荷を通知」のボタンを表示したい特定の HTML 要素に追加すると、Klaviyo は既定の場所ではなく、あなたが指定した場所にボタンを表示します。この方法は、カスタムまたは非標準のテーマを使用している場合に便利ですが、ボタンが表示されない問題を必ずこれで解決できるとは限りません。カスタムボタンの場所に問題がある場合は、開発者に相談してください。

Shopify の「Continue selling when out of stock」の設定との互換性

Klaviyo の再入荷機能は、Shopify の「Continue selling when out of stock （在庫切れでも販売を継続）」の設定では機能しません。この設定が有効になっている場合、在庫がなくても商品は常に購入可能として表示されます。その結果、以下のような問題が生じます。

• 「再入荷を通知」ボタンと再入荷フォームが表示されない
• Klaviyo が商品の再入荷を検知してフローをトリガーすることはできないため、再入荷メールが送信されない

再入荷に関する Kalviyo の機能を使用するには、該当する商品の「Continue selling when out of stock」が無効になっていることを確認してください。

Retina テーマを使用している場合

Out of the Sandbox の Retina テーマは、商品ページに「再入荷通知」のフォームが組み込まれています。Klaviyo のコードを機能させるには、テーマのデフォルトボタンを無効にする必要があります。

すべてのバリエーションが売切れの場合に商品が非表示になるテーマの場合

Shopify のテーマの内、すべての商品バリエーションが売切れると商品が非表示になるテーマを使用している場合は、product.liquid ファイル内でコードのこの領域を特定し、在庫レベルに関係なく、すべての商品を表示するように編集する必要があります。

その他のリソース