フォームで動的ブロックを使用する方法

動的ブロックについて、またサインアップフォームで動的ブロックを使用して、デスクトップとモバイルデバイスで買い物客に異なる表示や体験を提供する方法をご紹介します。ブロックの表示設定を使用して、どのデバイスで表示するかを選択します。

動的ブロックについて

動的ブロックを使用すると、デバイスに応じてどのブロックを表示するかを制御できます。デバイスに応じてフォーム内のブロックの表示方法を変える、または一方のデバイスにのみ表示してもう一方には表示しないようにブロックを設定できます。

動的ブロックのユースケース：

• さまざまなデバイス タイプ（例：モバイルやデスクトップ）向けにフォーム表示をカスタマイズし、買い物客が画面に合わせたデザインを確認できるようにします。
• コンバージョンを最適化するために、デバイスの種類に応じて異なる SMS オプトイン方法が表示される単一のフォームを作成します（例：モバイル デバイスではタップ・トゥ・テキストのオプションを表示し、デスクトップ デバイスでは電話番号の入力フィールドを表示します）。

始める前に

エディタでフォームを開き、ターゲティング&行動>表示を選択してください。[デバイス]で、[すべてのデバイス]を選択し、デスクトップとモバイルのビューを設定できるようにします。

この設定では、デスクトップとモバイルで別々の表示を構成できます。

動的ブロックを使用して、デスクトップとモバイルのビューを区別して作成する

一部のブロックは、表示設定が固定されています。たとえば、年齢認証と確認コードの入力はすべてのデバイスに表示されますが、タップしてテキスト送信ボタンはモバイルにのみ表示されます。また、ステップ内で最後に表示されているブロックの表示設定は変更できません。

編集可能な表示設定を持つブロックと入力フィールドは、すでに存在する場合でも、ブロックを追加パネルから追加する場合でも、動的にできます。このパネルを開くには、コンテンツを追加を選択してください。どのデバイスにブロックを表示するかを調整するには、次の手順に従ってください：

1. フォームのプレビュー パネルでブロック（例：テキスト ブロック）をクリックします。
2. ブロック設定メニューの左側にある項目で、表示まで下にスクロールします。
3. ブロックをDesktop、Mobile、またはAll Devicesのどれに表示するかを選択してください。
4. 動的にしたいブロックについて、このプロセスを繰り返します。

各デバイスでフォームがどのように表示されるかをプレビューするには、フォームエディタの右上にある表示セレクターを使用します。デスクトップアイコンとモバイルデバイスアイコンを切り替えて、各表示を確認できます。

• デスクトップビューでは、デスクトップでウェブサイトを閲覧している買い物客にフォームがどのように表示されるかを確認できます。このビューでは、DesktopとAll Devicesに設定されたブロックのみが表示されます。
• モバイル表示では、モバイル端末で閲覧する際に買い物客にどのように表示されるかをプレビューできます。モバイルおよびすべてのデバイス向けに設定されたブロックが表示されます。

例

たとえば、フォームの見出しテキストをデスクトップとモバイルデバイスで異なる表示にしたいとします。これを設定するには：

1. 右上のビューセレクターで、デスクトップアイコンを選択します。
2. フォームのプレビューで編集したいテキストを選択し、変更を加えます。
3. テキストブロックの設定メニューで、Visibilityまでスクロールし、テキストブロックがデスクトップのみに表示されるように設定してください。

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. モバイルビューを調整するには、ビュー セレクターでモバイルアイコンを選択して、モバイルプレビューに切り替えます。
5. コンテンツを追加を選択してブロックを追加パネルを開き、次に新しいテキスト要素をモバイルプレビューにドラッグ＆ドロップします。
6. モバイルの買い物客向けにデフォルトの見出しテキストをカスタマイズします。このテキストは、デスクトップ版で使用したものとは異なるものにする必要があります。
7. テキストブロックの設定メニューで、表示まで下にスクロールし、このテキストブロックがモバイルに表示されるように設定してください。

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. 任意：デバイスの種類に応じて表示を変えたい他の要素や入力フィールドについても、このプロセスを繰り返します（例：デスクトップの買い物客には画像を表示し、モバイルでは非表示にする）。
   • フォーム内の画像を動的にしたい場合は、次のようにできます：
     • モバイル表示とデスクトップ表示の両方にサイド画像を追加するか、どちらか1つの表示にのみ追加してください。
     • デスクトップビューではサイド画像を使用し、モバイルでは見出しテキストの上に画像を配置します。あるいは、その逆も可能です。

