【Shopify】ヒートマップツール「Mouseflow」で購入やカゴ落ちしたユーザー行動を分析しよう

今回は、弊社がおすすめしているヒートマップツール「Mouseflow(マウスフロー)」をShopifyに設置する方法からレコーディング機能の活用まで解説いたします。

ヒートマップやユーザー行動を録画(レコーディング)できるShopifyアプリは「Lucky Orange」や「Recoket」、「FigPii AB Testing & Replays」などいくつかあります。
Shopifyサイトだけ運用している場合は、これらのアプリを活用しても良いでしょう。しかし、Shopifyだけでなく他のサイト(ブランドサイトなど)を運営している場合は、外部ツールを使うのがおすすめです。一つのツールで複数のサイトを管理できるため、分析と運営の効率化が図れます。

そこで弊社では、Mouseflowを活用し、ユーザーの行動分析を行っています。
Mouseflowの解説は、下記のブログ記事をご覧ください。

Mouseflow(マウスフロー)の紹介と基本的な機能の解説はこちら

ShopifyにMouseflowを導入するには?

ShopifyにMouseflowを導入する場合、Googleタグマネージャーを使うのがおすすめです。
Googleタグマネージャーについては、下記のブログ記事で解説しております。

GoogleタグマネージャーでMouseflowを導入すれば、後ほどご紹介するレコーディング機能に関する設定がしやすくなります。
そこでまずは、ShopifyにGoogleタグマネージャーを導入する方法を解説しましょう。

ShopifyにGoogleタグマネージャーを導入する方法

Shopifyには「Pafit Tag Management for GTM」など、Googleタグマネージャーを導入するためのアプリがあります。しかし有料のものが多く、予算が厳しいなら無料で行いたいものです。

そこで、直接ソースコードを編集します。
これなら無料でGoogleタグマネージャーを導入できます。

これからご紹介するのは、初心者には少し難しい方法です。解説をご覧頂いてもよくわからない場合は、詳しい方にご対応いただくか、Pafit Tag Management for GTMといったアプリを使用するのをオススメいたします。

購入手続き画面へのGoogleタグマネージャー設置はPlusプランのみです

Shopify Plus以外の料金プランは、購入手続き画面のカスタマイズ機能はついていません。
Plus以外のベーシック、スタンダード、プレミアムプランでは、購入手続きの画面にGoogleタグマネージャーの設置はできませんのでご注意ください。
Shopifyの料金プラン – 各プランの詳細情報と比較 – 無料体験 – Shopify 日本

この記事は、Plusプラン以外での解説となります。購入手続き画面のカスタマイズ方法につきましては、他のサイトなどをご参照ください。

テーマのソースコードにGoogleタグマネージャーのコードを設置する

コードを編集する前に

バックアップとしてテーマを複製しておくとよいでしょう。問題が起きたときにすぐ戻せます。

Shopify テーマ 複製方法
「オンラインストア」→テーマ横の「」→「複製」
Shopifyにログインしたら、「オンラインストア」→テーマ横の「」→「コードを編集」をクリックします。
「theme.liquid」ファイルを選択します。
theme.liquid ファイルを選択
画面左上にある「ログアウトアイコン 閉じる」をクリックして画面を閉じます。
Shopify コード編集画面を閉じる

この時点では、ほぼすべてのページにGoogleタグマネージャーのコードが設置できています。
しかし、まだ購入完了の画面には設置できていません。続いては、その設定を行います。

購入完了画面にGoogleタグマネージャーのコードを設置する

画面左下の「 設定」をクリックします。
Shopify 右メニュー 設定ボタン
管理画面の左メニューの一番下にあります。
左のメニューから「 チェックアウト」を選択します。
Shopify 設定 チェックアウト
「注文状況ページ」までスクロールし、<head><body>の両方に入れるコードをすべて挿入します。

このように記述します。

画面下もしくは上にある「保存する」をクリックします。
Shopify 管理画面 保存する ボタン

これで購入完了画面にGoogleタグマネージャーが設置されました。

Shopify 購入完了画面 ソースコード GTM挿入後
購入完了画面のソースコードです。Googleタグマネージャーのコードが挿入されています。

Googleが指定している場所には設置されていませんが、問題なく動作します。

GoogleタグマネージャーでMouseflowを導入する

それでは、Mouseflowのアカウントを作成し、Googleタグマネージャーに導入しましょう。

