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

学習内容

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

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

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

フォームコードを貼り付けるには、サイトの HTML や e コマースプラットフォームにアクセスする必要があるため、サポートチームが実際の作業を直接お手伝いすることはできません。チームに開発者がいない場合は、Klaviyo パートナーにご連絡いただき、サポートのご利用をご検討ください。 

始める前に

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

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

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

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

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

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

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

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

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

   サイトのフッターにフォームを埋め込む場合は、オプトイン数を増やすために、入力項目をメールアドレスのみに絞ることをお勧めします。

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

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

 

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

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 から提供されたコードと正しく一致している
    • Klaviyo のデバイス設定が、フォームを確認するために使用しているデバイスに対応している
  • [ターゲティング] セクションで、以下を確認してください。
    • [訪問者] の絞り込み設定を満たしている
    • フォームが閲覧中の URL に表示されるように設定されており、指定された UTM パラメーターが含まれている
    • 現在の位置が、フォームに設定されたジオロケーションに適合している
    • 現在のカートが、フォームに設定されたカートのコンテンツ要件を満たしている
• シークレット（プライベート）モードのブラウザを新たに開き、テストを再実行してください。
• サイトに統合されている Klaviyo アカウントが 1 つだけであることを確認してください。統合について詳細はこちら。

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

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

その他のリソース

• サポートへの連絡方法
• サインアップフォームのトラブルシューティング
• サインアップフォームのスタートガイド