Shopifyチェックアウトフローの記録
2022年10月18日
Shopifyチェックアウトページにmouseflowをインストールして、チェックアウトフローを記録する方法をご紹介いたします。
概要
mouseflowを使用して記録できるShopifyアクティビティには、次の2種類があります。
1．チェックアウト以外のページ（必須）
Shopifyのアクティビティを記録したい場合は、まずShopifyサイトの主要部分のアクティビティを記録するようにmouseflowを設定する必要があります。
2．チェックアウトページ（オプション）
Shopifyチェックアウトを使用していて、チェックアウトフロー中に訪問者の行動を記録したい場合は、追加の高度なステップを踏んで、そこでもアクティビティを記録するようにmouseflowを構成できます。
この記事は、チェックアウトページの記録に関するものです。非チェックアウトページを記録するようにmouseflowをまだ構成していない場合は、まず「Shopifyサイトにmouseflowをインストールする」の手順に従ってください。
セキュリティ上の理由から、Shopifyではチェックアウトフローの一部のページの追跡のみが許可されていることに注意してください。この記事では、サンキューページと、ShopifyPlusアカウントをお持ちの場合のみ、残りのチェックアウトフローを追跡できるようにします。
＜備考＞
ShopifyとShopifyPlusのチェックアウトページのコンバージョントラッキングに関する詳しい情報は、こちらを参照してください。
A.セットアップ
次のガイドでは、Shopifyのサンキューページを記録するためのmouseflowを設定する方法を説明します。
1.チェックアウトページのスクリプトとしてｍouseflowのトラッキングコードを追加します。
Shopifyにログインし、[設定]に移動して、左サイドバーの「チェックアウト」を選択します。
「Orderstatuspagescripts」セクションの下に、あなたのShopifyの設定によって、1つまたは2つのテキストボックスが表示されます。スクリプトまたは追加スクリプトのテキストボックスに、ｍouseflowトラッキングコードを貼り付けます。
2.mouseflowでShopifyCheckoutをドメインに追加する
mouseflowで「ウェブサイトの設定」に移動し、checkout.shopify.com、またはShopifyチェックアウトページがホストされているドメインを「ドメイン」フィールドに入力し、キーボードのタブキーを押してリストに追加します。「保存」をクリックします。
3.URLをマージする
ShopifyチェックアウトのURLパスは、各訪問者に固有です。これらをmouseflowで使用できるようにするには、いくつかの高度なルールでマージする必要があります。
- 下にスクロールして「詳細設定」カードを開き、「MergeURLs」セクションを見つけます。次のURLマージルールを追加します。
| タイプ | パターン | エイリアス |
| 正規表現 | ^.*\/\d*\/checkouts\/\w*\/thank_you$ | /checkout/thank_you |
- オプションの手順：ドメイン名を先頭に追加したり（クロスドメインサポート統合を有効にしている場合に推奨-ステップA.4を参照）、ページエイリアスとして他の名前を使用することによって、エイリアスをさらにカスタマイズできます。たとえば、/checkout/thank_youをyour-domain.com/checkout/thank_youまたは単にThankYouに変換できます。
- 「保存」をクリックします。
4.オプションの手順：クロスドメインサポートを有効にする
独自のドメインとShopifyの両方からの記録がユーザーごとに1つの継続的なセッションに結合されるようにするには、「アプリ & 連携」ページに移動して、クロスドメインサポートの統合を有効にします。
注：クロスドメインサポートの統合を有効にすると、mouseflowの記録とヒートマップに表示されるURLも変更され、完全なドメイン名が含まれるようになります。たとえば、mouseflowがホームページを単に「/」として表示していた場合、ホームページは「www.yourdomain.com/」として表示されます。
高度：上記の注記のようにURLを変更したくない場合は、クロスドメインサポートの統合をスキップし、代わりに次のコードスニペットをmouseflowトラッキングコードに追加して手動で実装できます（最初の<script>タグのすぐ後）。
varmouseflowCrossDomainSupport=true;
B.ShopifyPlusアカウントの追加手順
次のガイドでは、残りのShopifyチェックアウトページを記録するようにmouseflowを設定する方法について説明します。
1.mouseflowトラッキングコードをcheckout.liquidレイアウトに追加します。
- Shopifyにログインします。
- 「テーマのカスタマイズ」>「テーマのカスタマイズ」>「カスタマイズ」に移動します。
- 画面の左下にある「テーマアクション」領域に移動し、「コードの編集」を選択します。
- レイアウトの下にある、checkout.liquidをクリックしてテンプレートファイルを開き、コードの一番下までスクロールします。
- ボディタグ</body>の直前に、以下に示すカスタマイズされたバージョンのmouseflowトラッキングコードを挿入します。
window._mfq=window._mfq||[];
if(window.location.href.indexOf(“checkouts”)>-1){
window._mfq.push([‘config’,’includeQueryStringInPath’,true])
};
(function(){
varmf=document.createElement(“script”);
mf.type=”text/javascript”;mf.defer=true;
mf.src=”//cdn.mouseflow.com/projects/your-website-id.js”;
document.getElementsByTagName(“head”)[0].appendChild(mf);
})();
- 挿入されたトラッキングコードのテキスト「your-website-id」を、mouseflow>「設定」にある実際のWebサイトIDに置き換えます。
- ウィンドウを閉じる前に、更新されたテーマを必ず保存してください。
2.URLを結合する
- mouseflowで、「設定」>「詳細設定」に移動し、/checkout/thank_you_pageの下に、次のMergeURLsルールを作成します。
| タイプ | パターン | エイリアス |
| 正規表現 | ^.*\/\d*\/checkouts\/.((?!previous|処理|thank_you).)*$ | /チェックアウト |
| 正規表現 | ^.*\/\d*\/checkouts\/.*previous_step=連絡先情報&step=発送方法 | /checkout/shipping_method |
| 正規表現 | ^.*\/\d*\/checkouts\/.*previous_step=発送方法&step=支払い方法 | /チェックアウト/支払い方法 |
| 正規表現 | ^.*\/\d*\/checkouts\/\w*\/express\/callback | /チェックアウト/エクスプレス/コールバック |
| 正規表現 | ^.*\/\d*\/checkouts\/.*previous_step=支払い方法&step=レビュー | /チェックアウト/レビュー |
| 正規表現 | ^.*\/\d*\/checkouts\/.*forward\?complete=1&previous_step=支払い方法&step= | /checkout/payment_abandoned |
| 正規表現 | ^.*\/\d*\/checkouts\/\w*\/処理中 | /チェックアウト/処理 |
- オプションの手順：ドメイン名を先頭に追加したり（クロスドメインサポート統合を有効にしている場合に推奨-ステップA.4を参照）、ページエイリアスとして他の名前を使用することによって、エイリアスをさらにカスタマイズできます。たとえば、/checkout/processingをyour-domain.com/checkout/processingまたは単にProcessingに変更できます。
- [保存]をクリックします。
注意事項
Googleタグマネージャー(GTM)を使用したインストール
ShopifyCMSを直接使用する代わりに、Googleタグマネージャー(GTM)を使用して、mouseflowトラッキングコードをShopifyチェックアウトページに追加することができます。
その場合、次のことを行う必要があります。
- サイトのすべてのページ(チェックアウトフロー全体を含む)でトリガーされるカスタムHTMLタイプのタグを作成します。
- サイトへのmouseflowトラッキングコードの追加に関連する手順(A.1とB.1)を除いて、上記のすべての手順に従います。
- ShopifyPlusアカウントをお持ちの場合は、ステップB.1で参照したmouseflowトラッキングコードのカスタマイズバージョンを使用してください。
正規表現の操作とパターンのカスタマイズ
Shopifyチェックアウトページに、上記の表に示されている正規表現パターンと同じロジックに従わないカスタムURL形式がある場合、ページが結合されていないことに気付くかもしれません。したがって、一致するようにMergeURLsルールを調整する必要があります。
さらに、Shopifyチェックアウトフローに追加のステップがある場合は、そのようなページをマージするための正規表現パターンをさらに作成できます。
この記事を参照していただくか、regex101.comにアクセスして、さまざまなRegex表現について練習および学習するか、パターンを検証してから、それらをmouseflowAdvancedSettingsに挿入することをお勧めします。
Shopifyチェックアウトページでファネルを作成する
クロスドメインサポートを有効にすることを選択し、Shopifyチェックアウトページと、あなたのサイトの他のページの両方を含むファネルを作成する場合は、ページパスフィールド下のMerge URLsルールで、あなたのサイトのページのフルURLとShopify Checkoutページに割り当てたエイリアスを含める必要があります。
例えば：
※mouseflow社の公式マニュアルを翻訳したものです。記事中の用語が実際の日本語表記と若干異なる可能性がございます。
