Matomoでサイドバーのどの目次をクリックしたかと、クリックした場所も記録する方法をお伝えします。
記事冒頭も目次とサイドバーの目次の違い
当ブログのように、記事冒頭にもサイドバーにも目次を設置するブログは多いです。サイドバーの目次はスクロールしてもついてきてくれて、記事の全体像と今読んでいる位置を読者にガイドします。
以下の記事で、Matomoで記事冒頭の目次のクリックを記録する設定方法をお伝えしました。
これと同じ方法で、サイドバーの目次のクリックも記録できます。ただ、サイドバーの場合、記事冒頭と違って、記事のどの部分にいる時にクリックしたかも重要です。記事の中盤なのか、後半なのかでは意味が変わってきます。以下はスクロール位置をパーセントで表示したものです。0は記事の最上部、100が記事の最下部ということです。
このように、どこでクリックしたかのスクロール位置を記録する方法をお伝えします。
基本的に記事冒頭の目次の場合とほとんど同じなので、まず上記の記事をご覧ください。違いは、トリガー、タグを作る部分と、変数という機能を使う点です。
トリガーを作る
ここでのCSSセレクターはご自身のサイトのものを使ってください。
| Name | Clicked on STOC |
|---|---|
| Description (optional) | Clicked on STOC |
| Only trigger when (optional) | Click Element > Mathc the CSS Selector > .toc_widget_list a |
変数を作る
タグマネージャーの画面の左のカラムから、
「変数」＞「JavaScript変数」をクリックしたら
Nameには以下のように入力し
| Name | Vertical Scroll Ratio |
|---|
コードの部分には以下を入力して保存します。
|
1 2 3 4 5 6 7 |
function () { const scrollY = window.scrollY; const scrollHeight = document.documentElement.scrollHeight; const clientHeight = document.documentElement.clientHeight; const scrollRatio = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100); return scrollRatio; } |
変数という機能が非常に柔軟に使えるのが興味深いです。ソースコードを書けるのですが、それをサイト側ではなく、Matomo側に入力できるというのがタグマネージャーの良さです。
タグを作る
記事冒頭の場合と大きく違うのは、Event Valueに「{{Vertical Scroll Ratio}}」とすることです。これは先程作成した変数です。
| Name | Clicked on STOC |
|---|---|
| Description (optional) | Clicked on STOC |
| Configure what this tag should do | Matomo の設定 |
| Tracking Type | Event |
| Event Category | STOC |
| Event Action | clicked |
|
|
{{ClickText}} |
| Event Value | {{Vertical Scroll Ratio}} |
| Execute this tag when any of these triggers are triggered. |
Clicked on STOC |
さいごに
これでサイドバーをクリックした時のスクロール位置を表示できるようになります。
ちなみに、変数という機能を使えば、スクロール位置だけではなく、サイドバーの目次をクリックした時の、読んでいるセクションの見出しを記録することもできそうです。今後やってみようと思います。
