【画像あり】Shopifyにヒートマップツール「Microsoft Clarity」を導入する方法

【画像あり】Shopifyにヒートマップツール「Microsoft Clarity」を導入する方法

読了目安時間 : 約

ユーザー行動を理解することは、ECサイトの改善に欠かせません。今回は、無料のウェブサイト分析ツール「Microsoft Clarity」をShopifyに導入する方法を解説します。

本記事では、以下の内容について説明します。

  1. ShopifyサイトにMicrosoft Clarityを設定する方法
  2. Microsoft ClarityとGoogle Analytics 4を連携する方法

ぜひ、Microsoft Clarityを活用して、Shopifyストアのユーザー行動を分析し、改善につなげてください。

Microsoft Clarityとは

Microsoft Clarity

Microsoft Clarityは、Webサイトの分析やユーザー行動の把握に役立つ無料のツールです。ヒートマップやセッションリプレイ、ユーザーフローなどの機能を利用して、サイト訪問者の行動パターンや問題点を視覚的に理解することができます。

主な特徴は下記になります。

  • セッション数に上限なく無料で利用可能
  • 簡単なスクリプトを追加するだけで導入できる
  • ヒートマップで、クリック、スクロール、マウスの動きを分析できる
  • ユーザー行動を動画で確認できる
  • ユーザーフローで、訪問者の移動経路を把握できる

Microsoft Clarityを活用することで、Webサイトのユーザビリティを向上させ、コンバージョン率の改善やサイト運営の最適化に役立てることができます。Google Analyticsとの併用も可能で、より詳細な分析が行えます。

ShopifyサイトにMicrosoft Clarityを設定する方法

Microsoft Clarityにアクセスし、「New Project」をクリックします。

Microsoft Clarityにアクセスし、「New Project」をクリックします。

サイト名やURLを入力し、「Add new project」をクリックします。

サイト名やURLを入力し、「Add new project」をクリックします。

「View all platforms」をクリックします。

「View all platforms」をクリックします。

プラットフォーム一覧の中から、「Shopify」を選択します。

プラットフォーム一覧の中から、「Shopify」を選択します。

「Copy to clipboard」をクリックし、tracking codeをコピーします。

「Copy to clipboard」をクリックし、tracking codeをコピーします。

Shopifyのテーマページにアクセスします。Microsoft Clarityを導入したいShopifyテーマの「…(三点リーダー)」をクリックし、「コードを編集」をクリックします。

Shopifyのテーマページにアクセスします。Microsoft Clarityを導入したいShopifyテーマの「…(三点リーダー)」をクリックし、「コードを編集」をクリックします。

コード編集画面左にファイル一覧から「theme.liquid」を選択します。</head>の直上に先ほどコピーしたtracking codeを貼り付け、画面右上の「保存」をクリックします。

コード編集画面左にファイル一覧から「theme.liquid」を選択します。</head>の直上に先ほどコピーしたtracking codeを貼り付け、画面右上の「保存」をクリックします。

「設定 > チェックアウト」の順に遷移します。

続いて、「設定 > チェックアウト」の順に遷移します。

追加スクリプトの箇所にtracking codeを貼り付けて、画面右上の「保存」をクリックします。

追加スクリプトの箇所にtracking codeを貼り付けて、画面右上の「保存」をクリックします。

以上で設定は完了です。

Microsoft ClarityのDashboardにデータが表示されてたら無事に設定できています。

上の添付画像のようにMicrosoft ClarityのDashboardにデータが表示されてたら無事に設定できています。

Microsoft Clarityと Google Analytics 4を連携する方法

Microsoft Clarityと Google Analytics 4を連携することで、Microsoft Clarity内でGoogle Analytics 4の計測データのダッシュボードを作成でき、目標やセグメントをインポートできます。

本章の設定を進めるには事前にGoogle Analytics 4の設定が完了している必要があります。まだ、設定が完了していない方は下記のブログ記事を参考に設定をお願いします。

【画像あり】ShopifyにGA4(Googleアナリティクス4)を設定する方法|GA4のおすすめ設定も紹介

Microsoft ClarityのSetupをクリックし、Google Analytics integrationカード内の「Get started」をクリックします。

Microsoft ClarityのSetupをクリックし、Google Analytics integrationカード内の「Get started」をクリックします。

連携したいGoogle Analytics 4のプロパティを選択し、「Save」をクリックします。

連携したいGoogle Analytics 4のプロパティを選択し、「Save」をクリックします。

以上で連携は完了です。

Microsoft ClarityのGoogle Analyticsにデータが表示されてたら無事に設定できています

上の添付画像のようにMicrosoft ClarityのGoogle Analyticsにデータが表示されてたら無事に設定できています。

RuffRuff App RuffRuff App by Tsun
ブログに戻る