フォームファクタとプロパティのガイド

ガイドとサーベイにはさまざまなフォームファクタが含まれています。各フォームファクタには、その動作をエンドユーザーに対して制御する一連のプロパティがあります。

フォームファクタ

各フォームファクタは、同様のプロパティセットを共有しています。

モーダル

モーダルは、舞台の中心を占めるフルフォーカス体験です。モーダルを使用して重要なメッセージを伝えたり、複数のステップに渡るフローをユーザーに案内したりできます。

以下を使用してモーダルをカスタマイズ：

レイアウトを選択できます。クラシック、水平分割、垂直分割、またはショーケースから選択できます。
ボタンを追加し、ユーザーがボタンをクリックまたはタップしたときに何が起こるかをカスタマイズできます。
画像または動画を追加してください。 Amplitude は、選択したレイアウトに応じてメディア要素を配置します。
テキストをアニメーション化するテキストアニメーションを使用すると、ガイドが表示されたときにテキストがアニメーション化されます。

三点メニューをクリックすると、フォーマット設定にアクセスできます。

設定	概要
コンテンツのレイアウト	ガイドのコンテンツの視覚的な順序を更新します。
タイトルとコンテンツの整合性	タイトルと本文テキストの配置を変更します。
アクションバー Web only	ガイドのボタンの配置とレイアウトを更新します。
外側をクリック/タップして閉じる	ユーザーがモーダルの外側をクリックまたはタップしてモーダルを閉じることができます。
テキストアニメーション	モーダルのテキストをタイプライター効果でアニメーション化できるようにします。

ポップオーバー

文脈に関連する要素の近くに表示される微妙なナッジです。ポップオーバーを使用して、クイックヒントを提供したり、ユーザーの流れを妨げることなくユーザーの注意を引いたりできます。

ポップオーバーには、モーダルと同じカスタマイズオプションの多くがあります。

三点メニューをクリックすると、フォーマット設定にアクセスできます。

設定	概要
コンテンツのレイアウト	ガイドのコンテンツの視覚的な順序を更新します。
タイトルとコンテンツの整合性	タイトルと本文テキストの配置を変更します。
アクションバー Web only	ガイドのボタンの配置とレイアウトを更新します。
Z-index Web only	ポップオーバーにカスタムのz-index値を指定します。
テキストアニメーション	ポップオーバーのテキストをタイプライター効果でアニメーション化できるようにします。

ピン

ピンはユーザーが操作するまで画面上に残る永続的なマーカーです。ピンを使用して、主要な機能を強調表示したり、ユーザーが参照できる状況に応じたヘルプを提供したりできます。

ピンはCTAクリックなしで進むことができます。

デフォルトでは、ユーザーがピンのターゲット要素をクリックすると、ツアーは次のステップに進みます。この動作は、[ターゲットクリック時の自動進行を無効にする] 設定で無効にできます（ウェブのみ）。ピン形式設定のAdvance trigger設定を使用すると、ユーザーがクリックしたときにツアーを進める追加要素を指定できます。

デフォルトで開くように設定されていないピンに対する分析への影響

「デフォルトで開く」に設定されていないピンガイドの場合、ターゲット要素をクリックするとガイドが完了したとみなされますが、ガイド表示イベントは生成されません。このため、ユーザーが最初にピンビーコンを開かずにターゲット要素とやり取りした場合、ガイド完了イベントの方がガイド表示イベントよりも多くなる可能性があります。

ピンには、モーダルやポップオーバーとは異なるカスタマイズオプションがあります。デフォルトで開いている状態と閉じている状態を切り替えます。 マスクを表示 を使用すると、ピン止めされた要素を強調表示し、画面の残りの部分を暗くする半透明のオーバーレイを表示できます。

ピンは次の位置設定を使用できます。

自動
ターゲットの上部
ターゲットの下部
ターゲットの左側
ターゲットの右側

