Customer Insights - Journeys フォームを管理する

この記事では、Customer Insights - Journeys でフォームを編集、非公開、管理する方法について説明します。

ライブ フォームを編集する

フォームが既に公開されており、更新する必要がある場合は、上部のリボンにある編集ボタンを選択します。 ライブ フォームの編集を続けることができ、保存 ボタンを選択すると、すべての変更は自動的に公開されます。

フォームは CDN に保存され、すべてのデータはキャッシュされ、web ページの訪問者に可能な限り最短の読み込み時間を提供します。 キャッシュが更新されて Web ページに変更が反映されるまで、最大 10 分かかる場合があります。 このパラメーター #d365mkt-nocache を Web ページの URL に追加すると、ページの変更結果を確認できます。 このパラメーターを含むページのリンクを顧客と絶対に共有しないでください。 このパラメーターは CDN キャッシュをバイパスするため、ページの読み込みが遅くなります。

フォームの公開を取り下げる

ライブ フォームの公開を取り下げるには、停止ボタンを選択します。 フォームが CDN から削除されるため、Web ページの訪問者がフォームを送信できなくなります。 ブラウザのキャッシュが原因フォームはまだ表示されているかもしれませんが、送信することはできません。 フォームの状態が 下書き に変更されます。

フォームのフィールド プロパティ

キャンバスでフィールドを選択すると、右側のウィンドウにそのプロパティが表示されます。

• プレースホルダー テキスト: フィールド内のプレースホルダー。 ユーザーがフィールドへの入力を開始すると、プレースホルダーは自動的に消えます。
• 既定値: このフィールドの既定値を設定します。 既定値が設定されている場合、プレースホルダーは表示されません。
• 必須: 有効にすると、このフィールドが空の場合、ユーザーはフォームを送信できません。
• 検証: フィールドの内容を確認するルールを構成します。 検証ルールが満たされない場合、ユーザーはフォームを送信できません。 メールアドレスと電話番号のフィールドに正しい検証を設定することが重要です。
• フィールドの非表示: 有効にすると、フィールドはフォームに表示されません。 非表示フィールドを使用して、フォーム送信とともに追加のメタデータを保存できます。

カスタム検証

カスタム検証を作成するには、検証オプションを有効にして、カスタムを選択します。 正規表現 (RegExp) を入力できるポップアップ ダイアログが表示されます。 たとえば、RegExp を使用して、入力された値が特定の電話番号形式と一致するかどうかを確認できます。

テーマを使用してフォームのスタイルを設定する

右側のウィンドウでブラシ アイコンを選択すると、テーマ セクションを開くことができます。 テーマで、すべての種類のフィールド、ボタン、テキストのスタイルを制御します。 フィールドのテーマを設定すると、フォーム内の同じタイプのすべてのフィールドに影響します。

テーマ機能は、HTML 形式の CSS クラス定義を編集するために使用する使いやすいインターフェイスです。 これは、すぐに使用できるフォーム スタイルでのみ機能します。 カスタム CSS クラスは視覚化されませんが、HTML コード エディターを使用してカスタム CSS クラスを編集することはできます。

テーマ セクションでは以下を設定できます。

• 背景: フォーム全体の内部の背景色と境界線のスタイルを定義します。
• テキスト スタイル: 見出し 1、見出し 2、見出し 3、段落、フィールド ラベルを定義します。 これらのラベルは個別に設定できるため、フィールド ラベルのスタイルはチェックボックスとラジオ ボタンのラベルには影響しません。 テキスト スタイルの定義には、フォント ファミリー、フォント サイズ、フォントの色、テキスト スタイル、および行の高さが含まれます。 内側と外側の間隔、幅、配置を設定することもできます。 これらのテキスト スタイルに加えて、ラベルの位置 (上、左、右) とフィールド ラベルに必要な色を設定することもできます。
• 入力フィールド は 3 つのカテゴリに分類されます。
  1. テキスト入力フィールド、ドロップダウン フィールド、および検索フィールド: これら 3 つのフィールドの視覚スタイルは、同じスタイル定義を共有します。 プレースホルダーおよび入力テキスト スタイルのフォント ファミリー、サイズ、色、スタイルを定義できます。 フィールドの背景色、メニューの背景色、角丸、境界線、サイズ調整、内側と外側の間隔も設定できます。 フィールド ラベルはテキスト スタイルで設定できることにご注意ください。
  2. ラジオ ボタン: ラジオ ボタンには独自のラベル構成があり、フォント ファミリーとサイズを設定できます。 すべてのオプションおよび選択したオプションのテキストの色、スタイル、背景色を設定できます。 ラジオ ボタンの丸い角、幅、内側と外側の間隔を定義することもできます。
  3. チェックボックス - チェックボックス フィールドには独自のラベル構成があり、フォント ファミリーやサイズを設定できます。 すべてのオプションおよび選択したさまざまなオプションのテキストの色、スタイル、背景色を設定できます。 チェックボックスの丸い角、幅、内側と外側の間隔を定義することもできます。