動的ブロックを使用して SMS 同意の収集を最適化する

SMSの同意を収集するサインアップフォームがある場合は、動的ブロックを使用して、デバイスごとにSMSのオプトイン方法を最適化できます（例：モバイルの買い物客にはタップしてテキスト送信できるボタンを表示し、デスクトップの買い物客には電話番号の入力フィールドを表示します）。

従来のSMSオプトインを使用するフォームについては、以下の手順に従ってください。開始する前に、アカウントでSMSを設定し、ターゲットにしたい地域でテキストメッセージを受信できる送信元番号があることを確認してください。フォームでスマートオプトインを使用している場合は、代わりに上記のガイドに従ってください。

1. 既存のフォームをエディターで開き、メニューバーでSMS同意を収集するステップを選択してください。
   • フォームでまだ電話番号を収集していない場合は、次のステップを追加してください：
     1. + ステップをクリックし、モバイルオプトインを選択してから、次へをクリックしてください。
     2. テキストメッセージを選択し、次へをクリックしてください。
     3. 新しい購読者が登録するリストを選択し、従来のテキストメッセージのダブルオプトインを選択してください。
     4. ステップを追加をクリックします。

2. 右上のビュー セレクターでデスクトップ アイコンを選択し、フォームのデスクトップビューをカスタマイズします。
3. プレビューで電話番号の入力フィールドを選択し、表示でデスクトップに表示されるように設定してください。送信ボタンも同様に設定してください。SMSの開示文言は、両方のデバイスで表示したままにしてください。

This content requires Functional cookies to be enabled.

Update Cookie Settings

1. 右上のモバイル アイコンを選択して、フォームのモバイル表示に切り替えます。
2. 既存のタップしてテキスト送信ボタンを選択するか、コンテンツを追加を選択してブロックを追加パネルを開き、モバイルプレビューに新しいボタンをドラッグしてください。
3. ボタンのアクションをテキストメッセージで購読に設定してください。このアクションにより、ボタンは自動的にモバイル専用になります。

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. テキストメッセージのキーワードを選択し、タップしてテキスト送信ボタン用のメッセージをカスタマイズしてください。モバイルの購読者は、そのキーワードに関連付けられたリストに追加されるため、SMS購読者向けに意図したリストと一致していることを確認してください。
5. 送信地域で、ターゲットとする地域を選択してください。Klaviyoは、その地域に関連付けられた送信元番号を使用します。
6. デスクトップ表示とモバイル表示を切り替えて、各デバイスでブロックが意図したとおりに表示されることを確認してください。

動的ブロックは、デスクトップでは電話番号フィールドを表示し、モバイルではタップしてテキスト送信できるボタンを表示するように設定されました。モバイルの買い物客は、SMSの購読を申し込むために、事前入力されたテキストを送信する必要があります。

次の手順

サインアップフォームを公開する前に、ブランドに合わせてレイアウト、フォント、色を変更するにはスタイルを編集を選択してください。また、SMSの開示文言を追加してカスタマイズすることを忘れないようにしてください。

フォームまたは変更内容を公開するには：

1. 公開またはスケジュール設定をクリックしてください。
2. 今すぐ公開を選択し、ブロックしているアラートをすべて解決してください。
3. 公開するには今すぐ公開をクリックしてください。

その他のリソース