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

このページで学べること

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

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

新しいボタンを作成

This content requires Functional cookies to be enabled.

Update Cookie Settings

まず、クリックするとサインアップフォームが表示されるようにトリガーする新しいボタンを、ウェブサイト上に作成します。サイトにボタンを追加する前に、Klaviyo でサインアップフォームが正しく設定されていることを確認する必要があります。これを行うには以下の手順に従ってください。

1. ボタンがクリックされたときに表示される新しいサインアップフォームを作成するか、すでに作成済みのフォームを選択します。
2. [Styles] タブで、 Form Type を Popup、フライアウト、または Full Page のいずれかに設定してください。埋め込みフォームは、ボタンのクリックでトリガーできません。
3. ［ターゲティングと行動］ タブで、 タイミング。 の下にある ［カスタム トリガーでのみ表示］ を選択します。
   

4. フォームのデザインとコンテンツに問題がなければ、[公開] をクリックします。
5. 次に、フォームのエディターを開き、次の設定を選択します。
6. 以下のコードをコピーしてください：

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

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

それぞれ異なるサインアップフォームをトリガーする複数のボタンをサイトに追加する場合、各ボタンを分類するために一意の名前（例：klaviyo_form_trigger1、klaviyo_form_trigger2）を使用する必要があります。

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

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 の末尾にある 6 桁のコードをコピーしてコードスニペットに追加してください。これがフォーム ID です。
     

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

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

ボタンをテストする

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

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

その他のリソース