• ボタンとリンク: ボタン定義では、フォント ファミリー、サイズ、色、テキスト スタイル、ボタンの色、境界線の配置、内側と外側の間隔を設定できます。 ハイパーリンクの定義により、フォント ファミリー、サイズ、色、テキスト スタイルを設定できます。

カスタム フォント

フォームでカスタム フォントを使用するには、次の 2 つの方法があります。

1. フォントを [継承] に設定する: 自分のページに 埋め込まれた フォームに推奨されています。 フォームはページからフォームを継承します。
2. 自分のカスタム フォントを追加する: スタンドアロン ページとしてホストされるフォームに推奨されています。 カスタム フォント セクションのテーマ機能を使用して、カスタム フォントをアップロードできます。 アップロードしたカスタム フォントは、すべてのテキスト スタイル定義で使用できるようになります。

プレビュー: Copilot - フォーム テーマ アシスタント

テーマ アシスタントは、Customer Insights - Journeys のCopilot 機能です。 テーマ アシスタントを使用して、所有および管理している既存の Web サイトからスタイルを取得できます。 テーマを使用するには、Web サイトの URL を入力してスタイルの取得を選択します。 このプロセスには数分かかる場合があります。 作業を続行し、後で戻って結果を確認することができます。 アシスタントで Web サイトからスタイルを取得したら、そのスタイルをフォームのテーマに適用します。

フォームの設定

フォーム設定を使用すると、フォームの高度なプロパティを構成し、フォーム送信後の動作を定義できます。

• 重複レコード: 重複レコードの処理方法に関する戦略を選択します。
• お礼の通知: ユーザーがフォームを正常に送信すると、このメッセージが表示されます。
• エラー通知: このメッセージは、フォームの送信時にエラーが発生した場合に表示されます。
• 送信後にリダイレクト: 有効にすると、フォーム送信後にユーザーがリダイレクトされる URL を入力できます。

重複レコードの処理方法

レコードを複製するための既定のアプローチは、取引先担当者とリードのエンティティで異なります。

• 連絡先 (既定: 電子メールを使用して連絡先を更新): ユーザーが既存の電子メール アドレスでフォームを送信すると、フォームの送信によって既存のレコードが更新されます。 新しいレコードは作成されません。
• リード (既定: 常に新しいレコードを作成): ユーザーが既存のメール アドレスでフォームを送信すると、同じメール アドレスで新しいレコードが作成されます。

フォーム設定の重複レコード ドロップダウンを使用して、既定の戦略を変更できます。 カスタムのマッチング戦略も作成できます。

カスタム マッチング戦略の作成

新しいマッチング戦略を作成することで、重複レコードの処理方法を選択できます。

1. 左下のメニューを選択して設定にアクセスします。
2. 顧客エンゲージメント セクションで フォーム マッチング戦略を開きます。
3. プラス アイコンを選択して、新しいマッチング戦略を作成します。
4. マッチング戦略に名前を付け、ターゲット エンティティを選択します。
5. マッチング戦略を保存します (このレコードを維持する必要があるため、保存して閉じるを選択しないでください)。
6. レコードが存在するかどうかを確認するために使用する、マッチング戦略属性 (フィールド) を追加します。
7. 新しいマッチング戦略を保存します。
8. 新しく作成したマッチング戦略を、フォーム設定の 重複レコード リストで選択できます。

フィールド タイプ

