最初にアクセスしたユーザに対して、サイトの魅力を伝えるために、最初にやってほしいアクションへ誘導をするサンプルです。
以下がサンプルです。
初めてガイド
以下のリンクの説明は「初めてガイド」をクリック！
JSのライブラリ「tourguide-js」を利用しています。
要素をクリックするとモーダルウィンドウが次々と表示され、ユーザを導きます。
「data-tg-title」はモーダルのタイトル
「data-tg-tour」はモーダルのボディー
「data-tg-order」はモーダルのナンバリング
設定はいろいろ指定できます。詳しいバリエーションの指定についてはライブラリをご参照ください。
htmlは以下の通り
<link rel="stylesheet" href="/js/lib/tourguide-js/css/tour.min.css">
<script src="/js/lib/tourguide-js/tour.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo_start">初めてガイド</div>
以下のリンクの説明は「初めてガイド」をクリック！
<div id="demo_btns">
<div data-tg-title="いらっしゃいませ"
data-tg-tour="当サイトはUIのサンプルをたくさん紹介するサイトです"
data-tg-order="1">
<a href="/">トップページはこちら</a>
</div>
<div data-tg-title="ステップ１"
data-tg-tour="筆者の<span='color:green;'>気まぐれ</span>でいろんな言語のサンプルがあります"
data-tg-order="2">
<a href="/search/">言語からサンプルを探す</a>
</div>
<div data-tg-title="ステップ２"
data-tg-tour="よく見られているサンプルを見てみる方はこちらをクリック"
data-tg-order="3">
<a href="/ranking/">人気のサンプルはこちら</a>
</div>
</div>
本サンプルではクリックをトリガーにしています。
JSは以下の通り
<script>
window.onload = () => {
const tg = new tourguide.TourGuideClient({
exitOnClickOutside: true
})
document.querySelector("#demo_start").addEventListener("click", () => {
tg.start()
});
};
</script>ページロードをトリガーにするのもありです。
