BigCommerce サイトに Klaviyo 埋め込みフォームを追加する方法

このページで学べること

Klaviyoの埋め込みフォームをBigCommerceサイトに追加する方法をご紹介します。これには、Klaviyoでフォームを作成し、表示させたい場所（例：フッター）にあるサイトファイルへフォームの埋め込みコードを貼り付ける必要があります。

このガイドでは、BigCommerce のデフォルトのサインアップフォームを K laviyo の埋め込みフォームに置き換える方法を説明します。

始める前に

BigCommerceサイトでKlaviyoの埋め込みフォームを表示するには、BigCommerceと統合し、KlaviyoのオンサイトJavaScript（Klaviyo.js）をインストールしてください。このスクリプトにより、サインアップフォームとオンサイトトラッキングが有効になります。BigCommerceと統合する際に Klaviyoのオンサイトjavascriptを自動的に追加（推奨） の設定にチェックを入れていれば、準備は完了です。

該当しない場合：

1. Klaviyoで、左側のナビゲーションから外部連携を選択します。
   

2. BigCommerceをクリックし、設定タブを選択してください。
3. Klaviyo オンサイト javascript を自動的に追加する（推奨）設定をオンにしてください。
4. [保存] をクリックします。

この記事の例では、BigCommerceのデフォルトのCornerstoneテーマを使用しています。テーマが異なる場合があるほか、一部のファイル名やコードスニペットの場所が異なる場合がある点にご注意ください。後でテーマを切り替える場合は、新しいテーマにも埋め込みコードを追加してください。

フォームの埋め込みコードをサイトに追加する

まず、Klaviyo で埋め込みフォームを作成して公開します。このセクションでは、フォームの埋め込みコードを BigCommerce サイトに貼り付けて、適切に表示され、データが正しく同期されるようにするための次の手順について説明します。

1. 埋め込みコードをまだコピーしていない場合は、エディターでフォームを開き、ターゲティングと行動 > 表示を選択して、埋め込みコードの下にあるコードをコピーしてください。
   

2. ウェブサイトに移動し、デフォルトの BigCommerce サインアップフォームを見つけてください。Cornerstone テーマを使用している場合は、サイトのフッターにあります。
   

• ウェブサイトにデフォルトのフォームが表示されない場合：
  • BigCommerce のダッシュボードを開きます。
  • マーケティング > メールマーケティングに移動します。
  • ニュースレターの購読を許可と表示されたチェックボックスを選択してください。これにより、ウェブサイト上の訪問者からメールの同意を収集できるようになり、BigCommerceサイトにデフォルトのメール登録用チェックボックスも追加されます。このチェックボックスがすでに選択されているにもかかわらず、デフォルトのフォームが表示されない場合は、テーマにフォームが含まれていない可能性があります。

3. BigCommerce のダッシュボードを開き、[ストアフロント] > [テーマ] に移動します。
4. Current Themeセクションで、[Advanced] ドロップダウンをクリックし、[Edit Theme Files] を選択します。
   

• デフォルトのテーマを使用している場合、このオプションを選択できません。代わりに：
  
  • [コピーを作成] をクリックし、名前を付けてから、[コピーを保存] を選択します。
  • Themes セクションに追加したら、3 つのドットを選択し、Edit Theme Files を選択します。なお、編集内容は編集中のテーマにのみ適用されます。変更をウェブサイトに反映するには、そのテーマをウェブサイトに適用する必要があります。

5. 左側のサイドバーで、サイト上でデフォルトのフォームが表示された場所に対応するファイルを開きます。デフォルトのフォームが例のようにフッターにある場合は、テンプレート > components > common に移動し、footer.html ファイルをクリックします。
6. 検索ショートカット（Mac の場合は Command+F、Windows の場合は Control+F）を使用して、フッターファイル内の「newsletter」という単語を検索します。
   

7. その下のコード内で、フォームへの参照を見つけます。この例では、フォームは別のファイルパス {{> components/common/subscription-form}} で参照されています。
   

8. 左側のサイドバーで、コードで参照されているファイルパスに従ってください（この例では、[components > common > subscription-form] を選択します）。ここから、デフォルトフォームの実際のコンポーネントを確認できます。
   • この例では、デフォルトフォームの見出しと導入テキストが、サイトの他のスタイルと一致しています。フォームを置き換える際は、そのテキストを<form>要素の外側に残してください。
9. 開始<form ...>タグ、終了</form>タグ、およびその間のすべてを含む<form>要素全体を強調表示してください。Klaviyoからコピーした埋め込みコードを貼り付けて置き換えてください。Klaviyoは独自のフォームを作成するため、埋め込みコードを元のフォームタグ内に残さないでください。
   

10. [ファイルを保存して適用] をクリックして、これらの変更をウェブサイトに適用します。
    • ボタンに ファイルを保存 としか表示されていない場合、編集したばかりのファイルはまだ 現在のテーマ ではありません。ウェブサイトにテーマを適用するには、[ファイルを保存] をクリックし、次に上部右側へスクロールして [テーマ ファイルを編集] > [保存] > [アクティブなテーマとして使用] を選択する必要があります。

埋め込みコードを貼り付けて保存し、BigCommerce で変更を適用したら、ウェブサイトに戻ってページを更新してください。Klaviyo の埋め込みフォームはサイトに表示され、フォームにリンクされている Klaviyo リストに新しい購読者の追加を開始します。

フォームをテストする

1. フォームに接続されているリストにまだ登録されていないメールアドレスを使用して、ウェブサイト上のフォームを送信してください。
2. リストでダブルオプトインが使用されている場合は、確認メールを開き、購読を確認してください。新しいメール購読者は、確認後にリストに追加されます。
3. Klaviyoで、メールアドレスがフォームに接続されているリストに追加されていることを確認してください。

フォームが表示されない場合は、埋め込みフォームのトラブルシューティングをご覧ください。

次の手順

次に、新しい購読者にすぐに影響を与えるために ウェルカムシリーズフローを作成します。

その他のリソース