BigCommerce の注文確認ページにサインアップフォームを埋め込む方法

このページで学べること

チェックアウト プロセス完了後に追加情報を収集できるよう、BigCommerce の確認ページにサインアップフォームを埋め込む方法をご確認ください。これらの最近のお客様はすでにブランドに関心を持っているため、確認ページはさらなるエンゲージメントを図る絶好の機会になります。

始める前に

BigCommerceと連携していること、および設定KlaviyoのオンサイトJavaScriptを自動的に追加（推奨）を確認してください。

フォームを作成

サインアップフォームを作成し、確認ページに埋め込むことで、チェックアウト後に顧客に関連する質問をすることができます。たとえば、顧客がどのくらいの頻度で商品を使用しているか、または購入に関心を持つ可能性のある新商品は何かを把握するための質問をすることができます。

サインアップフォームを作成するには、次の手順に従ってください。

1. Klaviyoでウェブサイト > サインアップフォームに移動し、フォームを作成をクリックします。
2. チャネルを選択するよう求められた場合は、フォームに名前を付け、ウェブを選択して、作成をクリックしてください。
3. [空白のフォームを作成]をクリックします。表示されるメニューで、フォーム名を入力または確認し、新しい購読者が登録するリストを選択します。
4. フォームタイプとして [埋め込み] を選択します。
   

5. [保存してデザイン] をクリックします。
6. フォームエディターで、次の設定をカスタマイズします：
   • スタイルを編集：フォームまたは入力フィールドのスタイル、フォントの種類など、フォームの外観をブランドに合わせて編集します。また、テキストをクリックして、デフォルトの言語を独自の文言に置き換えることで、任意のテキストを編集できます。
   • ブロックを追加：ここでは、質問用のテキストボックスや誕生日用の日付フィールドなど、情報を収集するためにフォームにコンテンツを追加できます。追加する各フィールドにプロファイルプロパティを必ず設定し、質問が多すぎて顧客に負担をかけないようにしてください。
   • ターゲティング&表示動作：表示で、フォームをデスクトップ、モバイル、または両方に表示するかどうかを選択します。ターゲティングで、認識されている顧客にもフォームが表示されるように、オーディエンスをすべてのオーディエンスメンバーに表示に設定します。既存のKlaviyoプロファイルには表示しないを使用すると、Klaviyoが認識する訪問者には表示されなくなり、フィードバックを依頼したい顧客が除外される可能性があります。
7. メニューバーで [成功] を選択し、誰かがフォームを送信した後に表示されるページを編集します。
8. フォームのデザインに問題がなければ、[公開またはスケジュール]をクリックします。フォームのブロックアラートをすべて解消し、[今すぐ公開]を選択してから、[今すぐ公開]をクリックしてフォームを公開します。
9. Targeting & display behavior > Displayを開き、埋め込みコードをコピーしてください。以下のインストールスクリプトで、このコードのフォームIDを使用します。

以下のインストールスクリプトを追加するまで、フォームは注文確認ページに表示されません。

フォームが送信するリストのオプトイン設定を確認してください。リストでは、シングルオプトインまたはダブルオプトインを使用できます。リストでダブルオプトインを使用している場合は、確認ページをカスタマイズし、新しい購読者がリストに追加される前に購読を確認する必要があることを覚えておきましょう。

BigCommerce サイトに埋め込みを追加する

1. BigCommerce の管理画面に進みます。
2. [ストアフロント] > [スクリプト マネージャー] に移動し、[スクリプトを作成] をクリックします。
3. スクリプトに名前を付け、以下の内容で設定します:
   • 場所：Head
   • 説明（任意）：スクリプトの目的を説明します
   • スクリプトが追加されるページ：注文確認
   • スクリプト タイプ：スクリプト
     

4. スクリプトの内容を削除し、代わりに次のコードを貼り付けて、確認ページに klaviyo.js を追加してください。以前にウェブサイトに klaviyo.js をインストールしたことがある場合でも、これを行う必要があることに注意してください：
   

  <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async=""></script>
  <script>
     document.addEventListener("DOMContentLoaded", function() {       var elem = document.createElement('div');
     elem.className = 'klaviyo-form-FORM_ID'
     document.body.appendChild(elem);
     });</script>

1. 上記のスニペットで、PUBLIC_API_KEY を サイトの公開 API キーに置き換えます。
2. 上記のスニペットでは、Klaviyoからコピーしたエンベッドコード内のklaviyo-form-の後にあるIDにFORM_IDを置き換えてください。エンベッドコード全体ではなく、IDのみをコピーしてください。

3. スクリプトの詳細をすべて入力したら、[保存] をクリックします。

埋め込みフォームは、注文が確定した後にページの下部に表示されるようになります。テーマによっては、注文確認ページのルックアンドフィールに合わせるために、スタイルを編集セクションでフォームの枠線、余白、またはサイズを編集するとよい場合があります。行った変更が反映されるように、変更内容を公開してください。

テスト注文を確定したら、選択したデバイスで、注文確認ページの下部にフォームが表示されることを確認してください。テスト回答を送信し、Klaviyoで意図したプロファイルに回答が表示されることを確認してください。ダブルオプトインのリストへの新しい購読をテストしている場合は、リストへの登録状況を確認する前に確認を完了してください。

次の手順

埋め込みフォームで回答の収集を開始すると、各送信内容はカスタムプロパティとして顧客のプロファイルに保存され、セグメント、フロー、メールテンプレートで使用できます。

応答に基づいて、ポストパーチェス体験を分岐できます。また、このデータに基づいて ウェルカムシリーズを分岐したり、キャンペーンを送信するための関連セグメントを作成したりすることもできます。たとえば、新しいマスカラを発売するとします。この埋め込みフォームで商品への興味関心データを収集しているため、商品発売時にマスカラに興味があると回答した人に通知できます。

その他のリソース