Microsoft ClarityのCustom Tag（カスタムタグ）を利用して、コンバージョンのレコーディングを抽出する方法について解説していきたいと思います。
Custom Tagを利用することで
- サンクスページへ遷移したユーザーのレコーディングのみをフィルタリングする
- 導入事例ページを見たユーザーをフィルタし、その後の動線を確認する
など、イベントベースでレコーディングをフィルタリングすることができ、非常に便利です。
この記事では、
について解説します。
なお、
- GTMの利用経験がある方
- Microsoft Clarityの導入経験がある方
を想定して書いています。もし一人で読んでいてもわからない場合は、同僚のエンジニアの方や、技術に関して知見のある方にシェアして実装を進めてみてください。
Custom Tag（カスタムタグ）とは
Microsoft Clarityには、Custom Tag(カスタムタグ）という機能があります。
これは、Clarityのレコードに対して、任意の値を埋め込み、その値を元にレコーディングをフィルタリングできる機能となります。
Custom Tagでできること
Custom Tagを利用することで、「特定のイベントが実行されたユーザー行動」のみを抽出することができます。
例えば、アフィリエイトリンクで任意のURLがクリックされた場合、そのクリックされたURLを指定することで、アフィリエイトリンクがクリックされたレコードのみを抽出することができるようになります。
Microsoft Clarityのレコーディングとは
Microsoft Clarityは、いくつか機能があるのですが、その中にレコーディングという機能があります。これは実際にページに流入し、ページを回遊する映像が見れる機能です。
事前準備：Microsoft ClarityとGoogle Tag Managerをメディアに導入する。
事前にGoogle Tag ManagerやMicrosoft Clarityのタグの導入をされていない場合は、先に導入を進めてください。
Clarityから、コンバージョンのレコーディングを取得する場合、
- Google Tag Manager
- Clarity
を連携することで取得することができます。
Google Tag Managerには、
- トリガー: こういう条件の時にイベントを発火するという定義
- タグ：発火するタグの中身
の2つがあります。 トリガーを任意のコンバージョン発火タイミングに指定して、Clarity側で特殊なタグを使うことによってそのパラメータを指定することができるようになっています。
ClarityのCustomタグで利用するコンバージョンのトリガーについて
コンバージョンの発火タイミングは、運営しているプロダクト、メディアごとに変わるとお思いますが、
- 事業者側でリード獲得をコンバージョンの成果地点においているパターン
- アフィリエイトサイトでクリックイベントを計測しているパターン
に分けて解説していきます。
事業者側で成果地点においているパターン
基本的には、リード獲得のサンクスページに指定してあげるとよいでしょう。Google Tag Managerを利用する場合は、トリガーを
- Page Path
- 完全一致, もしくは部分一致を指定
- サンクスページのURL
などを指定します。（基本的にGTMが使えている企業様であれば、すでに設定されているかと思います）
アフィリエイトメディアでクリックイベントを成果地点においているパターン
ASPから発行されるアフィリエイトリンクを使う場合です。
- 集計用にリダイレクトリンクを貼っている場合
- ASPのアフィリエイトリンクを直接貼っている場合
によってやり方が変わります。
集計用にリダイレクトリンクを貼っている場合。例えば、特定のページをコンバージョンのページとして指定し、そのページからメタリフレッシュ を指定している場合、もしくは301リダイレクトでアフィリエイトリンクを統一している場合、そのアフィリエイトリンクの命名ルールに沿った条件で指定してあげれば問題ありません。
例えば, https://media-analytics.jp/promotion/example-tensyoku-agent-linkのように、アフィリエイトリンクの最後が-link で命名規則が統一されているようなアフィリエイトリンクを設定し、そこからメタリフレッシュ、もしくは301リダイレクトで任意のアフィリエイトリンクを遷移させている場合は、GTMのトリガーは
- Page Path
- 部分一致を指定
- -link
で指定してあげればよいでしょう。
アフィリエイトリンクを直接貼っている場合, 複数のアフィリエイトリンクで、部分一致で指定してあげる必要があります。例えば、以下のようなアフィリエイトリンクを扱っている場合、
- https://px.a8.net/
- https://felmat.net/
- https://accesstrade.com/
- https://af.moshimo.com/
- https://link-ag.net
- https://ad.presco.asia
- https://rentracks.jp
Google Tag Managerは、「複数のURLのうちいずれかがクリックされた時」というOR条件が指定できません。そのため、
- トリガーを複数作成する
- 正規表現で複数URLに該当する時というトリガーを作成する
のうち、どれかを指定する必要が出てくるのです。
ただ、これは面倒くさいです。なので、後者の「正規表現で複数URLに該当する時というトリガーを作成する」という方法がやりやすいのではないかと思います。
例えば、以下のようなアフィリエイトリンクが含まれたURLかどうか判定する正規表現を表記する場合、
- https://px.a8.net/
- https://felmat.net/
- https://accesstrade.com/
- https://af.moshimo.com/
- https://link-ag.net
- https://ad.presco.asia
- https://rentracks.jp
正規表現としては、
\bhttps?://[^\s]*(h\.accesstrade\.net|t\.felmat\.net|af\.moshimo\.com/af/c/click|px\.a8\.net|cl\.link-ag\.net|ad\.presco\.asia|rentracks\.jp)[^\s]*
となります。この正規表現をコピペして、トリガーで以下のように指定します。
- Click URL
- 正規表現に一致
- {ここに正規表現を入れる}
こんな感じでOKです。
※正規表現はめちゃくちゃ書くのが面倒くさいのですが、ChatGPTを利用すると、プログラマーに依頼せずとも自分で実装できます。
「ad.presco.asiaとmoshimo.comが含まれるURLを抽出する正規表現を教えて」みたいなプロンプトを組めばよしなに正規表現書いてくれるので、もし追加したいリンクがあればプロンプトを修正して指示してあげればよいでしょう。
Microsoft Clarityでタグを設定する
次にMicrosoft ClarityでCustom Tagを仕込みます。Custom TagのAPIを確認すると、以下のようなJavaScriptを指定することで、Clarity上で任意のイベントをフィルターできるようになります。
window.clarity ("set", "key", "value")
keyには、カスタムタグの名前を、valueにはカスタムタグの値を入れます。
この仕様にそって、実装を進めます。
わかりづらいと思うので、ユースケースとして入れてみましょう。
- 事業会社でサンクスページに到達したユーザーを指定したい場合
- アフィリエイトリンククリックしたユーザーのアフィリエイトURLを指定したい場合
事業会社でサンクスページに到達したユーザーを指定したい
例えば、新規登録後のサンクスページでコンバージョンイベントを指定しているとします。サーバーサイド側でユーザーIDを指定できる場合は、
window.clarity ("set", "ThanksPageReachedUserId", "ここに任意のユーザーID")
を指定してあげます。こうすることで、サンクスページに到達したユーザーIDごとにレコーディングをフィルタすることができるようになります。
ユーザーIDがサーバーサイド側でしか取れない場合は、サーバーサイドタグなどを経由して、組み込み変数経由で取得できるかと思います。
アフィリエイトリンククリックしたユーザーのアフィリエイトリンクを指定したい
例えば、任意のアフィリエイトリンクをクリックしたユーザーのレコーディングを絞りたい場合は、以下のようにフィルタすることができます。
window.clarity ("set", "AffiliateLinkClick", "{{Click URL}}")
Click URL は、Google Tag Managerでデフォルトで指定できる組み込み変数です。組み込み変数は、もともと定義されている値を動的に代入することができる機能です。
このコードを埋め込むと、例えばページAでアフィリエイトリンクAを押した時、そのアフィリエイトリンクのURLをAffiliateLinkClick の中の値として入れてくれます。
例えば、ページAの中で、https://px.a8.net/?code=123 というURLをクリックしたら、
Click URL は https://px.a8.net/?code=123 になります。
Custom Tagを利用したフィルターの方法
それでは、タグとトリガーの実装が完了したら、GTMでイベントが発火するか確認してみいましょう。
まず、レコーディングをクリックしてください。次に、フィルターをクリックします。
フィルターから、カスタムタグセクションへ移動してください。GTM上のコードが動いていると、すでに発火しているカスタムタグのデータの候補が表示されます。
そこから、カスタムタグで指定した条件を指定して検索すると、該当のレコーディングが表示されます。