Shopifyでヒートマップを使う方法｜商品ページとチェックアウトの計測範囲を確認

Shopifyにヒートマップを入れると、商品ページのどこが押され、どこまで見られたかを調べられます。

ただし、商品ページにタグが入っただけで、購入画面まで同じように記録できるわけではありません。

最初に確認したいのは「どのアプリを入れるか」だけでなく、「どの画面の、どの状態まで計測するか」です。

この記事ではMicrosoft Clarityの公式アプリを導入例にして、商品ページ・カート・チェックアウトを分ける確認手順を紹介します。

最後のページ別計測可否表を使えば、記録できた範囲と、別の集計で補う範囲を担当者間で共有できます。

公式仕様は2026年10月5日に確認しており、操作例は各ストアで検証するための手順です。

Shopifyでヒートマップを使う前に

ヒートマップの導入前に、調べたい買い物の流れを一つ選びます。

「スマホで商品を選び、カートに追加して購入する」のように、入口と到達点を決めると点検対象を絞れます。

商品ページと購入画面を分ける

商品一覧や商品詳細を表示するストアフロントと、住所・配送・支払いを扱うチェックアウトは、別の計測範囲として扱います。

さらに、カートが別ページなのか、商品ページ上に開く引き出し型の画面なのかも確認します。

同じURLに見えても、引き出しの開閉やバリエーション変更で表示内容が変わるためです。

まず、次の順で実際の画面を開き、URLと画面の状態をメモしてください。

1. 商品一覧から商品詳細を開く
2. 色やサイズを選び、カートへ追加する
3. カートの中身と数量を確認する
4. チェックアウトの入口まで進む
5. 注文完了後の画面は、後述の安全なテスト方法を決めてから確認する

Shopifyのピクセルは隔離された環境で動き、一般的なページ上のタグと同じようにDOMを自由に読み取れる仕組みではありません（参考：Shopifyのピクセル概要）。

DOMとは、文字やボタンなど、ブラウザがページを組み立てるための構造のことです。

購入イベントを受け取れても、その画面の配置やマウスの動きをヒートマップで見られるとは限りません。

「イベントが届く」「録画で再現できる」「ヒートマップに重なる」の三つを分けて確認しましょう。

テーマと利用プランを確認する

計測条件として、公開中のテーマ名・バージョン・Shopifyのプラン・利用アプリを残します。

独自のストアフロントを使っている場合は、その構成も担当者に伝えます。

Shopifyには録画やヒートマップ向けのAdvanced DOM Events APIがあり、画面の構造や変化、操作を対応アプリへ渡せます（参考：Advanced DOM Events API）。

同APIは利用権限が必要で、チェックアウトでのイベント利用はShopify Plusに限定されており、カスタムアプリでは利用できません。

したがって、普通のカスタムピクセルへ任意の録画タグを貼れば、同じ機能になるという理解は避けます。

MicrosoftのClarity向け案内でも、Shopify Plusのチェックアウトと購入後ページはShopify Pixel経由で計測すると説明されています（参考：ClarityのShopify導入手順）。

アプリが対応する機能と、自分のストアの条件が両方そろっているかを調べることが出発点です。

Shopify向けの導入方法を選ぶ

導入経路は、現在の公式アプリと公式ドキュメントを基準に選びます。

古いブログのコードを追加する前に、すでに設定されている計測を確認してください。

公式アプリや接続方法を確認する

Clarityを新規導入する例では、Shopify App Storeの「Microsoft Clarity: AI Insights」を開きます。

提供元、アクセス権限、対応機能を確認してから、対象ストアにインストールします（参考：Microsoft Clarityの公式アプリ）。

公式手順の流れは次のとおりです。

1. Shopify App Storeで公式アプリを選び、権限の説明を確認する
2. インストール後に「Go to app settings」を開く
3. 「Clarity JS」をオンにして保存する
4. アプリへ戻り、必要に応じて表示を更新する
5. テスト訪問を行い、データが届くかを確認する

ダッシュボードへの反映には数時間かかる場合があるため、空の表示だけを理由に別のタグを追加しないでください（参考：Microsoftのインストールガイド）。

導入担当者は、アプリ名だけでなく、接続したClarityのプロジェクト名とIDも作業記録に残します。

複数ストアを運用している場合は、別のストアのプロジェクトへ接続していないかを確認します。

また、導入したアプリに分析以外の機能がある場合は、今回使う機能を区別して設定します。

既存タグとの重複を調べる

既存ストアでは、テーマへの直接記述・GTM・アプリ・カスタムピクセルを一覧にします。

同じ計測ツールの名前を探すだけでなく、接続先のプロジェクトIDまで照合するのがポイントです。

次の表は、実際の確認結果を記入するためのひな形です。

設置候補	確認する内容	記録するもの
公開テーマ	直接追加した計測コードがあるか	ファイル名・プロジェクトID
GTM	同じツールを配信しているか	コンテナ・タグ名・発火条件
Shopifyアプリ	公式アプリが有効か	アプリ名・設定の保存状態
お客様イベント	アプリ／カスタムピクセルがあるか	ピクセル名・接続状態

