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

このページで学べること

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

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

始める前に

Klaviyo で埋め込みフォームを作成する前に、まず BigCommerce と連携してから、サインアップフォーム機能（"onsite tracking" とも呼ばれます）を有効にする必要があります。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] を選択します）。ここから、デフォルトフォームの実際のコンポーネントを確認できます。
   • デフォルトフォームのヘッダーと言語はサイトのほかのスタイルと一致しているため、実際のフォーム入力のみを置き換えます。ソースコードでは、デフォルトフォームの input が <form> 要素内に含まれていることを確認できます。
9. 開始 <form> タグと終了 タグの間にあるすべてをハイライトし、Klaviyo からコピーした埋め込みコードを貼り付けて、ハイライトしたテキストを置き換えます。
   

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

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

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

次の手順

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

その他のリソース