如何建立 Product Tours

前言

因目前開發的專案中，有許多的客製化需求。那麼有些功能在畫面上是無法被看到的，必須要觸發某些元件，才會出現。那麼這時候該如何提升使用者體驗，避免出現工程師做出來，但使用者卻不知道的窘境，我們就需要做 Product Tours。

那麼筆者認為最好上手的是這一套 React Tour，他可以很輕鬆的直接加在元素上。

如何使用

在要加上流程的元件外面包一層 TourProvider。

import { TourProvider } from '@reactour/tour'
import { steps } from './steps.js'
import Main from './Main.js'
	
export default function App () {
  return (
    <TourProvider steps={steps}>
      <Main />
    </TourProvider>
  )
}

在元件內使用 setIsOpen 點擊按鈕時，觸發 Tour Dialog。

在要進行 Tour 的元素，加上 className。那這些 className 都要與 steps 的 selector 對應。

需要特別注意的點是，假如說今天在元素上設定第二步，他還是會出現在畫面上，但就會跑版。所以需要特別注意。

import { useTour } from '@reactour/tour'

export default function Main () {
  const { setIsOpen } = useTour()

  return (
    <div className="demo">
      <header>
        <button onClick={() => setIsOpen(true)}>Open Tour</button>
      </header>
      <p>
        <span className="first-step">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. <span className="second-step">Vestibulum lorem</span> lorem.
      </p>
      <p>
        Lorem ipsum Praesent nec tristique velit, austo. <span className="third-step">Praesent nisi mauris</span>, eleifend sed iaculis a, tincidunt et tellus. Etiam vitae velit risus.  
      </p>
    </div>
  )
}

設定 steps

export const steps = [
  {
    selector: '.first-step',
    content: 'This is the first Step',
  },
  {
    selector: '.second-step',
    content: 'This is the second Step',
  },
  {
    selector: '.third-step',
    content: 'This is the third Step',
  },
]

結語

提升使用者體驗是前端的價值之一，越能夠站在使用者的角度思考他們會遇到什麼問題，越能夠做出越人性化的系統。React Tour 雖然不是一個很重要的功能，但加上去可以大大提升使用者體驗喔！

參考連結

Top 5 React Onboarding Libraries for Product Tours and Walkthroughs

https://reactour.vercel.app/tour