アフィリエイト

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

記事内に商品プロモーションを含む場合があります

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

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

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

特定のボタンブロックのクリック数をMatomoのクリックイベント計測を使って解析する方法(例)

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

ここから設定方法をご説明していきます。

タグマネージャーを有効化する

まずタグマネージャーの画面を開こうとすると、正確な文言は忘れたのですが「タグマネージャーを有効化しますか?」のように問いかけられます。

これを有効化します。

有効化したら、後戻りできないのかや、大幅に使い方が変わったら困る、のような恐怖心があったのですが、結果的には全然問題ありませんでした。

有効化後もこれまで使っていた通りの使い方もできますし、大幅に画面の見方が変わると言うこともありません。もしタグマネージャーが気に入らなければ、これまで通りの使い方をすることも可能です。なので、今となってはなぜここまでしっかり問いかけてくるのかちょっと不思議です。

トリガーを作る

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

CSSセレクタにマッチするDOM要素がクリックされたときにタグをトリガーするには?

このページの場合は、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
{{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.」ですが、こちらは、先ほど作成したトリガーの名前を選択します。

コードをインストールする

以前のMatomoのスニペットに替えて、タグマネージャー用のコードをサイトにインストールする必要があります。

タグマネージャーの画面の、左側のカラムの「Install Code」をクリックすると表示されるコードを対象のサイトにインストールします。

基本的にこれは一度行えばこれから行う必要はありません。

ちなみに、以前のMatomoのコードからこちらのコードに替えても、以前のページビューや外部リンククリックなどの通常の項目はきちんと計測してくれています。

公開する

タグやトリガーの設定を行い、コードをインストールしても、設定は反映されていません。

なので、左側のカラムの「Publish」を押して、公開する必要があります。バージョン番号などを付与することができます。

ちなみに、この公開は、タグやトリガーの設定変更の反映をする度に行う必要があります。なので、設定だけ変更して、公開を行わないと、きちんと計測できないのでご注意ください。

さいごに

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

そして、一つお願いしたいことがあります。

もしこの記事がお役に立てたのなら、下のボタンからSNSでシェアか、あなたのブログでご紹介頂けないでしょうか? 泣いて喜びます!