フィールドのタイプと形式は、属性メタデータによって定義されます。 フィールドのタイプと形式を変更することはできません。 ただし、形式が定義されていないフィールド タイプのレンダリング コントロールを変更することはできます。

電話番号フィールド

Customer Insight - Journeys で最適な結果を得るには、"+" 記号で始まる国際電話番号形式のみを使用する必要があります。 これにより、テキスト メッセージを送信するための同意を収集できます。 顧客のエクスペリエンスを向上させるために、電話番号のラベルまたはプレースホルダーを使用して、電話番号の想定される形式を説明することをお勧めします。

電話番号フィールドの検証が、電話番号 に設定されていることを確認します。 このすぐに使用できる検証では、電話番号形式が、特定の連絡先の同意を作成するための電話番号形式の要件と互換性があるかどうかを確認します。 想定される電話番号の形式は、"+" 記号で始まる国際形式です。 顧客が電話番号に間違った値を入力した場合、ブラウザーによって生成されたデフォルトのエラー メッセージが表示されます。 フォームは、デフォルトのブラウザー検証を使用して、入力されたフィールド値が予想されるパターンと一致しない場合にエラー メッセージを表示します。 デフォルトのブラウザー検証をカスタム JavaScript で上書きして、独自のエラー メッセージを導入できます。

電話番号をテキスト メッセージの送信に使用しない場合は、任意の形式で電話番号を収集できます。 このような場合は、フォームに "テキスト" チャネルの同意を追加しないでください。 特定の連絡先の同意には、国際電話番号の形式が厳密に必要です。 互換性のない形式が使用されている場合、入力された電話番号の特定の連絡先の同意を作成しようとすると、フォームの送信は失敗に関する警告と共に処理されます。

事前設定された電話番号の国番号

ビジネスが同じ電話番号の国番号を持つ単一の地域にある場合は、電話番号フィールドの 国番号 パラメーターを事前に設定できます。

国番号が事前に設定されている場合は、フォームを送信すると正しい電話番号の国コードが自動的に追加されます。 顧客が国番号を含む電話番号を入力した場合、事前に設定された電話番号の国番号は無視されます。

検索フィールド

ルックアップ フィールドは特定のエンティティ タイプにリンクされているため、事前に作成されたオプションのドロップダウン リストをフォームに追加できます。 たとえば、「通貨」というルックアップ フィールドを使用して、フォーム内のすべての通貨のドロップダウン リストを表示できます。

検索フィールドを追加した後、または検索フィールドが機能しない場合は、使用したサービス ユーザーに検索フィールドで使用しているエンティティに対して構成されたアクセス許可があることを確認してください。 フォーム エディターで使用する マーケティング サービス ユーザー拡張可能ロールには、検索フィールドで使用されるエンティティへの読み取りアクセス権が必要です。 また、検索プロパティで 検索データを公開する を有効化する必要があります。 検索内のすべての値は、フォームを表示するすべてのユーザーが利用できます。 必ず機密データが公開されないようにします。 詳細情報: 検索フィールドの追加。

カスタム フィールド

フォーム エディター を使用すると、リードまたは連絡先エンティティのすべての属性をフォーム フィールドとして使用できます。 連絡先またはリード エンティティの新しいカスタム属性を作成すると、エディターのフォーム フィールドとして自動的に使用できます。 このアプローチを使用すると、再利用可能なフォーム フィールドを簡単に作成できます。

フォーム検証

下書き フォームを公開するか、または ライブ、編集中 フォームを保存すると、検証プロセスが自動的に開始されます。 検証はフォームのコンテンツを確認し、ブロックしている エラー が見つかった場合は公開を停止するか、または潜在的な問題について 警告 を表示できます。

コンテンツの確認 ボタンを使用して、フォームの検証プロセスを手動で開始できます。

フォームの公開をブロックするエラー

次の条件はフォームの公開を妨げ、エラー メッセージが表示されます。

• 送信ボタンは含まれていますか?
• フォーム フィールドは編集可能な属性にリンクされていますか?
• フォームは重複したフィールドを含みますか?
• フォームには、マッチング戦略に必要なすべての属性が含まれていますか (既定では電子メール フィールド)?
• 対象ユーザーは設定されていますか?

フォームの公開を停止しない警告

次の条件はフォームの公開を妨げません。 次の警告メッセージが表示されます。