位置設定は、ピンメッセージがターゲットに対して相対的にどこにレンダリングされるかを指定します。ターゲット要素の位置が指定された位置と互換性がない場合、Amplitudeは別の位置を試みます。たとえば、ターゲットがページの一番左側にある場合、ピンは左にレンダリングできません。その後、Amplitude はピンをターゲットの上、下、または右側にレンダリングしようとします。ピンが 4 つの位置のいずれにも表示できない場合、Amplitude はピンをレンダリングしません。

ピンの三点リーダーメニューをクリックすると、フォーマット設定にアクセスできます。

設定	概要
デフォルトで開く	ユーザーの操作なしでピンを開くことを可能にします。無効になっている場合、ユーザーはピンをクリックまたはタップしてピンを開く必要があります。
ホバー時に開く	ユーザーがホットスポット上にカーソルを合わせたときにピンを開きます。この設定を使用するには、デフォルトで [開く] を無効にしてください。デフォルトで「開く」が無効になっており、「ホバー時に開く」設定も無効になっている場合、ユーザーはホットスポットをクリックしてピンを開く必要があります。
マスクを表示	ピンが開いているときに背景マスクを有効にすることで、ユーザーの焦点を合わせやすくなります。
コンテンツのレイアウト	ガイドのコンテンツの視覚的な順序を更新します。
タイトルとコンテンツの整合性	タイトルと本文テキストの配置を変更します。
アクションバー Web only	ガイドのボタンの配置とレイアウトを更新します。
Z-index Web only	ポップオーバーにカスタムのz-index値を指定します。
テキストアニメーション	タイプライター効果でピンのテキストをアニメーション化できるようにします。
ターゲットクリック時の自動送りを無効にする	このオプションを有効にすると、対象となる要素をクリックしてもガイドは次のステップに進みません。
ターゲットが見つからない場合はスキップ	このオプションを有効にすると、ステップがアクティブになってから`250ms`一定時間以内にターゲット要素が見つからない場合、ガイドは次のステップに進みます。このステップが最後のステップであり、ガイドがそれをスキップした場合、ガイドは完了します。
アドバンストリガー Web only	ユーザーが指定した要素とやり取りしたときに、ガイドを別のステップに進めることができます。

ツールチップ

ツールチップはツールチップテンプレートで利用でき、1つのステップが含まれています。

ツールチップはピンのようなものですが、ユーザーがクリックしたり、タップしたり、その上にカーソルを置いたりした場合にのみ表示されます。ツールチップを使用して、UI スペースを節約しながら機能に関する詳細情報をインラインで表示できます。

設定	概要
コンテンツのレイアウト	ガイドのコンテンツの視覚的な順序を更新します。
タイトルとコンテンツの整合性	タイトルと本文テキストの配置を変更します。
アクションバー Web only	ガイドのボタンの配置とレイアウトを更新します。
Z-index Web only	ポップオーバーにカスタムのz-index値を指定します。
ポインタ	ダイアログとマーカーを関連付けるスタイルを選択します。
マーカー	ツールチップメッセージを表示するマーカーの外観を選択します。
要素はマーカーです Web only	ターゲットとなる要素がツールチップのトリガーになります。ツールチップは、ユーザーが要素をクリックまたはマウスを合わせたときに表示されます。個別のマーカーアイコンはありません。ページ要素にボタン、リンク、アイコンなどの明白なアフォーダンスがすでに存在していて、その上に2つ目のインジケーターを重ねたくない場合にこれを使用します。
マーカー幅 Web only	ツールチップのマーカー (アイコン/画像) の幅をピクセル単位で定義します。
テキストアニメーション	ツールチップのテキストをタイプライター効果でアニメーション化できるようにします。
ホバー/クリック時に表示 Web only	ツールチップメッセージを表示させるトリガーを選択します。

ツールチップはクールダウンを回避し、ユーザーがツールチップを完了した後も表示されたままです。ツールチップサーベイの場合、ユーザーは新しい送信としてサーベイに再度記入することができます。

バナー

バナーはバナーテンプレートで使用でき、1つのステップが含まれています。