Clarityの公式アプリには、以前にtheme.liquidへ設置したコードからの自動移行について案内があります。

既存プロジェクトは「Connect Project」から管理者のメールを使って接続するため、古いコードを一律に先に削除するのではなく、該当する移行手順を確認します（参考：既存Clarityプロジェクトの接続）。

移行後は通常の閲覧で正しいプロジェクトへ記録されるかを調べ、不要な設置経路が残っていないかを点検します。

テーマの見た目を確認するプレビューと、公開中のストアでの計測確認は分けて実施します。

Shopifyの商品ページを確認する

商品ページでは、最初に表示された画面だけでなく、購入者が操作した後の状態を確認します。

色やサイズの選び直し、売り切れ表示、追加完了メッセージが重要な点検対象です。

バリエーション選択を試す

最初のテスト商品は、色またはサイズの選択があるものにすると、画面の変化を確認しやすくなります。

選択前の状態を見た後、別の選択肢を押し、画像・価格・在庫表示・購入ボタンがどう変わるかを記録します。

ここで確認したいのは、押した場所だけでなく、押した後に購入者へ必要な情報が届いているかです。

例えば、在庫切れのサイズを選ぶと購入ボタンだけが無効になり、理由が画面の上方に表示される構成を考えてみます。

これは説明用の仮想例ですが、ボタン付近しか見ていない人には理由が伝わりにくい可能性があります。

この場合は「クリックが多いから人気」と判断せず、録画で状態の切り替わりと、その後の操作を見ます。

Clarityでは動的な内容を含むページにヒートマップの制約があるため、重なりが正しいかも確認します（参考：Clarityのヒートマップ機能と制約）。

色違いの商品を同じURLの集計に含める場合は、表示状態の違いが混ざる点を分析メモへ残してください。

比較期間中に商品画像や選択欄の位置を変えた場合も、変更前後を分けて見ます。

カート追加の状態を試す

カート追加の確認では、ボタンを押した瞬間から、追加後の案内が表示されるまでを一続きで見ます。

数量の変化、カートの開閉、追加完了メッセージが、実際の画面と録画で一致するかを点検します。

Shopifyのアプリピクセルは、管理画面の「設定」から「お客様イベント」を開き、対象ピクセルのメニューでテストできます。

Shopify Pixel Helperでイベントの受信を見ながら操作し、エラーが出る場合は内容を記録します（参考：アプリピクセルのテスト）。

ただし、イベント受信の成功だけで、Clarity側の録画やヒートマップまで正常だとは判断できません。

アプリ側でも同じテスト訪問を探し、商品やカートの状態が再現されるかを確認します。

カート追加を連打する場面があったら、ボタンの反応が遅いのか、完了が伝わらないのかを切り分けます。

「追加された商品数」と「ボタンを押した回数」を同じ成果指標にしないことも大切です。

改善案には、変える表示と、改善を確かめる指標を一組で残しましょう。

Shopifyのスマホ表示を点検する

スマホでは、画像の大きさ・固定ボタン・カートの開き方によって、同じ商品ページでも操作感が変わります。

PCのヒートマップを縮小して読むのではなく、端末を分けて確認します。

画像と固定CTAを確認する

まず実機で商品ページを開き、商品画像から選択欄、購入ボタンまで操作します。

画面下に固定された購入ボタンがある場合は、Cookieバナーやチャットの表示と重ならないかも確認します。

点検の条件は、画面幅だけでなく、バナーの開閉・キーボード表示・端末の向きを含めて残すと再現しやすくなります。

ブラウザの端末表示は便利ですが、実機そのものを完全に再現するものではありません（参考：Chromeのデバイスモード）。

公開前はブラウザで配置を確認し、重要な購入操作は実機でも試すという分担が適しています。

タップの集中を見つけたら、その位置が購入ボタン・画像拡大・スライド操作のどれなのかを確認します。

商品画像にタップが集まる場合も、拡大したいのか、横へ送ろうとしているのかで改善案が変わります。

録画に操作の前後が残っていれば、タップ後に何が起きたかを併せて確認してください。

小さなボタンを単に大きくする前に、周囲の要素との重なりや、意図しない移動がないかを調べます。

カート画面の遷移を見る

引き出し型のカートでは、ページの上に別の領域が重なり、その内部だけがスクロールすることがあります。

通常のページスクロールと、カート内部のスクロールを混同しないようにします。

Clarityのスクロールヒートマップはページ本体のスクロールが対象で、div内のスクロールには制約があります（参考：ヒートマップの対象範囲）。

送料の案内がカート内部の下部にある場合、商品ページ全体の到達率だけでは、見られたかを判断できません。

引き出しを開いた状態の録画、実機での操作、別途取得しているイベントを組み合わせて確認します。

別ページ型のカートなら、遷移前の商品情報と、遷移後の数量・金額が一致しているかを見ます。

「買い物を続ける」で戻ったときに、選択した色やサイズが保たれるかも点検してください。

確認結果には、別ページ型か引き出し型かを明記し、テーマ変更後の再点検項目に加えます。

