Google Tag Manager と Amplitude で ページのスクロールイベントを記録する

スクロールイベントの記録方法について、質問を頂いたのですが、確かに制御方法が少し難しそうでしたので、実際に試してみました。
実施したことを記載します。

Google Tag Manager と Google Analytics を使ったスクロールイベントの記録方法

Google Tag Manager と Google Analytics を使ったスクロールイベントの記録方法は以下の記事が参考になりました。
* Googleアナリティクスで読了率を知りたい-Googleタグマネージャでスクロール測定する方法 | CroJa（クロジャ） - Web施策に役立つ情報配信サイト

Amplitude で スクロールイベントを記録する場合は、Google Tag Manager のトリガーはそのまま使用でき、Amplitude でイベントの記録を行うHTMLカスタムタグを作成する必要があります。

Amplitude のスクロールインベント送付タグ

以下の内容でタグを作成しました。

• HTML
  Eventのプロパティに、url と ページタイトル、スクロール率を設定しました。
  {{Page URL}} と、{{Scroll Depth Threshold}} は Google Tag Manager の組み込み変数で、{{pageTitle}} はカスタムJavaScript変数です。
  

  <script>
  (function() {
      var eventProperties = {
           url : {{Page URL}},
           title :{{pageTitle}},
           scrollPercentage: {{Scroll Depth Threshold}}
      };
      amplitude.getInstance().logEvent('pageScroll', eventProperties);
  })();
  </script>
  

• タグの呼び出しオプションと、タグの順序づけ
  以下の通り、タグの呼び出しオプションと、タグの順序づけを設定しました。
  

  • タグの呼び出しオプション
    1回のイベントにつき1度の呼び出しとしました。
  • 発効前に配信するタグ
    Google Tag Manager で Amplitude の設定を行う | Monotalk で作成した初期化タグを、発効前に配信するタグとして設定します。

• トリガーの設定
  スクロール距離をトリガーとして設定しています。
  

スクロール距離トリガーの内容

以下の内容でスクロール距離トリガーを設定しました。
全てのページで、20%、40%、60%、80%、100%でタグを発火させるようにしました。

補足

以下の補足説明になります。

ページタイトルを取得するカスタムJavaScript変数

以下のようなカスタムJavaScript でページタイトルを取得しています。

function() {
    var title = document.title;
   return title;
}

Amplitude の初期化タグの呼び出しオプションについて

Amplitude の初期化タグは、複数の Amplitude のイベント送付タグの 発効前に配信するタグとして設定しています。
初期化タグは一度だけ呼び出せば良いので、タグの呼び出しオプションとして、1ページに<wbr>つき1度を設定しています。

上記の設定で、Amplitude側にスクロールイベントが記録されるようになりました。
現在、データが溜まってる途中であまりいい感じにグラフが描画できません。
もう少しデータが溜まったら、グラフ操作を試してみようかと思います。
以上です。