【ストア】サイトで簡易的なチュートリアル施策を実施する

ページ上の任意の要素をハイライト表示する外部ライブラリ（Driver.js）を利用することで簡易的なチュートリアル施策をKARTEで実現できます。サービスの初回利用者や、新機能の利用方法などの活用促進にご利用ください。

注意事項

• 本テンプレートには、外部ライブラリ（Driver.js）を利用しています。サイトに依存する可能性があるため、利用には必ず実サイト上で、本番配信し検証の上ご利用ください。
• 利用しているDriver.jsのバージョンは、v0.9.7となります。サイト上で読み込んでいる他のライブラリとのバッティングにご注意ください。
• ステップ数を増やす、減らすなどカスタマイズしたい場合はJavaScriptの編集が必要になるため、エンジニア含めご利用ください。※テンプレートのカスタマイズはサポート対象外となります。
• KARTE for Appには対応しておりません。

利用方法

• テンプレート

  • グローバルメニュー→「接客シナリオ」より、「サイトで簡易的なチュートリアル施策を実施する」を選択し、インストールを行う

• 設定方法

  • メインカラー/フォントサイズ
    • メインカラー：コンテンツのボタン等のカラーが変更できます
    • フォントサイズ：ステップ内のフォントサイズを変更できます

• コンテンツ

  • 最初に表示されるコンテンツになります。
    
    • タイトルやコメント等を任意に変更ください。

• ステップ1〜ステップ4

  • ステップ1入力後同様の設定をステップ4まで入力ください。
  • コンテンツから「スタート」後に表示されるステップとなります。
    
    • CSSセレクタ
      
      • フォーカスしたい位置をCSSセレクタで指定します
    • コメント
      • 表示したいテキストを任意に変更ください
    • コメントの表示位置
      • 選択可能な位置は以下になります。
        • 左部：left, left-center, left-bottom
        • 上部：top, top-center, top-right
        • 右部：right, right-center, right-bottom
        • 下部：bottom, bottom-center, bottom-right
        • 中央部：mid-center
  • その他
  • 対象ユーザーや配信トリガーなどを利用意図に従い設定してください。
  • 利用にあたっては必ずサイト上で本番配信を実施検証の上ご利用ください。
  • CSSセレクタの記載については、こちらのサポートサイトもご参照ください

よくあるお問い合わせ

• Q.チュートリアルの「ボタン（次へ）」を押しても、次の項目へ移動しません。
  • A.各ステップに指定するCSSセレクタに誤りがある可能性が御座います。CSSセレクタの記載を再確認してください。

例：ステップ1

• Q.吹き出しのコンテンツの位置が画面からはみ出して切れて表示されてしまう。
  • A. 各ステップの「コメントの表示位置」を変更するか、もしくは、フォントサイズを変更して確認ください。

例：ステップ1