Matomoで読者がどこでいつどのようにあなたのサイトを離脱したかを記録するのは重要です。デフォルトで外部リンクをクリックした場合は記録できますが、タブを閉じてしまったり、URLを入力したりお気に入りから別サイトへの移動は、通常記録されません。タグマネージャーを使ってそれらを記録する方法をお伝えします。
もくじ
ページをタブに残したままの離脱の場合
次の記事でご説明したように、あなたのサイトのページをタブに残したまま、別のタブを開いたり、ブラウザ以外のアプリに移動した場合は、Windw Leaveというトリガーを使って簡単に設定できます。
しかし、上述したようにこれだと、タブを閉じてしまったり、URLを入力したりお気に入りから別サイトへの移動した場合は記録されません。
unloadはきちんと動かないのでpagehideを使う
実は、このためのトリガーとしてMatomoに用意されているイベントがWindow Unloadです。ただ、一度試してみたのですが、iOSのブラウザではきちんと動かないようでした。
PC、Mac、Androidではある程度動いているようでしたが、やはりiOSをトラッキングできないのは許容できません。
iOSだとunloadが機能しないというので、pagehideを使おうというのがネット上の定説になっています。
Appleの公式ドキュメントでも、
unload
Deprecated, use pagehide instead.
また、GoogleのChromeの関係者も、unloadは非推奨なのでpagehideやvisibilitychangeを使おうと言っています。
beforeunloadも使えるのかと思ったのですが、上の記事によると、バックグラウンドでタブが閉じられた時は発動しないということなので使えません。
なので、私はpagehideを使うことにしました。もしかしたら、visibilitychangeでも同じことができたり、もっと良いのかもしれませんが、こちらは試していません。visibilitychangeはstateと言う概念があるようなので、コードが複雑になる気がしたからです。
pagehideを使って、以下のように画面を閉じたタイミングが記録できるようになります。leaveの時と同じように、どこで離脱したかのスクロール位置も記録しています。
この設定方法をお伝えします。Matomoのタグマネージャーの基本的な使い方は以下の記事で説明しており、これをご理解頂いている前提でご説明します。
トリガーを作る
leaveやunloadと違って、pagehideはmatomoにトリガーのタイプとして存在しません。なので、Custom Eventを使います。
左のカラムの「Triggers」＞「CREATE NEW TRIGGER」を押したら、「Custom Event」を選択します。値は以下を入力します。
| Name | Window Pagehide |
|---|---|
|
description
|
Window Pagehide |
|
Event Name
|
window-pagehide |
Nameやdescriptionは自分が分かれば何でもいいのですが、ポイントはEvent Nameです。こちらは、あなたのサイトに埋め込むコードで使います。なので、半角英数を使いスペースを使わない文字列にしましょう。
サイトにコードを埋め込む
以下はあなたのサイトに埋め込む通常のMatomoのタグマネージャーのコードに見えますが、9行目が違います。この9行目を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Matomo Tag Manager --> <script> var _mtm = window._mtm = window._mtm || []; _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'}); (function() { var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src='https://xxxxxxxxxxx.com/matomo/js/container_sdfsf3.js'; s.parentNode.insertBefore(g,s); })(); window.onpagehide = event => { _mtm.push({'event':'window-pagehide'})}; </script> <!-- End Matomo Tag Manager --> |
window-pagehide という先程設定したEvent Nameが使われていることにご注目ください。
この方法だと、この設定をするサイトごとにこのコードの修正を行う必要があり煩雑です。以下で説明されているプラグインを作成した場合、サイト側のコードは触らずに、Matomoの管理画面でできるかもしれません。
しかし、まだ試せておりません。プラグインを作るには、コマンドラインが使える環境にMatomoがインストールされている必要がありそうなためです。
変数を作る
スクロール位置を取得するための変数を作ります。これは以下の記事の中で作っているので、まだ作っていない方はこれをそのまま行なってください。「Vertical Scroll Ratio」という名前で、変数ができます。
タグを作る
タグの値としては私は以下にしています。
| Name | Window Pagehide |
|---|---|
| Description (optional) | Window Pagehide |
| Configure what this tag should do | Matomo の設定 |
| Tracking Type | Event |
| Event Category | Window |
| Event Action | Pagehide |
|
|
postion : {{Vertical Scroll Ratio}} % |
| Execute this tag when any of these triggers are triggered. |
Window Pagehide |
ここはLeaveの時と考え方は同じです。
リンククリック時も発動してしまう
ただ、内部リンクや外部リンクをクリックした場合は時間は明らかなので不要ですが、pagehideは発動してしまいます。ちょっと情報量が多くなりすぎますが、とはいえ、どのスクロール位置からクリックしたかわかるようになるので無駄ではないですが。
閉じる時の挙動によって様々な表示のされ方
以下のようにLeaveとPagehideがほとんど同時に発生していることがあります。
これはよくわからないのですが、もしかしたら、別タブを表示してから、あなたのページを開いていたタブを閉じるとこのようになるのかもしれません。
このように、タブを閉じる時の操作は人によって微妙に違うので、色々な表示になりますが、結果的にタブは閉じられたり、別のサイトにうつったというのは確実なので、そこまで気にしなくていいと考えています。
さいごに
デフォルトの設定だと記録できなかった、タブを閉じたり、URL入力やお気に入りからの離脱のタイミングをきちんと記録できるようになりました。Leaveの設定と併せて、ぜひサイトの改善にご活用ください。