Mouseflowのアカウント作成方法は、下記の記事で解説しています。

Mouseflow(マウスフロー)のアカウント作成方法はこちら

GoogleタグマネージャーにMouseflow(マウスフロー)を設定する方法は、下記の記事で解説しています。

Googleタグマネージャーの解説はこちら

購入完了ページの計測を設定する

Shopifyの購入完了ページのURLは、例えば以下のように出力されます。

https://shop.myshopify.com/66510782677/checkouts/71b4d87e04a37c362625545ce121e152/thank_you

さまざまな英数字が並んでいますが、URLの構造としてはこのようになっています。

https://ドメイン名/{動的な値}/checkouts/{動的な値}/thank_you

checkoutsthank_youは変わりませんが、その間に動的な値が出力されるため、ユーザー毎に異なるURLになります。

しかし、このようにURLがバラバラのままだと、Mouseflowでの分析がし辛くなります。
そこで、URLを統一させる設定を行います。

またcheckout.shopify.comなど別のドメインへ移動することがあるため、その場合でも計測されるように設定します。

Mouseflowにログインし、「設定」画面を開きます。
Mouseflow 設定ボタン
「設定」の「ドメイン」に「checkout.shopify.com」を記述し、「保存」します。
Mouseflow 設定 ドメイン追加
「詳細設定」を開きます。
Mouseflow 設定 詳細設定
「URLを統一」の項目で、以下のように記述して「保存」します。
タイプパターンエイリアス
正規表現^.\/checkouts\/.\/thank_you$/checkout/thank_you
詳細設定の記述方法

これで購入完了ページへの訪問はすべて/checkout/thank_youとして記録されます。

Mouseflow URL統一後
URLを統一した後のページのURL表記

クロスドメイン設定を行う

Mouseflowの「レコーディング」は、サイトに訪問してから離脱するまでの行動を1ユーザー毎に録画する機能です。

Mouseflow レコーディング 例
レコーディングの一覧画面です。ユーザー毎に訪問から離脱まで記録されています。

しかし初めてShopifyに導入したとき、何も設定していない状態にしていると、1ユーザーの行動ではなく1ページ毎で録画されてしまいました。

Mouseflow Shopify クロスドメインOFFでのレコーディング
先ほど設定したShopifyのレコーディング一覧です。「ページ」欄が全て「1」となっていますが、前後の「地域」と「リファラー」項目を見ると、同じ地域が複数続き、エントリーページもつながっています。このことから、同一ユーザーなのに別々のレコーディングになっているのが分かります。

そこでクロスドメイン設定を行いました。設定方法はこちらです。

Mouseflowにログインし、「設定」画面を開きます。
Mouseflow 設定ボタン
左メニューから「アプリ&連携」を選択します。
Mouseflow 設定 アプリ&連携
「Crossdomain Support」を選択します。
Mouseflow Apps Crossdomain Support 選択
ポップアップが表示されたら「有効化」にして「保存」します。
Mouseflow Crossdomain Support 有効化

設定が完了すると、このような画面になります。

これで、1ユーザー毎に訪問から離脱までの行動が記録されるようになりました。「Crossdomain Support」を有効化すると、URLにドメイン名が表示されるようになります。

Mouseflow クロスドメイン設定前と設定後のURL

「Crossdomain Support」が無効の状態で数日間計測した後に有効化すると、ドメインがあるものとないもので混在してしまいます。

Mouseflow ページURL ドメインの有無で混合した例
Mouseflowの「ヒートマップ」の一覧です。同じページでもURLがバラバラだと、別々のヒートマップとして記録されてしまいました。これが、購入完了ページのURLを統一した理由の一つです。

早い段階で「Crossdomain Support」は有効化しておきましょう。

レコーディング結果を確認する

設定が完了したら、実際にサイトを操作して計測してみましょう。
行動が一つのレコーディングとして記録され、購入完了URLが/checkout/thank_youと表記されていれば問題ありません。

Mouseflow URL統一後
URLを統一した後のページのURL表記

Googleタグマネージャー設置の項目で説明した通り、Shopify Plus以外は購入手続き画面にGoogleタグマネージャーは設置できません
そのため、Plus以外のプランでは「カートの追加」と「購入完了」は記録されますが、その間にある「購入手続き」の画面は抜けた状態となります。

Shopifyでの購入完了までの操作と、Mouseflowでレコーディングしたものを比較しました。
※クレジットカード情報はShopify公式から案内されているテスト用のものです。

