このテンプレートは、外部ライブラリを利用しています。基本的な環境での確認は実施しておりますが、動作には外部ライブラリ及びサイトに依存する可能性があります。あらかじめご認識の上、十分に実際のサイト上で検証し、ご活用ください。

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

null

注意事項

  • テンプレートには、外部ライブラリ（Driver.js）を利用しています。基本的な環境での確認は実施しておりますが、動作には外部ライブラリ及びサイトに依存する可能性があります。また、KARTE動作保証の範囲外となる環境もあるため、ご利用には必ず実サイト上で本番配信し検証の上ご利用ください。
  • 利用しているDriver.jsのバージョンは、v0.9.7となります。サイト上で読み込んでいる他のライブラリとのバッティングにご注意ください。
  • ステップの調整はScriptの編集が必須です。ステップ数の増減などはエンジニアにご相談ください。※テンプレートのカスタマイズはサポート対象外となります。
  • アプリ（KARTE for App）には対応しておりません。
  • SPA（Single Page Application）サイトでは対応しておりません。

利用方法

  • テンプレート

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

  • 設定方法

    • メインカラー
      • メインカラー：コンテンツのボタン等のカラーが変更できます

null

  • ポップアップ
    • 最初に表示されるポップアップのコンテンツの変更が可能です

null

  • チュートリアル設定
    • 開始ボタンを押下後の各チュートリアルの下部のボタンの変更

null

  • チュートリアルの各ステップ
    • 各ステップのコンテンツの編集は カスタマイズ>Script にて変更します。

null

        // Code Template
        }, {
            element: '.css-selector',CSSセレクタを指定
            popover: {
                title       : 'Title', タイトルを入力
                description : 'Description',説明文を入力
                position    : 'Position' 表示位置を変更
            }
  • CSSセレクタ.css-selector ：表示位置をCSSセレクタで指定
  • タイトル Title：タイトルを入力
  • 説明文 Description：説明文を入力
  • 表示位置 Position：表示位置を変更
    • 左部：left, left-center, left-bottom
    • 上部：top, top-center, top-right
    • 右部：right, right-center, right-bottom
    • 下部：bottom, bottom-center, bottom-right
    • 中央部：mid-center
  • ステップを増減したい場合
    • Code上のsteps内の記述を必要数だけ、変更することでステップ数の増減が可能です
      null

  • その他

    • チュートリアル開始時にtutorial_startイベント、終了時に tutorial_finishイベントが発生します。
      null

    • 対象ユーザーや配信トリガーなどを利用意図に従い設定してください。

    • 利用にあたっては必ずサイト上で本番配信を実施検証の上ご利用ください。

    • CSSセレクタの記載については、こちらのサポートサイトもご参照ください

よくあるお問い合わせ

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

※アクション変数画面>カスタマイズ>HTML(106-109行目)

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()"
>
  • Q.チュートリアルの「ボタン（次へ）」を押しても、次の項目へ移動しません。
  • Q.吹き出しのコンテンツの位置が画面からはみ出して切れて表示されてしまう。
    • A. 各ステップの「表示位置 Position」を変更して確認ください。
      　　　もしくは、HTML内のフォントサイズを変更ください。
      null
  • Q.フォーカスされた箇所が白く表示されてしまう。
    • A. 外部ライブラリ（Driver.js）を利用しWrapし提供しているためサイトの作りによっては、問題が発生するケースがございます。

※回避方法として、ブラウザのposition と z-indexの受け取り方の違いから起きてる問題の可能性と推測されため以下、HTMLに追加することで修正される可能が御座います。

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

null