フォームで動的ブロックを使用する方法
動的ブロックについて、またサインアップフォームでそれらを使用して、デスクトップとモバイルデバイスの買い物客に向けて異なる表示と体験を作成する方法をご確認ください。フォーム内の任意のブロックは、表示設定を調整することで動的にできます。
動的ブロックについて
動的ブロックを使用すると、デバイスに応じてどのブロックを表示するかを制御できます。デバイスに応じてフォーム内のブロックの表示方法を変える、または一方のデバイスにのみ表示してもう一方には表示しないようにブロックを設定できます。
動的ブロックのユースケース：
- さまざまなデバイス タイプ（例：モバイルやデスクトップ）向けにフォーム表示をカスタマイズし、買い物客が画面に合わせたデザインを確認できるようにします。
- コンバージョンを最適化するために、デバイスの種類に応じて異なる SMS オプトイン方法が表示される単一のフォームを作成します（例：モバイル デバイスではタップ・トゥ・テキストのオプションを表示し、デスクトップ デバイスでは電話番号の入力フィールドを表示します）。
始める前に
エディターでフォームを開き、Targeting and Behaviors セクションに移動します。すべての買い物客が確認できるように、フォームが Both desktop and mobile に表示されるよう設定されていることを確認してください。
この設定では、デスクトップとモバイルで別々の表示を構成できます。
動的ブロックを使用して、デスクトップとモバイルのビューを区別して作成する
フォーム内のブロックや入力フィールド（既存のもの、または [ブロックを追加] タブから新たに追加したもの）はすべて動的にできます。特定のブロックを表示するデバイスを調整するには、次の手順に従ってください。
- フォームのプレビュー パネルでブロック（例：テキスト ブロック）をクリックします。
- 左側にあるブロックの設定メニューで下にスクロールして、Visibility に移動します。
- ブロックを デスクトップ、モバイル、またはすべての デバイス に表示するかどうかを選択します。
- 動的にしたいブロックについて、このプロセスを繰り返します。
各デバイスでフォームがどのように表示されるかをプレビューするには、フォームエディタの右上にある表示セレクターを使用します。デスクトップアイコンとモバイルデバイスアイコンを切り替えて、各表示を確認できます。
- デスクトップビューでは、デスクトップでサイトを閲覧している購入者にフォームがどのように表示されるかを確認できます。このビューでは、デスクトップ と すべてのデバイス に設定されたブロックのみが表示されます。
- モバイル表示では、モバイル デバイスで閲覧する際に買い物客に表示される内容をプレビューします。モバイル と すべてのデバイス に設定されたブロックが表示されます。
例
たとえば、フォームの見出しテキストをデスクトップとモバイルデバイスで異なる表示にしたいとします。これを設定するには：
- 右上のビューセレクターで、デスクトップアイコンを選択します。
- フォームのプレビューで編集したいテキストを選択し、変更を加えます。
- テキストブロックの設定メニューで Visibility までスクロールし、テキストブロックが Desktop のみに表示されるように設定します。
- モバイルビューを調整するには、ビュー セレクターでモバイルアイコンを選択して、モバイルプレビューに切り替えます。
- [ブロックを追加] タブに移動し、新しいテキスト要素をモバイルのプレビューにドラッグ＆ドロップします。
- モバイルの買い物客向けにデフォルトの見出しテキストをカスタマイズします。このテキストは、デスクトップ版で使用したものとは異なるものにする必要があります。
- テキストブロックの設定メニューで、表示設定まで下にスクロールし、このテキストブロックが モバイルに表示されるように設定します。
- 任意：デバイスの種類に応じて表示を変えたい他の要素や入力フィールドについても、このプロセスを繰り返します（例：デスクトップの買い物客には画像を表示し、モバイルでは非表示にする）。
- フォーム内の画像を動的にしたい場合は、次のようにできます：
- モバイルビューとデスクトップビューの両方、またはいずれか一方にサイド画像を追加します。
- デスクトップビューではサイド画像を使用し、モバイルでは見出しテキストの上に画像を配置します。あるいは、その逆も可能です。
- フォーム内の画像を動的にしたい場合は、次のようにできます：
動的ブロックを使用して SMS 同意の収集を最適化する
SMS の同意を収集するサインアップフォームがある場合、動的ブロックを使用してデバイスごとに SMS のオプトイン方法を最適化できます（例: モバイル ショッパーにはタップしてテキスト送信するボタンを表示し、デスクトップ ショッパーには電話番号の入力フィールドを表示する）。
なお、フォームライブラリに用意されたメールアドレスと電話番号の両方を収集するテンプレートには、各デバイスで SMS のオプトインを最適化するための動的ブロックがすでに設定されています。これらのテンプレートを選択した場合、ブロックを設定する必要はありません。ブランドに合うようにフォームのスタイルをカスタマイズするだけで済みます。
新規に開始する場合や、SMS 購読者を収集するための新しいフォームを作成したい場合は、スマートオプトインで SMS 同意を収集する方法に関するガイドをご覧ください。
これを設定するには:
- 既存のフォームをエディターで開き、メニュー バーで SMS オプトインのステップに移動します。
- フォームにこのステップがまだない場合は、[+ステップ>SMS オプトイン] をクリックして、追加するリストを選択します。
- フォームにこのステップがまだない場合は、[+ステップ>SMS オプトイン] をクリックして、追加するリストを選択します。
- 右上のビュー セレクターでデスクトップ アイコンを選択し、フォームのデスクトップビューをカスタマイズします。
- プレビューで電話番号の入力フィールドを選択し、表示設定、の下でデスクトップに表示するよう設定してください。SMS 開示言語と送信ボタンについても同様に設定してください。
ブロックをデスクトップ デバイスでのみ表示するように設定した場合、モバイル ビューでは非表示にならないことに注意してください。
- 右上のモバイル アイコンを選択して、フォームのモバイル表示に切り替えます。
- [ブロックを追加] タブを選択し、新しいボタンブロックをモバイルプレビューにドラッグ＆ドロップします。
- ボタンの Action を SMS 経由で購読 に変更します。
- タップしてテキスト送信する行動喚起向けに、購読キーワードと購読メッセージをカスタマイズします。
- 送信地域 で、フォームでターゲットにしたい地域に適した電話番号を選択します。
- デスクトップ表示とモバイル表示を切り替えて、各デバイスでブロックが意図したとおりに表示されることを確認してください。
これで、動的ブロックは、デスクトップとモバイルの両方に対して最も最適化された方法で SMS 同意を収集するように設定されました。
次の手順
サインアップフォームを公開する前に、スタイルタブに移動して、ブランドに合わせてレイアウト、フォント、色を変更してください。また、SMS 開示文言を追加してカスタマイズしてください。
その他のリソース
- SMS opt-in methods reference
Learn about the different methods for growing your SMS list with Klaviyo.
- Understanding form blocks and fields
Learn how to use various content blocks from the form editor (i.e., elements and input fields) in your sign-up form to customize its appearance and the type of information you collect from subscribers.
- Understanding styles for a sign-up form
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.