Mouseflowでカート追加や購入などの行動にタグをつける

このままでも計測に問題はございません。しかし「カートへの追加」や「購入完了」など、コンバージョンに繋がる行動をしたユーザーの動向はチェックしたいところです。
特に、カートに追加したが購入まで至らなかった「カゴ落ち」ユーザーの行動分析は重要です

そこで、カートの追加や購入をしたレコーディングに印として「タグ」を追加します。

Mouseflowのレコーディングは、フォームへの入力や送信、マウスやクリックなど、ユーザーが行った操作によって自動的にタグがつけられます。
タグがつけられるとフィルタリングしやすくなり、CSVで出力すればデータの可視化もできます。

Mouseflow レコーディング タグ
「タグ」はMouseflowのレコーディング一覧の右側に表示されるものです。

Mouseflowの「カスタムタグ」やGoogleタグマネージャーなどを使えば、特定のタグがつく条件をこちらで設定できます
これを活用して、「カートに追加」などのボタンクリックや「購入完了」ページへの遷移を行ったとき、タグがつくよう設定しましょう。

「カートに追加」「今すぐ購入」「ご購入手続きへ」のタグを設定する

「カートに追加する」「今すぐ購入」「ご購入手続きへ」といった、購入に関わる行動を行ったレコーディングにタグがつくように設定しましょう。

Googleタグマネージャーでも設定できますが、ウェブに関する知識が必要です。
そこで、コードの知識がなくてもタグの設定ができる、Mouseflowの「カスタムタグ」機能を使います。

Mouseflowにログインし、「設定」画面を開きます。
Mouseflow 設定ボタン
「カスタムタグ」を選択します。
「カスタムタグを編集」をクリックします。
「カスタムタグエディタ」のポップアップが開いたら、URLを記入して「ページを開く」をクリックします。
Mouseflow カスタムタグエディタ URL記入
ページが開いたら、右下に「カスタムタグエディタ」が表示されるのを待ちます。
一度「カスタムタグエディタ」を最小化し、商品詳細ページに移動します。

「カスタムタグエディタ」のパネルが大きい状態では、リンクをクリックするとタグの設定画面が開いてしまい、リンク先に移動できません。そのため、一度最小化する必要があります。

Mouseflow カスタムタグエディタ パネル 最小化
をクリックすると、パネルを最小化します。
右下のカスタムタグエディタを最小化して商品ページに移動したらカスタムタグエディタを最大化させる
「カスタムタグエディタ」を最小化して、トップページから商品詳細ページに移動する様子のアニメーションです。
「カスタムエディタ」を最大化した状態で、「カートに追加する」や「今すぐ購入」をクリックし、タグの設定ができたら「追加」します。
Mouseflow カスタムタグエディタ パネル 最大化
をクリックすると、パネルが最大化されます。

「カスタムタグエディタ」パネルを最大化させたら、タグを設定するボタンをクリックします。「新しいタグ名」「タグトリガー」(必要なら「説明」も)を記入し、「すべてのページ」に切り替えたら「追加」をクリックします。

「カスタムエディタ」を再度最小化して、カートページに移動します。
Mouseflow カスタムタグエディタ パネル 最小化
をクリックすると、パネルを最小化します。

「あなたのカート」というページにある「ご購入手続きへ」ボタンが表示されている状態にしておきます。

「カスタムエディタ」を最大化し、「ご購入手続きへ」ボタンをクリックし、タグの設定ができたら「追加」します。
Mouseflow カスタムタグエディタ パネル 最大化
をクリックすると、パネルが最大化されます。

「カスタムタグエディタ」パネルを最大化させたら、「ご購入手続きへ」ボタンをクリックします。「新しいタグ名」「タグトリガー」(必要なら「説明」も)を記入し、「現在のページ」のままにしておいて「追加」をクリックします。

すべてのタグ設定ができたら「保存して閉じる」をクリックします。
Mouseflow カスタムタグエディタ 保存して閉じる

「カスタムタグ」には、設定したタグが表示されます。「タグ」や「説明」を編集したり、削除したりできます。

なお、タグ名を変更したり削除したりしても、過去にレコーディング(記録)された方のタグの変更や削除はされません。あらかじめご了承ください。

カスタムタグで選択できなかったボタンのクリックに「タグ」を設定する

「カートに追加する」ボタンをクリックした後、右上に「カートを見る」と「ご購入手続きへ」ボタンが表示されます。

