1. HOME
  2. メディア
  3. デジタルマーケティング
  4. Microsoft Clarityを自社のWebサイトに設定する方法を紹介します
デジタルマーケティング 2021.11.27

Microsoft Clarityを自社のWebサイトに設定する方法を紹介します


Microsoft Clarityを自社のWebサイトに設定する方法をご紹介します。

このツールを導入することで、無料で利用できるヒートマップツールで、ウェブサイトに訪れたユーザの行動をヒートマップ形式で視覚的に確認することができます。

それによって、ユーザーがWebサイト上のどのポイントで離脱しているかを視覚的に確認することができます。

例えば、離脱しているポイントが特定の箇所に集中している場合、そこに何かしらの問題があると想定し、Webサイトを修正することができます。

このツールは約2年前にローンチされた、比較的新しいツールですが、世界のトップ機関が信頼できる分析ルーツとして既に使用しています。

clarity.microsoft.comの調査によると、実際に様々な機関や組織がツールを使用していて、例えば、世界保健機関、シネマーク・シアターズ、スティーブマデン、IKEA、PizzaHut、Forbesなどが、既にこのプラットフォームを導入しています。

Microsoft Clarityの設定の前にその概要について知る

Microsoft ClarityはGoogleAnalitycsのようなアクセス解析ツールではありません。

アクセス数などの数値的な解析ではなく、ユーザのウェブサイト上での振る舞いを把握できます。

具体的には、あなたのウェブサイト上で訪問したユーザがどのように行動しているかをヒートマップ形式で確認することができるのです。

前回投稿した記事「Microsoft Clarity | 無料で使えるヒートマップツールが凄すぎる!」ではMicrosoft Clarityの機能、そして活用することで生じるベネフィットについて紹介しています。

Microsoft Clarityの概要が分かったところで、今回の記事ではそのセットアップ方法をご紹介します。

Microsoft Clarityの設定手順-サインアップする

はじめに、Microsoft ClarityのWebサイトに移動して下さい。

早速、サインアップしてみましょう。

CTAからサインアップする

サインアップ用のCTAボタンが2か所設置されていますので好きな方をクリックします。

MicrosoftClarityの設定で、はじめにトップ画面からサインアップする
Sign upをクリックして設定を開始する

OAuth認証でサインアップ

サインアップをクリックすると、新しいサインアップウインドウが表示されます。サインアップをするためには3つの方法があります。

一つ目は、Microsoftアカウント、二つ目は、Facebookアカウント、三つ目は、Googleアカウントを使ったOAuth認証です。

MicrosoftClarityの設定では、サインアップはOAuth認証が可能です
OAuth認証が可能なのでいずれかのアカウントがあればOKです

このいずれかのアカウントがあれば、わざわざアカウントを発行する必要はありません。

アカウント情報の確認

先ほどサインアップしたアカウント情報の確認をします。

今回はGoogleアカウントでのサインアップを選択しましたので、メールアドレスの本人確認をします。

メールアドレスの本人確認を行ないます
メールアドレスの本人確認を行ないます

以上でMicrosoft Clarityのサインアップは完了です。

実際にWebサイトにトラッキングコードを追加していきます。

Microsoft Clarityの設定 – プロジェクトを追加する

サインアップが完了したら、Microsoft Clarityのプロジェクトを追加します。

ドメインを追加してカテゴリーを選択する

OAuth認証によってアカウントの確認が終わったらWebサイトにトラッキングコードを追加していきましょう。

アカウントはプロジェクトとして認識され、そのプロジェクトはWebサイトまたはドメインに対して無制限に追加できます。

プロジェクトの作成を行ないます
プロジェクトを作成する

プロジェクト追加画面には、「+Add new project」と書かれたボタンが二か所あります。

好きなボタンをクリックしましょう。

すると、新たにポップアップウインドウが表示されますので以下の情報を入力します。

  • Name
  • Website
  • Site category

反映が終わったら「Create」をクリックします。

ウェブサイトのカテゴリーを選択しましょう
カテゴリ選択のオプションでは、ウェブサイトのカテゴリーを選択します

カテゴリ選択オプションのフィールドでは、あなたのWebサイトのカテゴリーを選択します。

Microsoft Clarityでは、センシティブな情報を公開しているサイトにはこのツールの使用を許可していません

センシティブな情報とはヘルスケア、金融サービス、政治や行政に関係するサイトです。

Microsoft Clarityの設定 – Webサイトにトラッキングコードを追加する

Webサイトにトラッキングコードを追加する
Microsoft Clarityのトラッキングコードを追加する

最後にMicrosoft Clarityのトラッキングコードを自社のWebサイトに追加していきます。

トラッキングコード取得準備

プロジェクトのセットアップが完了したら、プロジェクトウィンドウが表示されます。

Microsoft Clarityの設定でトラッキングコードの追加をする
プロジェクトウィンドウが表示されたら「Setting」をクリックして「Setup」をクリックする

まず、プロジェクトウィンドウの右上にある「Settings」のボタンをクリックします。

次に、左側にある「Setup」ボタンを選択します。

Googleタグマネージャー用のトラッキングコードを取得して貼り付ける

表示されたウインドウの上部に「recommends」と記載された”リボン”が表示されているのを確認できますでしょうか。

ここで発行されるトラッキングコードがGoogleタグマネージャーで使用できるコードです。

なお、トラッキングコードを加える際には、ウェブサイトの<head>タグ内に設置するようにします。

最後に、トラッキングコードが正しく設定されているかどうかを、Microsoft Clarityのレコードやヒートマップのチェックで確認してみて下さい。

Microsoft Clarity無料で利用できる高品質のヒートマップツール

Microsoft Clarityの設定方法についてご紹介しました。

今回の記事をお読みいただき、問題なく設定は終わりましたでしょうか。

無事、設定が完了することで高品質なヒートマップ解析をすることができます。

Webサイトに訪れたユーザー離脱ポイントなどが把握でき、サイトの改善などにもつながりますので、この機会に設定してみて下さい。


この記事を書いた人

代表取締役
櫻井 邦則

1982年生まれ。 趣味はブログとゴルフ。 ブログでは検索スコアを上げるために、ゴルフではスコアを下げるために日々奮闘しています。

この人が書いた記事をもっと読む