Intro.js の コールバック関数 から GTM Event を送付する

Intro.js というチュートリアルを表示する JavaScript のライブラリがありますが、チュートリアル表示中のボタン操作のイベントで コールバック関数を実行できます。
このコールバック関数で GTM 経由で Google Analytics にイベント送付できそうでしたので、試しにサンプルコードを実装してみました。
結果を以下に記載します。

作成した JavaScript と、サンプル HTML

作成した JavaScript と、その JavaScript を組み込んだ HTML のサンプルについて記載します。

IntroStarter.js

以下のような、JavaScript の static クラスを作成しました。

window.IntroStarter = {
    _sendGTM : function(tutorialId, eventName) {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({"event" : "tutorial.event",
        "eventCategory" : "tutorial",
        "eventLabel" : tutorialId,
        "eventAction" : eventName,
        "eventValue" : 1
      });
    },
    start : function(tutorialId) {
      var self = this;
      // Start!
      self._sendGTM(tutorialId, "start");

      introJs().oncomplete(function() {
          // Complete!
          self._sendGTM(tutorialId, "complete");
      }).onexit(function() {
        // Exit..
          self._sendGTM(tutorialId, "exit");
      }).onbeforechange(function(targetElement) {
          // Beforechange
          if (typeof targetElement === "undefined") {
            return;
          }
          var step = targetElement.getAttribute("data-step");
          if (typeof step === "undefined") {
            return;
          }
          // eventName
          var eventName = "Change To Step [" + step + "]";
          self._sendGTM(tutorialId, eventName);
      }).start();
    }
};

• 実装内容の説明
  実装した内容の説明を記載します。

  • _sendGTM
    GTM の dataLayer 変数を使って、GTM イベントを送信するメソッドです。
    コールバック関数内で何度か使用するので、対象箇所をメソッド化しました。

  • start
    Intro.js のチュートリアル開始時に、各コールバック関数を追加するメソッドです。
    Intro.js を少し動かした感じだと、onexit、oncomplete、onbeforechange に実装しておけばチュートリアルの挙動は大体拾えそうに思いましたのでその3つに実装しています。
    Intro.js には hint というチュートリアルの表示方法もあり、そちらを使う場合は、onhintclick、onhintclose に追加実装をするといい感じに拾えると思います。ちなみに、チュートリアル開始前に、self._sendGTM(tutorialId, "start"); で start を送信していますが、初回の表示も、onbeforechange で表示できるのでいらない気もしています。

呼び出し側の記述

呼び出し側の記述は以下の通りです。

<a class="navbar-link" href="javascript:void(0)" onclick="javascript:IntroStarter.start('1234')">Demo</a>

GTM と連携させたサンプル

Github page に配置しました。
GTM イベントが送付後、GTM 側で、Alert ダイアログの表示 と Google Analytics への イベント送付を行っています。

• GTM event handring

GTM の実装

Alert ダイアログの表示 と Google Analytics への イベント送付 のため以下のような実装を行いました。

変数

以下、変数4つについて記載します。

• IntroJS イベントアクション
  データレイヤから、eventAction 変数を取得しています。
  

• IntroJS イベントカテゴリ
  データレイヤから、eventCategory 変数を取得しています。
  

• IntroJS イベントラベル
  データレイヤから、eventLabel 変数を取得しています。
  

• IntroJS イベント値
  データレイヤから、eventValue 変数を取得しています。
  

トリガー

以下、トリガーについて記載します。

• tutorial.event 発火
  GTM イベント tutorial.event を捕捉するトリガーです。
  特に条件はなく、すべての<wbr>カスタム イベントを捕捉します。
  

タグ

以下、タグ2つについて記載します。

• GA IntroJS Event 送付
  以下、Google Analytics タグの設定になります。 イベント送付だけだと、時系列の送付タイミング、誰が送信したのかがわかりにくいので、clientId と TimeStamp を送付しています。
  

  • clientId について
    custumTask として送付しています。GTMでGoogleアナリティクスのClient IDを取得する一番確実で楽な方法（2018年版） - 清水誠メモ に記載されている方法で送付しています。

  • TimeStamp について
    GTMでGoogleアナリティクスのアクセス時間を計測しよう - 清水誠メモ に記載されている方法で送付しています。
    clientId X TimeStamp の組み合わせで イベントがサマリ表示されないようになります。

• IntroJs Alert 出力
  以下、JavaScript で GTM イベントで捕捉したデータを Alert 出力するタグです。
  
  上記は画像なので、コードの部分を使用する場合は以下をコピー & ペーストしてください。
  

    <script>
    var messageString  = "category:" + {{IntroJSイベントカテゴリ}}  + ",action:" + {{IntroJSイベントアクション}} +  ",label:" + {{IntroJSイベントラベル}} + ",value:" + {{IntroJSイベント値}};
    alert(messageString);
    </script>
  

業務上使用する場合の留意事項

以下、業務上使用する場合の留意事項 を記載します。

• 会員制のサイトでは会員を特定できるカスタムディメンションを設定する
  会員制サイトの場合、会員 ID を紐付けしないと誰がチュートリアルを触ったのかわからない場合があります。
  そのようなケースでは、会員 ID (ログイン時に使わないシステム的な ID) をセキュリティルールをクリアしたうえで設定するのがいいかと思います。

• コンテンツ情報を含めたい場合、PageUrl もカスタムディメンションに設定する
  このイベント設定だと、PageUrl の確認が若干面倒です。 使用用途によっては、PageUrl もカスタムディメンションに入れておいたほうがいいかもしれません。

参考

以下、参考にした記事になります。

• こんなときどうする？Intro.js設定・Tips集 - Qiita
• dataLayerへ値を渡す記述を.pushで統一する方法
• Firing javascript function between intro.js steps - Stack Overflow

以上です。