ウェブサイトにサインアップフォームを埋め込む方法

このページで学べること

ウェブサイトの特定のページや場所（フッターなど）に埋め込みサインアップフォームを追加する方法を学び、ブランドに関心を持つ顧客が簡単にサインアップできるようにしましょう。他の公開フォームと連動するように、サイトのフッターにサインアップフォームを埋め込むことは、リスト拡大を最適化するための Klaviyo のベストプラクティスです。

サイトに埋め込みフォームを追加するには、以下の手順が必要です。

1. Klaviyo で新しい埋め込みフォームを作成し、カスタマイズします。
2. 公開モーダルからフォームの埋め込みコードをコピーします。
3. 埋め込みコードをサイトのファイルに貼り付けます。

始める前に

サインアップフォームを作成する前に、Klaviyo アカウントでサインアップフォーム機能が有効になっていることを確認してください。これにより、Klaviyo で公開されたフォームがサイトに正しく表示され、必要なデータがすべて同期されます。

埋め込みフォームを動作させるには、以下の手順が必要です。

• サインアップフォーム機能を有効にします。これは「オンサイトトラッキング」のインストールとも呼ばれます。
• フォームを表示したい場所であれば、サイト内のどこでも、埋め込みコードを貼り付けることができます。

埋め込みコードの貼り付けは、埋め込みフォームにのみ必要です。ポップアップフォーム、フライアウトフォーム、フルページフォームではコードを貼り付ける必要がなく、Klaviyo のフォームビルダーから直接公開できます。

2024 年 12 月 6 日付で、Klaviyo はエンゲージメント測定の正確性を向上させるため、埋め込みフォームの表示回数の計算方法を改善しました。埋め込みフォームの表示回数は、フォームがユーザーのビューポートに表示されている場合のみ、記録されるようになりました。この変更により、特にサイトのフッターに埋め込まれたフォームでは、閲覧数が目に見えて変化し、送信率が上昇する可能性があります。これは、訪問者がスクロールダウンしてフォームの一部がビューポートに入った場合にのみカウントされるためです。

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

Shopify、BigCommerce、WooCommerce をお使いの場合、プラットフォームの埋め込みフォームからサインアップした購読者は、連携アプリ経由で自動的に Klaviyo リストに追加されます。このため、外部連携の埋め込みフォームを Klaviyo のフォームに置き換える必要はありません。ただし、購読者を別のリストに登録したい場合は、Klaviyo でフォームを作成できます。

Klaviyo での新しい埋め込みフォームを作成しカスタマイズする

1. Klaviyo の左側のナビゲーションから、[サインアップフォーム] を選択します。
2. [フォームを作成] を選択します。ここから、次のいずれかを行うことができます。
   • フォームライブラリから、既製のテンプレートを選びカスタマイズ：[フォームスタイル] の隣にあるドロップダウンをクリックし、[埋め込み] を選択すると、フォームライブラリがフィルタリングされ、埋め込みフォームのテンプレートが表示されます。
   • 自分で新規フォームを作成：右上の [空のフォームを使って作成] を選択すると、埋め込みフォームの空のテンプレートを使って自分で作成できます。
3. 表示される作成モーダルで以下を行ってください。
   • フォームに名前を付けます。
   • 新しい購読者をどのリストに登録するかを選択します。
   • フォームタイプとして [埋め込み] を確認します。
     

4. [保存してデザイン] をクリックします。
5. エディターを使ってフォームのスタイルを設定し、必要なブロックや入力フィールドを追加します。フォームのカスタマイズについて詳しくは、サインアップフォームのスタートガイドをご覧ください。
   

1. フォームに問題がなければ、[公開] をクリックします。ここではまだ、フォームはサイトに表示されません。フォームをサイト上でライブにするには、埋め込みコードをサイトに貼り付ける必要があります。
2. [正常に公開されました] と表示されたら、[コピー] をクリックして、埋め込みコードをクリップボードにコピーします。このコードは、この記事の次のセクションでサイトファイルに貼り付ける際に必要です。
   

フォームの埋め込みコードは、フォームエディターの [ターゲティングと動作] タブにも記載されています。

埋め込みコードをサイトに貼り付ける

Klaviyo でフォームを公開して埋め込みコードをコピーしたら、フォームを表示させるために、このコードをウェブサイトのファイルに貼り付ける必要があります。コードを貼り付ける場所は、フォームを表示させたい場所（テーマファイルや特定のページファイルなど）によって異なります。また、外部連携によって異なる場合もあります。