• フォームには、レコードを作成または更新するために必須である、選択されたエンティティの属性にリンクされたすべてのフィールドが含まれていますか?
• すべての必須属性は、HTML で required="required" とラベル付けされていますか?

高度なフォームのカスタマイズ

HTML エディターを開いてフォームのソース コードを表示するには、右上隅にある HTML ボタン を選択します。

• Customer Insights - Journeys フォームは JavaScript API を使用してレンダリングでき、フォームを動的に読み込むことができます。
• マーケティング フォームを React アプリケーションに挿入 できます。
• また、formLoad や formSubmit など、フォーム イベントを拡張 できます。
• フォームをカスタマイズする方法は他にもあります。 詳細

フォーム CSS のカスタマイズ

CSS クラス定義は HTML エディターで変更できます。 CSS を編集すると、フォーム エディターの可能性に加えて、より高度なデザインのカスタマイズを実現できます。

カスタム JavaScript をフォームに追加する

onClick または onChange のような JavaScript コードの実行をトリガーするすべてのonEvent HTML 属性は、自動的にサニタイズされます (コードから削除)。

以下の例はサポートされていません。

<button onClick="runMyFunction()">

以下の例に示すように、JavaScript コード内に EventListeners を配置して、JavaScript 関数の実行をトリガーできます。

例1: 他のフォーム フィールドの値を使用してフォーム フィールドの値を更新する

この例では、名と姓のフィールド値をフルネームに結合するスクリプトが作成されます。

<script>
    const firstName = document.getElementById("firstname-1679394382894"); // The field ID is unique in each form, make sure you replace it with the correct value.
    const lastName = document.getElementById("lastname-1679335991544"); // The field ID is unique in each form, make sure you replace it with the correct value.
    const fullName = document.getElementById("fullname-1679394390062"); // The field ID is unique in each form, make sure you replace it with the correct value.

    firstName.addEventListener('change', updateFullName);
    lastName.addEventListener('change', updateFullName);

    function updateFullName() {
    fullName.value = firstName.value + ' ' + lastName.value;
    }
</script>

例 2: URL の UTM パラメーター値を非表示フィールドに入力する

UTM ソース は新しいリードの発生元について重要な情報を提供します。 このサンプル スクリプトは、URL から UTM ソース パラメーターを抽出し、非表示フィールドの値に入力します。

1. 論理名が utmsource の "UTM ソース" と呼ばれるリード エンティティの新しいカスタム属性を作成します。
2. 「リード」を対象ユーザーにした新しいフォームを作成します。 フィールドのリストにカスタム属性 "UTM ソース" が表示されます。
3. UTM ソース フィールドをキャンバスに追加して、フィールド プロパティで非表示に設定します。
4. HTML エディターを開きます。
5. 次のスクリプトを本文セクションに配置します。 コードに正しいフィールド ID を入力していることを確認してください。

<script>
    document.addEventListener("d365mkt-afterformload", updateUTMSourceField());
            
    function updateUTMSourceField() {
        const formField = document.getElementById("utmsource-1679335998029"); // The field ID is unique in each form, make sure you replace it with the correct value.        
        const urlParams = new URLSearchParams(window.location.search);
        const utmSource = urlParams.get('utm_source');
        formField.value = utmSource;
        console.log(utmSource); // for debug only, can be removed
    }
</script>

この例を再利用し、utm_campaign、utm_medium、utm_term、utm_content など、UTM パラメーターを追加してリードを強化できます。

フォームとフォーム送信エンティティをカスタマイズする

フォームまたはフォーム送信エンティティにカスタム属性を追加 して、フォーム エディターでの体験を向上させることができます。

カスタム キャプチャをフォームに統合する

フォームに Google reCAPTCHA などの カスタム画像文字ボット保護サービスを統合 できます。

フォーム送信のカスタム バックエンド検証

カスタム バックエンド フォーム送信検証を構築して、フォーム送信処理を防止できます。 これはフォームを送信しようとしたユーザーにエラー メッセージを表示します。 カスタム画像文字サービス に関する記事で、このバックエンド検証のインスピレーションをご覧ください。この記事では、フォームでバックエンド検証を行い、画像文字チャレンジの結果を評価します。