Shopifyストアにヒートマップを導入する方法（アプリ不要・コード1行）
- how-to
- shopify
- ecommerce
- heatmap
- installation
この記事の要約
- Shopifyにヒートマップを入れるには、アプリを追加しなくても
theme.liquidにコードを1行貼るだけでOK- 編集前に必ずテーマを複製してバックアップを取る。保存後はすぐ反映され、STUDIOのような再公開作業は不要
- チェックアウト画面（決済ページ）はテーマのコードが動かないため計測対象外。設置の成功確認は「エラーが出ないこと」ではなく、HeatMapXダッシュボードで件数が増えていること
「Shopifyのストアにヒートマップって入れられるの？アプリを追加しないといけない？」と思っていませんか？実はShopifyでは、アプリを追加しなくても、テーマのコードに1行のタグを貼るだけでヒートマップ計測を導入できます。この記事では、編集前に必ずやっておきたいバックアップから、貼り付けの手順、設置後の確認方法、注意点までを順番に解説します。
準備：サイトキーを取得する
まず、HeatMapX（無料プランあり）にアクセスして自分のストアを登録し、サイトキーを発行します。クレジットカードの登録は不要です。
サイトキーが発行されたら、以下の形のタグを使います。あなたのサイトキー の部分だけを、発行された実際のキーに置き換えてください。
<script src="https://heatmapx.com/tracker.js" data-site-key="あなたのサイトキー"></script>
手順：theme.liquidにタグを貼る
① （必須）テーマを複製してバックアップを取る
コードを直接編集する前に、必ず現在のテーマを複製してバックアップを残してください。Shopify管理画面の「オンラインストア」→「テーマ」で、使用中のテーマの「…」（アクションメニュー）から「複製」を選ぶだけで、いつでも元に戻せる状態が作れます。この一手間を省くと、編集を誤った場合に切り戻しができなくなります。
② コード編集画面を開く
- Shopify管理画面から**「オンラインストア」→「テーマ」**を開く
- 公開中のテーマにある**「…」（アクションメニュー）をクリックし、「コードを編集」**を選ぶ
- 左側のファイル一覧が表示される
③ layout/theme.liquidにタグを貼る
- ファイル一覧の**「Layout」フォルダを開き、
theme.liquid**をクリックする - ファイル内を
</head>で検索し、その直前に上記のタグを貼り付ける - 保存する
④ 保存すればすぐ反映される
Shopifyのコード編集は、保存した時点で本番サイトに反映されます。 STUDIOのように別途「公開」や「再公開」の操作を行う必要はありません。保存後、実際のストアを開けばすぐにタグが読み込まれた状態になっています。
動作確認
タグを貼り終えたら、実際に自分のストアを数ページ開いてみましょう。ただし、ここで大事なポイントがあります。
「ページがエラーなく表示される」ことと「計測が正しく動いていること」は別物です。 ブラウザのコンソールにエラーが出ていなくても、サイトキーの入力ミスや貼り付け場所の間違いで、計測データが届いていないケースがあります。
正しく設置できたかどうかは、必ず HeatMapXダッシュボードのサイト一覧で、対象サイトの件数が実際に増えているか を確認してください。商品ページやコレクションページなど数ページ閲覧した後、件数が増えていれば設置成功です。
注意点
チェックアウト画面（決済ページ）は計測対象外です
theme.liquidに貼ったタグは、トップページ・商品ページ・コレクションページ・カートページなどストアフロントでは動作しますが、チェックアウト画面（/checkouts/以下の決済ページ）では動作しません。 チェックアウトはテーマとは別の仕組みでShopifyが直接ホストしており、theme.liquidのコードが読み込まれない構成になっているためです。「チェックアウトの数値だけダッシュボードに出てこない」のは不具合ではなく、こうした仕様によるものだと理解しておいてください。
テーマを切り替えたら貼り直しが必要です
このタグは、貼り付けたそのテーマのtheme.liquidにのみ存在します。将来、別のテーマに切り替えた（テーマを公開テーマとして変更した）場合、新しいテーマのtheme.liquidには自動的にタグが引き継がれません。テーマを切り替えた際は、同じ手順で新テーマにも貼り直してください。
よくある質問
Q. ストアの表示速度に影響しますか？ A. タグは非同期で読み込まれる軽量な仕組みのため、ページの表示速度への影響はごくわずかです。
Q. タグを貼ったのに、ダッシュボードの件数が増えません A. 一番多い原因はサイトキーの取り違えです。別サイト用のキーを貼っていないか、コピー時に文字が欠けていないかを確認してください。また、確認しているページがチェックアウト画面ではなく、ストアフロント（トップ・商品・コレクションなど）になっているかもあわせて確認してください。
さいごに
Shopifyへのヒートマップ導入は、アプリを追加せずにtheme.liquidへコード1行を貼るだけで完了します。HeatMapXは無料で始められるので、まずは自分のストアの「見られ方」を知るところから試してみてください。