【無料】Shopifyにヒートマップツール「Clarity」を導入する方法

「RuffRuff 予約販売」は2023年2月末に提供開始予定のShopifyアプリです。
無料から利用でき、ノーコード＆３ステップで簡単に導入できます。
無制限の予約商品の登録と予約注文のプランもご用意します。

引用元:https://tsun.ec/blogs/articles/19

本記事では、Clarity（クラリティ）についての基本情報やShopifyにClarityを導入する方法を解説します。

Clairtyの導入には、Googleタグマネージャー（以下、タグマネージャー）を利用しますので、まだタグマネージャーの設定が済んでいない方は以下の記事をご参考にしてください

GTM（Googleタグマネージャー）とは？｜ShopifyにGTMを設定する方法

Clarity（クラリティ）とは？

Microsoft（マイクロソフト）が提供している無料のヒートマップ解析・行動分析ツールです。

ShopifyサイトにClarityを導入することで、「訪問者がなぜ離脱してるのか？」「訪問者がどこで迷っているのか？」「訪問者がどこに熟読している（興味をもっている）のか？」などを把握することができます。

Clarityを活用しサイト内改善やコンテンツ改善を続け得ることで、利便性の向上や注文率の向上につなげることもできます。

Microsft Clarity

Clarityの主な機能

• セッション分析
• ヒートマップ分析（タップ、スクロール、領域）
• レコーディング分析

百聞は一見にしかずなので、まずはヒートマップ分析（タップ、スクロール、領域）でどんなデータが見れるのか下記のサンプル動画でご確認ください。

Clarityを選ぶ理由（メリット）

• 完全無料で使える
• 登録できるサイト数が無制限
• 1サイトあたりのトラフィック制限もなし 

Clarityの利用ケースは？

• 何が効果的で何が効果的でないかについて、データに基づいた意思決定を行う。
• どのコンテンツが最も効果的で、ページ上のどこに配置すべきかをテストする。
• ウェブページのわかりにくい要素を把握する。
• ユーザーの行動を把握し、必要なコンテンツをページに追加する。
• 新しいアイデアをテストし、ウェブページに掲載します。
• ユーザーのクリック数を調査し、必要事項を精査する。 

Microsoft Clarity ドキュメント

Clarityの導入方法

Clairtyの導入には、Googleタグマネージャー（以下、タグマネージャー）を利用しますので、まだタグマネージャーの設定が済んでいない方は以下の記事をご参考にしてください

GTM（Googleタグマネージャー）とは？｜ShopifyにGTMを設定する方法

 

やることは大きく2ステップ

① Clarityでトラッキングコード（タグ）を作成

② タグマネージャーにトラッキングコード（タグ）を設定

 その他、Googleアナリティクス（以下、アナリティクス）との連携もこのタイミングで行うことをおすすめします

Clarityとアナリティクスのダッシュボードとリンクさせることができます。

もっと詳しく知りたいセッションを特定したら、GA ダッシュボードにジャンプして、ユーザーが困っているポイントを深堀りして理解することが可能です。

Microsoft Clarity ドキュメント

もし、Google アナリティクスの設定が完了していない方は、以下の記事をご参考にしてください。

ShopifyにGoogle Analytics 4(GA4)を設定する方法

① Clarityでトラッキングコード（タグ）を作成

1. ClarityのサイトTOPから「Sign up」をクリック

2. 「Sign in to Google」をクリック

3. Googleアカウントで認証

4. project情報を入力

・Name

　※ サイト名などわかりやすい名称を記入してください

・Website URL

　※ Clarityで行動分析したいサイトのURLを記入してください

・Site category

　※ Shopifyサイトの場合は、コマースを選択しましょう

5. Setupに記載されている「tracking code」をコピー

・Projectを作成したあとは、レフトメニューの「Setup」をクリック

・Setup画面の「tracking code」をコピー

② タグマネージャーにトラッキングコード（タグ）を設定 

6. タグマネージャーにログインし、「新しいタグを追加」をクリック

7. タグの設定

・タグ名を入力

　※ ここではClarityと入力してます

・タグの設定をクリック

8. タグタイプから「カスタムHTML」を選択

9. HTMLの中に「tracking code」をペースト

・HTMLの中に「tracking code」をペースト

・ペースト後に、トリガーをクリック

10. トリガーの中の「All Pages」を選択

11. 「保存」をクリック

タグの設定情報を確認し、問題なければ「保存」をクリック

12. プレビューモードでタグがちゃんと設定されてるか確認

・ダッシュボードの「プレビュー」をクリック

・「Website URL」にプレビューで表示したいページのURLを記入

・「Connect」をクリック

13. 設定したタグが正常に動いてるか確認

今回の場合は、「Tags Fired」に「Clairty」タグは記載れていれば正常に動いています。

（おまけ） Clarityとアナリティクスを連携方法

14. Clairtyとアナリティクスの連携

タグマネージャーの設定が完了したら、ついでにアナリティクスとの連携も進めておきましょう。

