Matomoでブログの読者がどの目次をクリックしたかを記録する

ブログの読者がどの目次をクリックしたかが分かれば便利だと思いませんか？記事全体の中でどのコンテンツが人気かが一目瞭然になります。Matomoなら比較的簡単にその設定ができます。

タグマネージャーを使えば難しいコードは必要ない

通常、Matomoで何かの画面要素のクリックのイベントを計測しようと思ったら、次の記事にあるようなJavaScriptのコードを書く必要があります。

しかし、比較的最近Matomoに導入されたタグマネージャーという機能を使えば、コードを書く必要はなく、Matomoの画面操作だけで読者のクリックイベントを記録することができます。ビジットログには以下のように表示されます。

ここから設定方法をご説明していきますが、以下でMatomoタグマネージャーの基本的な使い方のご説明をしています。これをご理解頂いた前提で、以降はお読み下さい。

以降は基本的には以下のページのやり方と同じです。

このページの場合は、h1タグをクリックされたケースですが、基本的にこれを目次のそれぞれの要素を指定するようにCSSセレクターを変えるだけです。

以下は私のサイトの場合の値です。Matomoの項目名はあえて英語版にしました。日本語訳のクオリティが低かったので。

Name	Clicked on TOC
Description (optional)	Clicked on TOC
Only trigger when (optional)	Click Element > Mathc the CSS Selector > #toc_container a

ポイントは「#toc_container a」というところです。これをあなたのサイトの目次の要素のCSSセレクターを調べてみてください。同じ要素でもCSSセレクターの書き方は色々なので、できるだけシンプルな書き方がおすすめです。

次にタグを作ります。以下は私のサイトの場合の値です。

Name	Clicked on TOC
Description (optional)	Clicked on TOC
Configure what this tag should do	Matomo の設定
Tracking Type	Event
Event Category	TOC
Event Action	clicked
Event Name	{{ClickText}}
Execute this tag when any of these triggers are triggered.	Clicked on TOC

空欄にした項目は省いています。

「Tracking Type」から「Event Name」は、値をどのように表示するかに関わります。ここは色々変えてみて、ご自身が見やすいものにするのがいいでしょう。

ちなみに、「Event Name」の「{{ClickText}}」はクリックされた要素のテキストを表示してくれるという便利なものです。このまま入力してもいいですし、欄の右側にある「<>」と言うボタンを押せば、選択できます。

最後に一番大事なのが、「Execute this tag when any of these triggers are triggered.」ですが、こちらは、先ほど作成したトリガーの名前を選択します。

これで読者がクリックした目次がわかるようになります。SEOやサイト改善に役立ててくださいね。

ちなみに、本記事は記事冒頭の目次のクリックを記録するものでしたが、最近はサイドバーに追尾してくる目次もあります。その場合、クリックした時点のスクロール位置も重要になってきます。なので、本記事とは少し違った設定を行いますので、以下で詳しくご説明してます。