ショップサイト カート追加後 右上に表示される「ご購入手続きへ」ボタン

この右上に出てくる「ご購入手続きへ」ボタンを押したときにもタグを設定したいところです。
しかし、これらは「カスタムエディタ」を開くと閉じてしまうため、Mouseflowの「カスタムタグ」機能ではタグを設定できません。

そこで、Googleタグマネージャーを使用します。

ここからはウェブの知識が必要となります。初心者の方には難しいため、これからご説明する内容がよくわからないようでしたら、専門の方にご依頼することをおすすめします。

トリガーの設定方法を調査する

まずは、トリガーをどのように設定すればいいか、ソースコードを確認します。

今回はGoogle Chromeを使った方法をご紹介しています。他のブラウザですと、文言や手順が若干異なります。

商品詳細ページの「カートに追加する」をクリックしたら、右上の「ご購入手続きへ」ボタンの上で右クリックし、「検証」を選択します。
ショップサイト 「ご購入手続きへ」ボタンで右クリック→「検証」
「ご購入手続きへ」ボタンのコードよりも上にある<form>タグを選択します。
右クリックして、「Copy」→「Copy element」を選択し、コードをコピーします。
formタグを選択した状態で右クリック→Copy→Copy element
メモ帳などのテキストツールに貼り付けて、コードを確認します。

コードを見ると、フォーム(<form>)の中に「ご購入手続きへ」の送信ボタン(<button>)があります。
<form>にはid="cart-notification-form"がついています。

今回、解説で使用しているテーマはDawn 7.0.1です。違うテーマだったり、バージョンが違っていたり、アプリなどを使っていたり、カスタマイズしていた場合は、ソースコードはこの通りではありません。

以上のことから、「商品詳細ページにある、ID属性がcart-notification-formというフォームに送信があったとき」に発火するトリガーを設定すればいいことが分かりました。これを元に、Googleタグマネージャーで設定を行います。

Googleタグマネージャーの設定を行う

Googleタグマネージャーにログインし、「タグ」→「新規」をクリックします。
「タグの設定」をクリックします。
「カスタムHTML」を選択します。
Googleタグマネージャー タグタイプ カスタムHTML
下記のタグを記述します。
「トリガー」をクリックします。
「トリガーの選択」が表示されたら、右上の「(青いプラス)」をクリックします。
Googleタグマネージャー トリガー追加
「トリガーの設定」をクリックします。
「トリガーのタイプを選択」が表示されたら、「ユーザー エンゲージメント」にある「フォーム送信」を選択します。
Googleタグマネージャー トリガーのタイプを選択 フォームの送信
「このトリガーの発生場所」で「一部のフォーム」を選択し、下記のように設定して「保存」します。

商品詳細ページのURLは「https://{ドメイン}/products/{商品ページ}」となっているため、このように設定します。

変数条件
Page Path先頭が一致/products/
Form ID等しいcart-notification-form
Shopify 商品詳細ページ 購入手続きへ トリガー設定

今回、解説で使用しているテーマはDawn 7.0.1です。違うテーマだったり、バージョンが違っていたり、アプリなどを使っていたり、カスタマイズしていた場合は、同様の設定になるとは限りません。

設定が完了したら、タグにわかりやすい名前をつけて「保存」します。

購入完了ページ遷移時

購入完了ページ(/checkout/thank_you)に移動したら購入完了のタグがつくようにします。

Googleタグマネージャーにログインし、「タグ」→「新規」をクリックします。
「タグの設定」をクリックします。
「カスタムHTML」を選択します。
Googleタグマネージャー タグタイプ カスタムHTML
下記のタグを記述します。
Googleタグマネージャー カスタムHTML Mouseflow レコーディングに「購入完了」タグ追加
「トリガー」をクリックします。
Googleタグマネージャー 「購入完了」タグ追加 トリガー選択
「トリガーの選択」が表示されたら、右上の「(青いプラス)」をクリックします。
Googleタグマネージャー トリガー追加
「トリガーの設定」をクリックします。
「トリガーのタイプを選択」が表示されたら、「ページビュー」を選択します。
Googleタグマネージャー トリガーのタイプを選択 ページビュー
「このトリガーの発生場所」で「一部のページビュー」を選択し、下記のように設定します。
変数条件
Page URL正規表現に一致.*/checkouts/.*/thank_you
Shopify購入完了ページ トリガー設定
設定が完了したら、タグにわかりやすい名前をつけて「保存」します。