Shopifyの記録条件をそろえる

ヒートマップの見た目が整っていても、同意状態や情報の隠し方が想定と違う場合があります。

通常の買い物の流れに加えて、同意と個人情報の扱いを確認します。

同意状態を検証する

「未選択」「拒否」「許可」の状態を分け、それぞれでタグやピクセルがどう動くかを調べます。

アプリピクセルのプライバシー設定は、Shopify管理画面の「お客様イベント」で確認できます（参考：アプリピクセルの権限とプライバシー）。

設定の名称だけで判断せず、ストアのCookieバナーと連動するかを通常の閲覧でも確認してください。

Pixel Helperが同意待ちを示したときに、テスト用の同意操作で先へ進めても、それだけで実際のバナー連携を検証したことにはなりません。

拒否した状態を確かめる試験と、許可後のイベント受信を確かめる試験は別々に記録します。

ClarityではCookieを使わない収集が行われる構成もあるため、Cookieの有無だけを外部送信の有無と読み替えないことが重要です（参考：Clarityの同意管理）。

同意の設定を変えた日を残しておけば、記録数の増減が顧客行動によるものか、設定変更によるものかを確認しやすくなります。

比較に使う期間では、対象市場・同意条件・端末をできるだけそろえます。

個人情報の表示を確認する

フォームの入力中だけでなく、入力後に文字として表示される確認画面も点検します。

氏名、配送先、注文内容、会員情報が現れる場所を洗い出し、記録する必要があるかを先に決めます。

Clarityのマスキング設定は、新しい記録に適用されるもので、過去の録画をさかのぼって隠す設定ではありません（参考：Clarityのマスキング）。

本物の購入者情報を使う前に、テスト用の情報で、入力欄と確認表示の両方が想定どおり隠れるかを確認します。

URLや独自に送る値に個人情報を含めていないかも、画面のマスキングとは別に点検します。

注文完了までの確認が必要な場合は、テスト用ストアや決済のテスト方法を担当者と決めます。

Shopify Paymentsのテストモードは実際の支払いに影響するため、営業中のストアで安易に有効化せず、配送などの自動処理も含めて実施条件を確認してください（参考：Shopify Paymentsのテスト）。

点検表には、テスト注文か実注文かも明記し、注文数の分析へ混ぜないようにします。

Shopifyのヒートマップを改善に使う

最後に、計測範囲を表にしてから、改善したい箇所を選びます。

見えない工程を明記すれば、記録がないことを離脱と誤解しにくくなります。

計測できない工程を明記する

次の表は、Shopifyのページ別計測可否を記録するためのひな形です。

実際に確認した結果を入れ、「未確認」を無理に「対応」と書き換えないでください。

ページ・状態	イベント	録画・ヒートマップ	補う資料・次の確認
商品詳細の初期表示	受信の有無を記入	画像と位置を確認	テーマ・端末を記録
色・サイズ変更後	取得対象か確認	選択後の表示を確認	動的表示の差を残す
カート追加後	成功とクリックを区別	引き出し／別ページを確認	カート内部の操作を確認
チェックアウト	対応ピクセルを確認	プランとアプリの対応を確認	Shopifyの購入段階別集計
注文完了・注文状況	別々に確認	マスキングを含めて確認	注文管理上の結果

表の左から右へ、「発生した出来事」「画面の再現」「業務上の結果」を分けて埋めていきます。

例えば、商品ページとカートは確認できたものの、チェックアウトの録画は取得対象外だった場合、その制約を報告書の冒頭に書きます。

この状態で「支払い方法の選択で全員が離脱した」と結論づけることはできません。

調べられた範囲から、サイズ表の見つけやすさや追加完了の伝わり方など、具体的な改善候補を選びます。

各候補には、観察した事実・考えられる理由・変更案・次に確かめる結果を一行ずつ残すと、担当者が動きやすくなります。

注文結果と照合する

購入の流れはShopifyの「Analytics」から「Reports」を開き、「Conversion rate breakdown」などで確認します。

同レポートでは、セッション、カート追加、チェックアウト到達、チェックアウト完了の段階を見られます（参考：Shopifyの行動レポート）。

途中から入る訪問を含むオープンファネルと、順番どおり進んだ訪問を数えるクローズドファネルでは対象が変わるため、比較時は設定をそろえます。

また、購入したセッションの数と注文数は別なので、録画件数やボタンのクリック数ともそのまま一致しません。

分析メモには、比較期間・端末・広告などの流入条件・ファネル設定を残してください。

直近では、Shopifyが2026年9月21〜23日にセッション計測を更新しており、ボットの扱いなどによってセッション数やCVRが変わる場合があります（参考：Shopifyのセッション計測変更）。

この更新をまたぐ比較では、数値の変化をすべてヒートマップ施策の成果とせず、注文・売上なども併せて確認します。

まず一つの商品ページで計測範囲を確かめ、操作のつまずきを見つけ、変更後に同じ条件で見直すところから始めましょう。

ヒートマップと録画を注文結果へ結び付けることで、色の濃さを見るだけで終わらない改善につながります。