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

このページで学べること

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

始める前に

BigCommerce と外部連携していることを確認し、設定 Klaviyo オンサイト JavaScript を自動的に追加 をチェックしてください。

フォームを作成

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

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

1. Klaviyo で、[サインアップフォーム] ＞ [サインアップフォームを作成] ＞ [最初から作成] に移動します。
2. 表示されたメニューでフォームに名前を付け、新しい購読者が送信するリストを選択してください。
3. フォームタイプとして [埋め込み] を選択します。
   

4. [保存してデザイン] をクリックします。
5. これによりフォーム エディタが開き、次のスタイルを編集できます。
   • スタイル：フォームや入力フィールドのスタイル、フォントの種類など、ブランドに合わせてフォームの外観を編集します。また、任意のテキストをクリックしてデフォルトの言語を自分の言語に置き換えることで、編集することもできます。
   • ブロックを追加：ここでは、質問用のテキストボックスや誕生日用の日付フィールドなど、情報を収集するためにフォームにコンテンツを追加できます。追加する各フィールドにプロファイルプロパティを必ず設定し、質問が多すぎて顧客を圧倒しないようにしてください。
   • ターゲティングと行動：フォームをデスクトップ、モバイル、またはその両方のどちらに表示するかを選択します。フォームの設定は ［すべての訪問者に表示］ または ［既存の Klaviyo プロファイルには表示しない］ のいずれかにしてください。
6. メニューバーで [成功] を選択し、誰かがフォームを送信した後に表示されるページを編集します。
7. フォームのデザインに問題がなければ、[公開] をクリックします。
8. 表示されるモーダルから埋め込みコードをコピーし、貼り付ける準備ができた状態にします。
   

9. [公開] をクリックします。

フォームは、サイトコードに埋め込みコードを貼り付けるまでサイトに表示されません。

お客様体験がシームレスになるように、そのリストの オプトイン設定 を確認してください。リストがダブルオプトインの場合は、確認ページを編集する必要があります。すべての Klaviyo リストはデフォルトでダブルオプトインになっている点に注意してください。

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. 上のスニペットでは、FORM_ID をフォームの ID に置き換えます。フォーム ID を見つけるには、Klaviyo アカウント内の埋め込みフォームに移動します。フォーム ID は、URL の末尾にある 6 文字のコードです。
   

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

誰かが注文を行うと、埋め込みフォームがページ下部に表示されるようになります。テーマによっては、注文確認ページの見た目や雰囲気に合わせるために、スタイル セクションでフォームの境界線、余白、またはサイズを編集するとよい場合があります。変更を公開して、反映されたことを確認してください。

次の手順

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

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

その他のリソース