タグの設定ができているか確認する

これらの設定が完了したら、実際にタグが記録されるか、ページを操作して確認しましょう。

Googleタグマネージャーで設定したものは、「プレビュー」で確認し、問題なければ「公開」します。
Googleタグマネージャーの「プレビュー」と「公開」の方法については、下記の記事にて解説しております。

Googleタグマネージャーを「プレビュー」で確認して「公開」する方法はこの記事で解説しています。

しかし、Googleタグマネージャーでは問題なくても、Mouseflowにタグが記録されないこともあります。
Mouseflowで設定したカスタムタグも含め、実際にページを操作して想定通りにタグが記録されるかチェックしましょう。
もし気になることがあれば、実際に操作している様子も画面収録で残しておくと良いでしょう。

「テスト」のレコーディングだと分かるように手動でタグを追加する

テストで操作したレコーディングには、区別がつくように「テスト」など分かりやすいタグをつけておくことをおすすめします。

各「レコーディング」の右端にある「」アイコンをクリックし、「タグを追加」を選択します。
Mouseflow レコーディング タグを追加
追加するタグの名前を記入したら「保存」します。
Mouseflow レコーディング タグを追加 タグ名の記述と保存
今回は「テスト」と記入します。
Mouseflow レコーディング タグ追加完了

「テスト」というタグがレコーディングに追加されました。
このように手動でもタグは追加できます。

Mouseflowのファネルで購入までの行動を絞り込む

Mouseflowには「ファネル」という機能があります。ページ遷移を登録して、どのぐらいのユーザーがその通りに行動したか、分析できるものです。
これを活用し、商品ページの訪問から購入完了まで至ったのはどれぐらいか、途中でどれぐらい離脱したかを分析しましょう。

左メニューから「ファンネル」を選択します。
Mouseflow ファンネル 選択
「新しいファネルを追加」を選択します。
Mouseflow 新しいファネルを追加
商品詳細ページから購入完了までのステップを設定し、分かりやすい名前をつけて保存します。

ページURLの後に*をつけると、「そのページ以下の階層全てに当てはまる」という指定ができます。
例えば、今回の場合なら、指定したい商品詳細ページのURLは「https://{ドメイン}/products/{商品ページ}」という構造になっています。そのため「{ドメイン}/products/*」とすれば、商品詳細ページ全てを指定できます。
購入完了の「ページ」は、「購入完了ページの計測を設定する」の項目で設定した/checkout/thank_youにしましょう。

ステップページステップ名
#1{ドメイン}/products/*商品詳細ページ
#2{ドメイン}/cartカート
#3/checkout/thank_you購入完了
ファネル設定

設定すると、すぐにデータが表示されます。

Mouseflow ファネル 商品詳細から購入完了まで コンバージョン 簡易グラフ

これで、商品詳細ページから購入に至るまで、どれぐらい離脱したのかが分かります。

更に、離脱したりコンバージョンしたレコーディングをそれぞれまとめてくれます。

まとめ

このように、ShopifyでもMouseflowを活用すれば、購入したかどうかだけでなく、カゴ落ちしたユーザーの行動も分析できます。
Plusプランでないと購入手続きページを計測できないのは残念ですが、それでもカートへの追加から購入完了までをある程度計測できるのは大きいでしょう。

それ以外にも、Mouseflowでは様々な設定が可能です。
Mouseflowの日本語公式サポートサイトには、様々な利用方法が載っております。是非参考にしながら、サイトに合わせて設定を行ってみてください。

当サイトでも、今後Mouseflowの設定や活用方法を紹介していく予定ですので、ご覧いただけますと幸いです。

解説に使用させていただいたサイトのご紹介

今回の解説に使用させていただいたショップサイトは、株式会社ニーズさんが運営している「ココイコストア」です。
ウェットティッシュやマスクなどを販売しています。日常生活で使えるものからペット用や業務用まで、幅広い用途に向けた商品を取り揃えております。

参照ページ一覧

今回の記事を執筆する上で参考にしたページです。

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス
関連の事業・サービスの詳細はこちら!
動画を活用したコンサルティング
ヒートマップツール「Mouseflow(マウスフロー)」の紹介 シリーズ
弊社がおすすめしているヒートマップツール「Mouseflow(マウスフロー)」に関する情報を掲載しています。