以下のリストでお使いのプラットフォームを見つけて、その下にリンクされている記事に移動し、その外部連携の埋め込みコードを貼り付ける方法について、より具体的なガイドをご確認ください。

該当するプラットフォームがない場合は、「その他のプラットフォーム」をご覧ください。

• Bigcommerce
  BigCommerce の場合は、表示させたいサイトのファイルに、埋め込みコードを貼り付けます。
  • Bigcommerce サイトに埋め込みコードを追加する方法
• Shopify
  Shopify の場合は、Klaviyo 埋め込みフォームアプリをページテンプレートに追加し、フォームの埋め込みコードを貼り付けます。
  • Shopify サイトに埋め込みコードを追加する方法
• Square
  Square の場合は、表示させたいサイトのファイルに、埋め込みコードを貼り付けます。
  • Square サイトに埋め込みコードを追加する方法
• WooCommerce
  WooCommerce の場合は、埋め込みコードをサイトの HTML に貼り付けます。
  • WooCommerce サイトのフッターに埋め込みコードを追加する方法
• その他のプラットフォーム
  上記以外のプラットフォームをご利用の場合、または Klaviyo のネイティブ外部連携でなく、カスタム外部連携をご利用の場合は、埋め込みフォームを動作させるために 2 つのコードスニペットがサイトに貼り付けられていることを確認する必要があります。
  
  • サインアップフォーム機能を有効にするためのオンサイトトラッキング（別称 Klaviyo.js）。
    • ただし、Wix、Prestashop、Magento 1 および 2 など、連携させると自動的にオンサイトトラッキングを追加するプラットフォームも多くあります。Klaviyo で各プラットフォームの連携設定をチェックし、オンサイトトラッキングの追加が選択されていることを確認してください。
      • お使いのプラットフォームにネイティブの Klaviyo 連携がない場合は、手動でオンサイトトラッキングを追加する必要があります。
  • 特定フォームの埋め込みコード
    • オンサイトトラッキングを有効にしたら、フォームの埋め込みコードを、表示したい場所（フッターなど）のサイトの HTML/ソースコードに貼り付ける必要があります。
      • フォームの埋め込みコードは、フォームエディター内の [ターゲティングと動作] タブからコピーできます。

次の手順

Klaviyo で埋め込みフォームを公開し、埋め込みコードをサイトに貼り付けて変更を保存したら、ウェブサイトにアクセスしてページを更新してください。

埋め込みフォームは、埋め込みコードを貼り付けた場所であればサイト上のどこにでも表示されるはずです。

埋め込みフォームのトラブルシューティング

埋め込みフォームが Klaviyo でライブになっているにもかかわらず、サイトに表示されない場合は、以下のトラブルシューティングをご参照ください。

• ブラウザのキャッシュを更新してください。
• ウェブサイトが Klaviyo と正しく連携されていること、そしてサイトもライブ状態であることを確認してください。
• アカウントのサインアップフォームが有効になっていることを確認してください（オンサイトトラッキングを有効にすることと同じです）。
• 埋め込みコードを貼り付けたあとに、ウェブサイトの変更を保存したことを確認してください。
• Klaviyo のサインアップフォームエディターから [ターゲティングと動作] セクションに移動し、以下を確認してください。
  • [表示] セクションで、以下を確認してください：
    • サイトに貼り付けられた埋め込みコードが、Klaviyo から提供されたコードと正しく一致している
    • Klaviyo のデバイス設定が、フォームを確認するために使用しているデバイスに対応している
  • [ターゲティング] セクションで、以下を確認してください。
    • [訪問者] の絞り込み設定を満たしている
    • フォームが閲覧中の URL に表示されるように設定されており、指定された UTM パラメーターが含まれている
    • 現在の位置が、フォームに設定されたジオロケーションに適合している
    • 現在のカートが、フォームに設定されたカートのコンテンツ要件を満たしている
• シークレット（プライベート）モードのブラウザを新たに開き、テストを再実行してください。
• サイトと連携している Klaviyo アカウントが 1 つだけであることを確認してください。外部連携について詳細はこちら。

フォームが表示されないその他の原因

• サイトでカスタム CSS を使用している場合、Klaviyo のオンサイトトラッキング スニペット（「Klaviyo.js」）と競合し、フォームに支障をきたす可能性があります。開発者がブラウザの開発者ツールを使ってサイトのコードを検査し、問題を特定するか、サポートまでご連絡ください。
• シングルページ アプリケーション（「SPA」）サイトを使用している場合、設定が原因でフォームの表示が断続的になることがあります。貴社の開発者にご相談ください。

その他のリソース