バナーは、ページの上部または下部に表示される全幅ブロックです。長期的な発表、ステータスの更新、または時間に敏感なプロモーションにはバナーを使用してください。

バナー表示の制限事項

：インライン表示スタイルを使用している場合でも、バナーはウェブサイト上の既存コンテンツと重複することがあります。重複は、サイトの <bodyelement> 要素や他のページ要素に矛盾する CSS スタイルがある場合に発生します。表示スタイルをオーバーレイからインラインに変更してもコンテンツの重複が解決されない場合、アプリケーション内の CSS が競合しているため、バナーが意図した位置にレンダリングされません。

回避策としてカードの埋め込みを使用する：

バナーが期待どおりにレンダリングされない場合は、カードの埋め込みを試してください。カードの埋め込みはコンテンツをネイティブ要素としてページのDOMに直接レンダリングするため、CSSの競合が発生する可能性が低減されます。たとえば、<body> 上でカードを子にプレペンド (最初の子) として埋め込むように設定できます。これにより、通常カードはページの最上位要素としてレンダリングされます。

設定	概要
スティッキー Web only	ユーザーがスクロールしている間もバナーが表示されたままにします。
表示スタイル Web only	バナーがページのコンテンツとどのように相互作用するかを制御します。モバイルバナーはオーバーレイのみをサポートしています。
Z-index Web only	ポップオーバーにカスタムのz-index値を指定します。
テキストアニメーション	タイプライター効果でバナーのテキストをアニメーション化できるようにします。

チェックリスト Web only

チェックリストは、ユーザーが目標達成に向けた進捗状況を追跡するのに役立つフォームを提供します。これには、1つのヘッダーと1つ以上のチェックリスト項目が含まれています。チェックリスト項目を使用してアクションをトリガーできます。

設定	概要
Z-index	チェックリストにカスタムZインデックス値を指定します。

チェックリスト項目 Web only

チェックリストの項目はチェックリストを構成します。

設定	概要
スキップ可能	有効になっている場合、ユーザーは「スキップ」ボタンを使用してチェックリスト項目を完了できます。

カルーセル Mobile only

カルーセルは複数のステップに対応するガイドを1枚のカードとして表示します。ユーザーはボタンをタップすることに頼らずに左または右にスワイプすることでナビゲートできます。ユーザーが自分のペースで閲覧できるようにしたいオンボーディングフローや機能ツアーにカルーセルを使用します。

カルーセルは、スマートフォンではフルスクリーンで表示され、タブレットでは固定幅のカードとして表示されます。カルーセルの各ステップはクラシックなレイアウトを使用し、他のフォームファクタと同じブロックとプロパティをサポートしています。

設定	概要
ステップカウンタを表示	ユーザーがステップ間をスワイプすると、ガイドの進捗状況が表示されます。
ステップカウンタ形式	進捗状況を指標ドットで表すには、数値 (例: `1/3`)、冗長文字 (例: `1 of 3`)、またはドットを選択します。

カード埋め込み

カードの埋め込みは、ガイドとサーベイを UI 内のネイティブ要素としてレンダリングします。オーバーレイではなくアプリケーションの一部のように感じられるべき永続的なコンテンツにこれらを使用してください。

固有の識別子が必要

：各カードの埋め込みには、固有のターゲット識別子が必要です（モバイルのみ）。ほとんどのプラットフォーム（SwiftUI .amplitudeViewなど）では、ピンやツールチップと同じ要素タグ付けを使用してください。 Jetpack Compose では、.amplitudeViewmodifier ではなくターゲットを AmplitudeViewcomposable にラップします。複数のカードを埋め込むと、同じ画面上で識別子を共有することはできません。識別子を共有すると、カードがレンダリングされないか、または正しく配置されないことがあります。

カード埋め込みには、カードを配置する場所を指定するターゲット要素セレクターが必要です。プラットフォーム固有のターゲティング設定については、エレメントセレクターに移動します。次の位置オプションから選択して、カードが対象となる要素とどのように関連付けられるかを制御します。

