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

111

注意事項

  • アプリ（KARTE for App）には対応しておりません
  • 外部ライブラリ Driver.js を利用しています
    基本的な環境での確認は実施しておりますが、動作には外部ライブラリ及びサイトに依存する可能性があります。
    十分に実際のサイト上で検証し、ご活用ください。
    サイトの実装によっては意図通りの挙動にならない可能性もございます。
    CSSやJavaScriptのカスタマイズによって対応ができるケースもありますが、サポート対象外となります。
  • 利用しているDriver.jsのバージョンは、v0.9.7となります
    サイト上で読み込んでいる他のライブラリとのバッティングにご注意ください。
  • ステップの調整はScriptの編集が必須です
    ステップ数の増減などはエンジニアにご相談ください。※テンプレートのカスタマイズはサポート対象外となります。

利用方法

1. シナリオストアからインストールする
「グローバルナビゲーション > メニュー切り替え > ストア > シナリオストア」より「認知を促進したい > サイトで簡易的なチュートリアル施策を実施する」を選択し、インストールしてください。
パッケージがインストールが完了すると接客サービス一覧に停止状態で反映されます。
「接客サービス一覧へ」をクリックしてインストールした内容を確認してください。
2. カスタマイズする

  • 配信設定
    対象ユーザーや配信トリガーなどを利用意図に従い設定してください。
    利用にあたっては必ずサイト上で本番配信を実施検証の上ご利用ください。
    CSSセレクタの記載については CSSセレクタの取得・検証をするもご参照ください
  • メインカラー設定
    コンテンツのボタン等のカラーが変更できます。
スクリーンショット 2019-12-19 15.34.56
  • ポップアップ設定
    最初に表示されるポップアップのコンテンツの変更が可能です。
スクリーンショット 2019-12-19 15.36.19

最初に表示されるポップアップの表示非表示が制御可能です。

スクリーンショット 2022-03-24 18.07.05

非表示の場合すぐにチュートリアルが開始されます。
例えば、チュートリアルのSTEPを1つにすることで来訪時の特定箇所のガイドでご利用可能です。

スクリーンショット 2022-03-24 18.10.07
  • チュートリアル設定（ボタン）
    開始ボタンを押下後の各チュートリアルの下部のボタンを変更します。
スクリーンショット 2019-12-19 15.38.06
  • チュートリアル設定（各ステップ）
    各ステップのコンテンツの編集は「カスタマイズ > Script」にて変更します。
項目 概要 例
element CSSセレクタを指定してください .css-selector-sample
popover.title タイトルを指定してください Title-sample
popover.description 説明文を入力してください Description-sample
popover.position 表示位置を入力してください left
positionプロパティについては mozilla > position をご参照ください。
steps

ステップを増減したい場合はsteps変数の要素数を変更してください。以下画像の「これが1step」と書かれている部分です。また、最後のstepには以下画像の「最後のstepに記載する」の部分をstepの中に記載するようにしてください。

null

結果の確認

  • チュートリアル開始時にtutorial_startイベント、終了時に tutorial_finishイベントが発生します。
    • tutorial_startイベントの発生箇所
tutorial start
  • tutorial_finishイベントの発生箇所
tutorial finish
  • ユーザーストーリー
sample event

null

  • 接客サービス詳細画面の「指標のカスタマイズ」より追加（表示のチェック）することで、結果を確認できます。
追加

※ イベントが表示されない場合は、「イベント」画面>該当のイベントを編集で ゴールイベントに設定する を有効にしてください

event

よくあるお問い合わせ

チュートリアルの「開始（スタート）」をクリック時に「開始（スタート）」のステートを消したい
基本的にチュートリアルを再度実施できるようにステートは残しておく（表示位置を右下等に設定）ことを想定しておりますが、見た目上消したい場合には、カスタマイズ（HTMLクラス karte-close）を追記いただくことで実現可能となります。

  • Before
<button type="button"
  class="btn _fit-width btn-hover-dark"
  krt-on:click="startDriver()"
>
  • After 
<button type="button"
  class="btn _fit-width btn-hover-dark karte-close"
  krt-on:click="startDriver()"
>

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

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

フォーカスされた箇所が白く表示されてしまう
外部ライブラリ Driver.js を利用しWrapし提供しているためサイトの作りによっては、問題が発生するケースがございます。

※ 回避方法として、ブラウザのposition と z-indexの受け取り方の違いから起きてる問題の可能性と推測されため以下CSSをアクションのカスタマイズよりCSSタブに追加することで修正される可能性が御座います。

    .driver-fix-stacking {
        position: relative !important;
    }

※ 上記回避策で問題が解消しない場合ScriptのDriver.jsの設定に以下のように細かなアニメーションをしない設定を書き加えると正しく動作する可能性が御座います。正し、フワッとした動きなどのアニメーションが止まってしまうので予めご了承ください。

var driver = new Driver({
        animate: false, // この行を追記
        opacity: 0.6,
        doneBtnText : '#{tutorial.doneBtnText}',
        nextBtnText : '#{tutorial.nextBtnText}',
        prevBtnText : '#{tutorial.prevBtnText}',
        closeBtnText : '#{tutorial.closeBtnText}',
        onReset: function() {
            setTimeout(function() {
                driverStarted = false;
                window.removeEventListener( 'touchend', handleTouchEnd,  { passive: true } );
            }, 1000);
        },
    }),

画面の下部に勝手にスクロールしてしまう
外部ライブラリ Driver.js を利用しているためサイトの作りによってはチュートリアル開始直後に画面下部に勝手にスクロールしてしまう問題が発生するケースがございます。

※ Script内に記載のあるDriver.jsの設定に以下のようにハイライト後に任意の位置にスクロールさせる処理を追記することで問題を回避できる可能性が御座います。

var driver = new Driver({
        opacity: 0.6,
        doneBtnText : '#{tutorial.doneBtnText}',
        nextBtnText : '#{tutorial.nextBtnText}',
        prevBtnText : '#{tutorial.prevBtnText}',
        closeBtnText : '#{tutorial.closeBtnText}',
        // ↓ここからを追記
        onHighlightStarted: function() {
            setTimeout(function() {
                window.scrollTo(0,0)
            }, 100);
        },
        // ↑ここまでを追記
        onReset: function() {
            setTimeout(function() {
                driverStarted = false;
                window.removeEventListener( 'touchend', handleTouchEnd,  { passive: true } );
            }, 1000);
        },
    }),