ボタンをクリックしたときにサインアップフォームを表示するようトリガーする方法

このページで学べること

特定のボタンを訪問者がクリックしたときに、ウェブサイトにサインアップフォームを表示するトリガー方法をご確認ください。このガイドでは、カスタムトリガーでフォームを表示するようにフォームを調整する方法、サイトに新しいボタンを作成して追加する方法、ボタンのクリックでサインアップフォームがトリガーされるようにサイトの HTML に短いコードスニペットを貼り付ける方法について説明します。

開発者で、サインアップフォームのトリガーをカスタムコードで作成したい場合は、開発者向けリソースのポップアップまたはフライアウトフォームのカスタムトリガー方法をご覧ください。

開始する前に、ボタンを追加するすべてのページにKlaviyoのオンサイトJavaScript（Klaviyo.js）がインストールされていることを確認してください。ウェブサイトでサインアップフォームが有効になっていることを確認してください。

新しいボタンを作成

This content requires Functional cookies to be enabled.

Update Cookie Settings

ウェブサイトに新しいボタンを追加する前に、Klaviyoでサインアップフォームを設定してください：

1. ボタンがクリックされたときに表示される新しいサインアップフォームを作成するか、すでに作成済みのフォームを選択します。
2. フォームエディタでスタイルを編集を選択します。フォームタイプをポップアップ、フライアウト、フルページ、またはバナーに設定します。埋め込みフォームは、ボタンのクリックでトリガーできません。
3. ターゲティングと動作 > 表示を選択してください。タイミングで、フォームを表示をカスタムトリガーのみに設定してください。

カスタムトリガーは、フォームのターゲティング、デバイス、配信頻度のルールを回避します。フォームを開ける人を制限する必要がある場合は、ウェブサイトのボタンまたはカスタムコードにそれらの条件を適用してください。

1. フォームのデザインとコンテンツに問題がなければ、公開またはスケジュールをクリックし、今すぐ公開オプションを選択してから、今すぐ公開をクリックしてフォームを公開してください。
2. 以下のコードをコピーしてください：

<button class="klaviyo_form_trigger">Click here</button>

1. ボタンを表示したいウェブサイト内の任意のページの HTML にコードを貼り付けてください。このボタンには、サイトのテンプレートのデフォルト スタイルが使用されます。ボタンの外観をさらにカスタマイズする場合は、開発者または Klaviyo パートナーにご相談ください。

同じページに複数のボタンを追加する場合は、同じサインアップフォームを開くボタンであっても、各ボタンに固有のクラス名（例：klaviyo_form_trigger1、klaviyo_form_trigger2）を付けてください。以下のJavaScriptスニペットは、一致するクラスを持つ最初のボタンにのみ適用されます。各ボタンに一致するスニペットを追加してください。

サインアップフォームをトリガーするようにボタンを設定します。

This content requires Functional cookies to be enabled.

Update Cookie Settings

ウェブサイトに新しいボタンを追加したので、次に、そのボタンがクリックされたときにサインアップフォームが表示されるよう、トリガーを設定する必要があります。次のように、小さなカスタム JavaScript スニペットをサイトに追加してトリガーを設定します：

1. 以下のコードスニペットをコピーしてください：

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

1. 前のセクションでサイトに追加したボタンコードのすぐ下に、コードスニペットを直接貼り付けます。
2. 貼り付けたスニペットで、FORM_ID をサインアップフォームの ID に置き換えてください。
   • フォームIDを確認するには、Klaviyoに戻り、サインアップフォームのフォームエディタを開きます。URL内の/forms/の直後にあるIDをコピーします。IDには文字と数字を含めることができます。スニペット内のFORM_IDを置き換える際は、表示されているとおりに大文字小文字を正確に維持してください。
     

3. 完成したコードには、新しいボタンコードと、一意のフォーム ID を含むサインアップフォームのトリガーが含まれている必要があります。ボタンコードを追加したすべてのページにこれを貼り付けてください。
   • これは、Shopify ページ エディターで完了したコードの例です：
     

1. その後、変更を保存します。

ボタンをテストする

サイトのコードに対するすべての変更を保存したら、サイトにアクセスして新しいボタンをクリックします。そうすると、サインアップフォームが表示されます。

お困りですか？他の Klaviyo ユーザーからガイダンスを得るには、Klaviyo の コミュニティフォーラム にアクセスしてください。

その他のリソース