ClairtyのSetup画面に表示されているアナリティクスとの連携ボタンをクリックし、Googleアカウントの認証を進めます。

15. Clairtyがアナリティクスの情報にアクセスするのを許可

16. Clairtyと連携するサイト（アナリティクスで管理してるサイト）を選択

17. アナリティクスと連携されているか確認

今回の場合は、「Connectedto: サイトURL」が表示されていれば連携されています。

18. Clairtyが導入できるとこのようにダッシュボードが表示されます

※タグマネージャー設定後、Clairtyへの反映まで数時間ほどかかることもあります。

よくある質問

Clarityのデータを共有することは可能ですか？

はい。可能です。

ヒートマップのデータもレコーディングのデータも共有可能で、共有範囲は「プロジェクトメンバー（閲覧権限を所有している人）」か「誰でも（閲覧権限を所有していない人）」からを選べ、共有方法としては「共有リンクの発行」か「メールでの共有」を選ぶことができます。

※ 誰でも（閲覧権限を所有していない人）への共有リンクは有効期限があり、1～30日まで設定できます。

（リンクで共有する方法）

1. 画面右上にある共有アイコンをクリック（マウスを近づけると「〇〇を共有」という文言が表示されます）
2. ポップアップの「リンクを共有」するタブを選択
3. 共有範囲を「プロジェクトチーム」か、「誰とでも」の中から選ぶ
4. 表示されたURLをコピー
5. 完了ボタンをクリック

（メールで共有する方法）

1. 画面右上にある共有アイコンをクリック（マウスを近づけると「〇〇を共有」という文言が表示されます）
2. ポップアップの「メールで共有」するタブを選択
3. 共有したい相手のメールアドレスを入力
4. 送信ボタンをクリック

Clarity以外でおすすめのヒートマップツールは？

Clarity以外でShopifyストアでヒートマップ解析を行いたいのであれば、「Lucky Orange（ラッキーオレンジ）」がおすすめです。

Lucky Orange（ラッキーオレンジ）はShopifyアプリで一番人気のヒートマップアプリになります。リアルタイムチャット機能やアンケート機能などがあり、Clarityよりも機能が豊富です。

ただし、PV（ページビュー）に応じた従量課金になりますので、自身が機能に対してどのくらい費用を出せるのか検討しましょう。

Lucky Orange（ラッキーオレンジ）の機能

• ヒートマップ解析
• カーソル移動のレコーディング（録画）
• リアルタイムのチャット
• アンケートの設置
• フォーム分析・ファネル分析

Lucky Orange（ラッキーオレンジ）の料金プラン

プラン	FREE	LAUNCH	BUILD	GROW	EXPAND	SCALE	ENTERPRISE
月額利用料	無料	9ドル/月	18ドル/月	35ドル/月	70ドル/月	150ドル/月	要問い合わせ
ページビュー数	500	1,000	10,000	40,000	100,000	300,000	要問い合わせ
サイト数	1	1	1	1	1	1	要問い合わせ
スタッフアカウント数	無制限	無制限	無制限	無制限	無制限	無制限	要問い合わせ
ヒートマップや録画 データ保存期間	30日	30日	30日	60日	60日	60日	要問い合わせ
チャットやアンケート データ保存期間	365日	365日	365日	365日	365日	365日	要問い合わせ

Clairtyと併せて利用したShopifyアプリ

RuffRuff 目次作成【目次】

ブログ記事だけでなく、商品ページやコレクション、Pagesなどにも目次を自動生成できる世界に1つしかないShopifyアプリです。
無料から利用でき、ノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。

引用元: RuffRuff 目次作成

料金

無料〜

「RuffRuff 目次作成」を利用して各コンテンツに目次を表示し、Clarityで目次内のどこの箇所が多くクリックされているかを確認することで、コンテンツ内のどこの箇所がユーザーにとって求められている内容なのか把握することができます。

下記の記事では、Shopifyのブログ記事に目次を出すメリットを解説しています。ご参考にしてください。

Shopifyのブログ記事に目次を出すメリットは？

RuffRuff タグ一覧【タグ】

RuffRuff タグ一覧の概要

「RuffRuff タグ一覧」は、商品やブログ記事に設定しているタグをオンラインストア上に一覧表示し、「商品やブログ記事など目的の情報へのアクセス性向上」や「サイト回遊率の向上」をサポートします。 ノーコード且つ3ステップで簡単に導入でき、オンラインストアのテーマデザインに併せてタグ一覧のデザインを自由にカスタマイズすることが可能です。

引用元：RuffRuff タグ一覧

料金

無料〜

「RuffRuff タグ一覧」を利用して各ページにタグ一覧を表示し、Clarityでどのタグが多くクリックされているかを確認することで、どのタグにユーザーが興味関心を持っているのか（ユーザーニーズ）の把握に努めることができます。

下記の記事ではShopifyでタグを活用するメリットだけでなく、デメリットや効果的なタグの付け方も紹介しています。ご参考にしてください。

Shopifyのブログ記事にタグ一覧を出すメリット