位置	概要
子に添付する (最後の子) Web only	カードをターゲット内の最後の子要素として挿入します。
子要素（最初の要素）の先頭に追加 Web only	カードをターゲット内の最初の子要素として挿入します。
要素の前	カードを対象要素の直前に配置します。
要素の後	カードを対象要素のすぐ後に配置します。
要素を置換する	対象となる要素をカードに置き換えます。
幅	カードのサイズをコンテンツに合わせるには [自動] を選択し、ピクセル幅を指定するには [固定] を選択し、コンテナ幅を埋めるには [フル] を選択します。
アライメント	幅が Full でない場合は、カードをコンテナの左、中央、または右に配置します。
高さ	カードのサイズをコンテンツに合わせるには [自動] を選択し、ピクセルの高さを指定するには [固定] を選択し、コンテナの高さを埋めるには [フル] を選択します。
マージン	上部、右部、下部、左のマージン（ピクセル単位）を設定して、カードと周囲のUI要素との間の間隔を制御します。マージンはパディングとは異なります。マージンはカード周囲の外部スペースを制御し、パディングはカード内の内部スペースを制御します。

三点メニューをクリックすると、フォーマット設定にアクセスできます。

設定	概要
コンテンツのレイアウト Web only	ガイドのコンテンツの視覚的な順序を更新します。
アクションバー Web only	ガイドのボタンの配置とレイアウトを更新します。
Z-index Web only	カードのカスタムz-index値を指定します。
テキストアニメーション	カードのテキストをタイプライター効果でアニメーション化できるようにします。

要素セレクタ Web only

ピン、ツールチップ、カード埋め込み、または要素ベースのトリガーを使用してガイドやサーベイを設定する場合、ターゲットにする要素を指定する必要があります。ターゲットの指定方法は、使用しているプラットフォームによって異なります。

ウェブ Web only

要素セレクターを使用すると、CSSセレクターを使用して特定のページ要素を識別およびターゲットにすることができます。

要素セレクターの仕組み

Amplitudeのビジュアル要素セレクターは、選択した要素に対して最も安定したCSSセレクターを自動的に識別するため、ページがわずかに変更された場合でもガイドは機能し続けます。

ビジュアルセレクターを使用するには：

ガイドビルダーで「テストとプレビュー」をクリックします。
ターゲット要素を含むページに移動します。
ターゲットにしたい要素をクリックします。
Amplitudeは自動的にその要素のCSSセレクターを生成します。

ネストされた要素を選択する

入れ子になった要素（他の要素内の要素）を選択するには、要素にカーソルを合わせながらAltキー（Macの場合はOptionキー）を使用します：

**[テストとプレビュー] **をクリックします。
親要素にカーソルを合わせます。
Alt/Optionキーを押し続けます。
カーソルを移動し続けると、ネストされた子要素をドリルダウンできます。
必要なネストされた要素をクリックして選択します。

この方法を使用して、カード内のボタンやメニュー内のアイコンなど、複雑なページ構造内の特定の要素をターゲットにすることができます。

独自のセレクターを上書きするか指定する

独自のセレクターを指定したり、より詳細に制御したりするには、CSSまたはXPathセレクターを手動で入力してください：

