プロダクトツアーを作成する

このページでは、プロダクトツアー（ツールチップによるアプリ内ガイド）を作成し、ユーザーにアプリの使い方やアップデートを伝える方法を学びます。

このセクションで学ぶこと

アプリに初回来訪したユーザーに、プロダクトの使い方を伝え、リテンションアップにどれだけ寄与したかを計測する。

ここでは、初回来訪したユーザーに対して、アプリ内で任意の要素をユーザーにハイライトし、実際に触れてもらうことを目的とします。メッセージの内容は次のようにデザインします：

「初回来訪ユーザー向けのプロダクトツアー」
- 全部で下記3つのガイドを順番に表示させるツアーを作成する。
- それぞれのガイドは、特定のボタンやUIをハイライトするものとする。
  - 現段階ではイメージとして、ピンク色の部分で示しています。

また、今回はハイライトされたボタンやバナーなどの要素自体を押下してもらうことで、次のガイドに進めるような設定にします。これにより、ユーザーの体験を可能な限り阻害しない形で、「アプリ内のKPIを意図的に上昇させる」ことが可能となります。

（下記はFlutterでの例になります）

アンカーに関するドキュメントを参考に、アプリ内でガイドを挿入したい部分に、NativebrikAnchorのコードを挿入します。

ハイライトしたい要素ごとにアンカーのIDを事前に設定しておくことをお勧めします。これにより、その後はコードを編集せずに、Nativebrik の管理画面で柔軟にプロダクトツアーを変更できます。

下記では、対象のUIウィジェットに任意のIDのアンカーをつけています。今回であれば、3つのガイドを作成するので、FLOAT_BUTTON、SEARCH_BUTTON 、HABIT_CARD という名前のアンカーを作成しておきましょう。

// 例：1つ目（左）の、フローティングボタンに対するガイド
NativebrikAnchor(
  "FLOAT_BUTTON",
  child: ElevatedButton(
    child: Text('FLOAT_BUTTON anchor'),
  ),
)

// 例：2つ目（中央）の、検索ボタンに対するガイド
NativebrikAnchor(
  "SEARCH_BUTTON",
  child: ElevatedButton(
    // それぞれの子要素
  ),
)

// 例：3つ目（右）の、習慣化バナーカードに対するガイド
NativebrikAnchor(
  "HABIT_CARD",
  child: ElevatedButton(
    // それぞれの子要素
  ),
)

ログイン後、ダッシュボードページにアクセスし、以下の手順に従って実験を作成します。

まず、左のフローティングバーの上部をホバーし、Tooltip を選択しエディタに配置します。
その後、配置したそれぞれのTooltipに対し、コード側で設定したAnchor IDを入力します。
- 今回であれば、それぞれのTooltipに対して、3つのIDを付与します。
配置したTooltipをそれぞれ矢印で繋ぎ、最後のTooltipはx ボタンに繋ぎます。
また、各Tooltipを選択し、右バーのTooltip Navigate On Tapの部分で、Targetに対しOn Anchor Tap (default) を設定し、対象の要素が押下された際にガイドを進めるようにします。
- Targetに対し、On Screen Tapを設定すると、画面上のどこかをタップするとガイドが進むようになります。