前回、Microsoft Clarityがどんなツールかをお伝えしました。
今回は実際にECサイトで使い始める手順を解説します。
GA4の設定よりもシンプルです。慣れている方なら5分、初めての方でも10分あれば完了します。
ステップ1：Clarityのアカウントを作る
まず、Clarityの公式サイトにアクセスします。
サインアップをクリック。
サインアップにはMicrosoftアカウント、Googleアカウント、Facebookアカウントのいずれかが使えます。
Googleアカウントを持っている方は、それでサインアップするのが一番早いです。GA4と同じGoogleアカウントを使うと、後でGA4連携するときに便利です。
ステップ2：新しいプロジェクトを作成する
サインアップすると、新しいプロジェクトを追加という画面になります。
プロジェクト名はストア名を入力。サイトURLはストアのURLを入力。
新しいプロジェクトを追加ボタンをクリック。
ステップ3：タグをサイトに設置する
プロジェクトを作成すると、タグの設置方法を選ぶ画面になります。
ここで設置方法がShopifyとBASEで少し異なります。
Shopifyの場合
Shopifyには、Clarityのタグを簡単に追加する方法があります。
Shopifyの管理画面でオンラインストア→テーマ→アクション→コードを編集を開きます。
左のファイル一覧からテーマファイルを探して開きます。
ヘッダー終了タグを探してください（ファイルの上の方にあります）。
その直前に、Clarityで表示されたタグをそのまま貼り付けます。
保存をクリック。これでShopifyへの設置は完了です。
もっと簡単な方法として、Shopify App Storeで検索すると、公式Appが出てきます。このAppをインストールすれば、コードの編集なしで設置できます。
BASEの場合
BASEでは、管理画面のAppsから対応する方法があります。
BASEのAppsでHTML編集をインストールしてください。
HTML編集Appを開き、ヘッダー終了タグの直前にClarityのタグを貼り付けます。
保存すれば設置完了です。
HTML編集Appを使ったことがない方は、最初は少し戸惑うかもしれません。ポイントは、ヘッダー終了タグを探してその直前に貼ること。他の部分は触らないでください。
ステップ4：GA4と連携する（推奨）
ClarityはGA4と連携することで、さらに便利になります。
Clarityの管理画面で設定→セットアップ→Google Analytics連携を開きます。
接続をクリックすると、Googleアカウントの認証画面が出ます。
GA4で使っているのと同じGoogleアカウントでログインし、該当するGA4プロパティを選択。
これで、Clarityのダッシュボード上にGA4のデータも表示されるようになります。
ステップ5：データが溜まるのを待つ
設置が完了したら、あとはデータが溜まるのを待ちます。
ClarityはGA4よりもデータが表示されるのが早いです。設置して数時間後には、最初のセッション録画が記録され始めます。
ただし、ヒートマップが意味のある形で見えるようになるには、ある程度のアクセスが必要です。
目安として、1つのページにつき100セッションくらい溜まると、ヒートマップの傾向がはっきり見えるようになります。
まとめ
Clarityのスタート手順は4ステップです。
1 Clarityアカウントを作る
2 プロジェクトを作成する
3 タグをサイトに設置する
4 GA4と連携する（推奨）
GA4とClarityの両方が動き始めたら、数字で全体を把握し、映像で詳細を確認するという体制が整います。
次回からは、溜まったClarityのデータをどう見るかを解説していきます。
