GTMで任意のページにチュートリアルを実装する方法

Tweet

Google Tag Managerでチュートリアルを簡単に実装できる方法を見つけたのでメモ。
チュートリアルを出したいページでdriver.jsを読み込んでハイライトを出しながら説明していくというものです。内容が決まっていたら10分くらいで実装できちゃうのでとっても便利でした。

サンプル：GTMでチュートリアルを実装

まずは下のボタンをクリックしてみてください。
クリックするとGTMでサンプルを実行します。

<link rel="stylesheet" href="//unpkg.com/driver.js/dist/driver.min.css">
<script src="//unpkg.com/driver.js@0.8.1/dist/driver.min.js"></script>//driver.jsライブラリの読み込み
<script>
  var driver = new Driver();

// ポップアップの表示箇所と内容設定
driver.highlight({
     // チュートリアルのフォーカスをあてる要素の指定
        element: '#contents1 > span',         popover: {
          title: 'こんな感じのチュートリアルを解説します。',
description:'フォーカス外の暗くなっている部分をクリックorタップしてください。',
           position: 'bottom',
          }
        });
</script>

これだけです。driver.jsを読み込んで、必要な設定を行っているだけです。
「element」にフォーカスをあてたいセレクタを設定して、「title」に説明を記載しているだけですね。
※「description」というオプションを設定することもできます。
次ではもう少しステップ的な実装をしてみます。

driver.jsをもう少し使う

今回もまずは下のボタンをクリックしてみてください。
クリックするとGTMでサンプルを実行します。
※スマホだと、「次へ」を長押ししないといけないかも・・・

<link rel="stylesheet" href="//unpkg.com/driver.js/dist/driver.min.css">
<script src="//unpkg.com/driver.js@0.8.1/dist/driver.min.js"></script>//driver.jsライブラリの読み込み
<script>
  var driver = new Driver({
  //コントロールボタンのテキストを変更できます。
    doneBtnText: '終わり',
  closeBtnText: '閉じる',
  nextBtnText: '次へ',
  prevBtnText: '戻る',
});

// ポップアップの表示箇所と内容設定
driver.defineSteps([//defineStepsで連続したハイライト表示ができます。
{
        element: '#contents1 > span',         
        popover: {
          title: 'こっちは「highlight」で表示しています。',
           position: 'bottom',
          }
        },
{
        element: '#contents2 > span',         
        popover: {
          title: '「defineSteps」でハイライト箇所を連続させられます。',
          description:'カンタンですよね？',
           position: 'bottom',
          }
        },
        ]);
// Start the introduction
driver.start();
</script>

ということで、「driver.js」を使いながら、チュートリアルを入れたいタイミングでGTMタグを発火させるという方法で任意のチュートリアルを作成してみました。
かなり簡単に実装できるので便利な方法ではないかと。

Tweet