要素セレクターフィールドに、CSSセレクターまたはXPath式を貼り付けます。
選択戦略を選択してください：
- CSS セレクター: 標準の CSS セレクター構文 (例: #submit-button).primary-cta。
- XPath: より複雑なターゲティングを行うための XPath 表現 (例: //button[@id='submit'])。
オプションで、セレクターが一致を見つけられなかった場合にAmplitudeが使用するフォールバックテキストを追加できます。
テストとプレビューを使用してセレクターをテストし、セレクターが正しい要素をターゲットにしていることを確認します。

カスタムセレクターのベストプラクティス

IDやデータ属性など、変更される可能性が低い安定した属性を使用してください。
必要がない限り、特定の位置に依存するセレクター (:nth-childなど) は避けてください。
さまざまなページや画面サイズでセレクターをテストしてください。
信頼性を確保するために、ガイドターゲティング専用のデータ属性を追加してください。
複数の類似要素間で動作する柔軟なセレクターを作成するために使用します:is()。

カスタムセレクターの例：

CSS セレクタ： .header-navigation > .menu-item:first-child
XPath： //div[@class='container']//button[contains(text(), 'Submit')]
複数の要素を持つ CSS ::is([my-class="foo"],[my-class="bar"])

Amplitudeは、:is(), :not(), :nth-of-type(), :where()などの関数疑似クラスを含む、ほとんどの最新CSSセレクター機能をサポートしているため、より表現力豊かで柔軟なセレクターを作成できます。

シャドウ DOM 内の対象要素

ビジュアル要素セレクターは、オープンシャドウDOM内の要素を直接ターゲットにすることができます。シャドウ DOM 要素は、通常のページ要素と同じ方法で選択できます。テストとプレビューの期間中に要素をクリックします。

以下の制限事項に留意してください。

Open Shadow DOM のみ: シャドウ DOM はオープンモードである必要があります。要素セレクターは閉じたシャドウ DOM にアクセスできません。
カード埋め込みはサポートされていません: カード埋め込みフォームファクタはシャドウ DOM 内では機能しません。シャドウ DOM 要素の近くのコンテンツには、ポップオーバーやピンなどの他のフォームファクタを使用してください。

ステップがレンダリングされたときにターゲット要素がDOM内に存在しない場合、ピン留めされたステップは表示されません。ガイドとサーベイは、バーチャルターゲティングやアンカー要素が不足している場合の自動スキップをサポートしていません。

モバイル Mobile only

ピン、ツールチップ、カード埋め込みを使用するガイドやサーベイでは、SDK が画面上の特定のビューをターゲットに設定する必要があります。アプリ内で各ターゲットビューに固有の識別子を付けてタグ付けし、ガイドまたはサーベイビルダーの要素選択フィールドでその文字列を使用します。

Jetpack Compose では、カード埋め込みターゲAmplitudeViewットをコンポーザブルでラップします。ピンやツールチップでは.amplitudeView修飾子を使用できます。

ご利用のプラットフォームのエレメントターゲティングセクションに移動します。

プロパティ

これらのプロパティはフォームファクタ全体に適用されるため、ガイドコンポーネントをカスタマイズできます。各プロパティで使用できるオプションは、フォームファクタによって異なる場合があります。

位置

ガイドが画面上に表示される位置を制御します。

フォームファクタ	オプション
モーダル	右上、中央上、左上、右中央、右下、中央下、左下、左中央、中央。
ポップオーバー	右上、中央上、左上、右中央、右下、中央下、左下、左中央、中央。
ピン	ターゲット要素に対するピンの相対位置を制御します。ガイドの位置と配置を選択します。たとえば、位置：`Bottom of target` と配置：`Left` は、ガイドをターゲット要素の下に配置し、ガイドの左側をターゲットの左側に合わせます。
ツールチップ	情報マーカーが表示されるターゲット要素の側を指定します。必要に応じて、垂直または水平のオフセットを追加します。
バナー	ページの上部または下部です。ユーザーがスクロールしている間もバナーが表示されたままにするには、Stickyオプションを設定します。表示スタイルを選択します。ページコンテンツの期間にバナーを表示するにはインラインを使用します。または、ページコンテンツの上にバナーを浮かせるにはオーバーレイを使用します。
カード埋め込み Web only	ターゲット要素に対する相対位置を制御します。［追加］、［前置き］、［前］、［後］、または［置換］から選択します。幅 (自動、固定、またはフル)、幅がフルでない場合の配置 (左、中央、または右)、高さ (自動、固定、またはフル)、および余白 (ピクセル単位の上、右、下、および左) を設定して、カード周囲の間隔を制御します。
チェックリストヘッダー Web only	ページに関連して左下または右下です。

手順

ステップを使用して、複数のステップを含むガイドを作成できます。プロセスをより小さく実用的なステップに分割し、ユーザーを最初から最後までガイドします。

ツールチップとバナーには1つのステップが含まれています。

ブロック

ブロックを使用すると、ガイドをより魅力的にすることができます。ボタン CTA や画像、動画を追加します。ブロックは、設定したフォームファクタと配置に基づいて自動的に整列されます。

ボタン

ボタンを追加するときに、ユーザーがボタンをクリックまたはタップしたときに何が起こるかを選択できます。プライマリボタンとセカンダリボタンの両方が、条件付きロジックを含むすべてのアクションをサポートしています。

アクション	概要
リンクにアクセス	指定したウェブサイトを開きます。Web ガイドとサーベイについては、［Same］タブ（現在のタブ/画面で開きます）、［New］タブ（新しいブラウザタブで開きます）、または［Use router］を選択します。このオプションでは、設定済みのルータを使用し、ルータ設定が必要です。モバイルガイドとサーベイについては、「アプリ内ブラウザで開く」（アプリ内のリンクを開く）、「デバイスブラウザで開く」（デバイスのデフォルトブラウザで開く）、「ルーターを使用」を選択してください。
クリック/タップ要素	ユーザーがガイド内のボタンをクリックしたときにクリックイベントを受信するページ上の要素を指定します。
ガイドを表示	別のガイドを起動します。
アンケートを表示	アンケートを開始します。
戻る	ガイドの前の手順に進みます。
先へ進む	ガイドの次のステップに進みます。
ステップに移動する	ガイドに記載されている手順に進みます。
条件付きロジックを評価する	ユーザープロパティやサーベイへの回答に基づいてさまざまなアクションを実行できます。ボタンの動作をさまざまなユーザーに合わせてカスタマイズするための条件を作成します。詳細については、「条件付きロジック」を参照してください。
コールバックを実行する	ガイドとサーベイのインストルメンテーションで定義されているコールバック関数をトリガーします。詳細については、「コールバックの登録」を参照してください。
アプリストアの評価リクエストを送信する Mobile only	ネイティブのアプリ内フローを使用してアプリを評価するようユーザーに促します（iOSの場合はApp StoreおよびAndroidの場合はGoogle Play）。SDKはネイティブの評価API（iOS向けStoreKit、Android向けPlay In-App Review）を呼び出します。ネイティブAPI呼び出し自体がエラーを返した場合（たとえば、有効なシーンやアクティビティがない場合）、アンケート設定でアプリ識別子を入力した場合、リクエストはプラットフォームのアプリストアページにフォールバックされます。呼び出しは成功したが、プラットフォームが評価ダイアログを表示しないことを選択した場合（レート制限、ユーザーのオプトアウト、またはその他のプラットフォーム制限のため）、アンケートはストアページを開くことなく静かに終了します。
Open AI Assistant	AI Assistantのインターフェイスを開きます。
リソースセンターを開く	リソースセンターを開きます。
ドキュメントを開く	指定したドキュメントを開きます。

AppleとGoogleは独自のネイティブアプリレビュー表示を管理しており、ガイドからのレビューリクエストを上書きする場合があります。

ステップを完了した時点でマークする Web only

チェックリストのみに**「ステップ完了時マーク」**オプションがあります。 Amplitudeは、次のいずれかのアクティビティが発生した場合にチェックリストステップを完了とマークします。

Button is clicked
Page is visited
Element is clicked
Event is tracked

各オプションについて、チェックリストステップが「未完了」から「完了」に更新されるのは、チェックリストが表示されているときにクライアント上でアクションが発生した場合のみです。たとえば、Amplitudeがサーバー側でイベントを追跡する場合や、チェックリストが表示される前にイベントが発生した場合、そのステップは完了とマークされません。

画像

体験に含める画像をアップロードしてください。体験のレイアウトによって画像の位置が決まります。

ビデオ

動画の URL を貼り付けます (YouTube、Vimeo、Loom、Vidyard、または )。MP4ファイル）。画像と同様に、レイアウトによって動画の位置が決まります。

これは役に立ちましたか？