＊本サイトはアフィリエイトプログラムを利用しています。
テーマエディターからサンクスページを編集することができないため、カスタマイズする方法がないと思われがちですが、要素の追加、スクリプトの設置など、ある程度カスタマイズすることが可能です。
サンクスページをうまくカスタマイズすれば、効果的なマーケティング施策を実施することも可能になります。
代表的なカスタマイズとしては次のような例があります。
- LINEの友達追加ボタンを挿入する
- クーポンコードを表示する
- キャンペーンを告知する
実際にカスタマイズする方法について解説します。
目次
Shopifyのサンクスページをカスタマイズする方法
Shopifyのサンクスページ・注文状況ページをカスタマイズするには、２つ方法があります。
追加スクリプトでカスタマイズ
追加スクリプトとは、「ストアの管理画面 > 設定 > チェックアウト 」にあります。
このボックスでは、以下のコードを使ってカスタマイズすることができます。
Shopifyアプリでカスタマイズ（Shopify Plus限定）
Shopify Plusプランをご利用のストアであれば、Shopifyアプリでより柔軟にサンクスページをカスタマイズができます。
必要に応じてカスタムアプリとして開発することもでき、自社ストア独自のマーケティングに役立てることができます。
サンクスページをカスタマイズできる公開アプリには次のようなものがあります。
追加スクリプトを使ったカスタマイズ手順
追加スクリプトを使ったカスタマイズ手順をご紹介します。
ただし、カスタマイズにはHTML、CSS、JavaScript、Liquidといったプログラミング言語の知識が必要です。
以下の手順を実行するのが不安な場合は、Shopifyパートナーを雇うことをおすすめします。
条件分岐する方法
条件分岐にLiquid言語を使います。
{% if 条件式 %}
条件が正の時に実行する処理
{% endif %}if文の中に、スクリプトを書くことで処理が実行されます。
条件式の書き方は、下記の演算子を使います。
==: 左辺と右辺が等しい>: 左辺より右辺が小さい<: 左辺より右辺が大きい
例えば、購入金額が10,000円より大きい場合の条件式は次のように書きます。
checkout.total_price > 10000特定条件でクーポンの表示
例えば、合計購入金額が10,000円を超えた場合にクーポンを表示させる場合を考えます。
注文金額は、 checkout オブジェクトの total_price から取得できるので、条件分岐としては次の構文になります。
{% if checkout.total_price > 10000 %}
条件が正の時に実行する処理
{% endif %}次に、クーポンを表示させるには、 Shopify.Checkout.OrderStatus.addContentBox JavaScriptアセットを使用してコンテンツボックスが生成されるように命令します。
このアセットを使用することで、サンクスページにコンテンツを挿入できるようになります。
{% if checkout.total_price > 10000 %}
<script> Shopify.Checkout.OrderStatus.addContentBox('<h2>限定プレゼント</h2>', `<div><strong>クーポンコード：</strong><a href="#"> A13B48</a></div>` );
</script>
{% endif %}
このカスタマイズには、Liquid, HTML, JavaScriptの知識が必要になります。
不安がある場合は、Shopify構築を請け負っている制作会社などに相談するようにしてください。
リピート率を上げるサンクスページのアイデア
Shopifyのサンクスページをカスタマイズしてリピート率を上げるためには、顧客の満足度を高め、次回の購入を促すような要素を取り入れることが重要です。
以下にいくつかのアイディアをご紹介します。
- パーソナライズされたメッセージ: 顧客の名前を使ったパーソナライズされた感謝のメッセージを表示します。これにより顧客は特別感を感じ、ブランドに対する好意を高めることができます。
- 割引コードや特典の提供: 次回購入時に使用できる割引コードや特別オファーを提示します。これは顧客に再購入のインセンティブを与えます。
- 関連商品の推薦: 購入した商品に関連する商品や、その他の人気商品を紹介します。顧客が興味を持ちやすい商品を選ぶことで、追加購入に繋がる可能性があります。
- ソーシャルメディアへの誘導: 顧客にソーシャルメディアでのフォローを促し、最新情報やプロモーションを共有します。SNSでのエンゲージメントは長期的な顧客関係の構築に役立ちます。
- レビューの依頼: 購入後に商品やサービスのレビューを依頼します。顧客の意見を尊重する姿勢を示すとともに、ポジティブなレビューは他の顧客への良い影響を与えます。
- 教育的コンテンツの提供: 製品の使い方や関連する情報を提供することで、顧客に価値を提供します。これにより、ブランドへの信頼と関与を深めることができます。
これらの要素を組み合わせることで、顧客の満足度を高め、リピート購入につなげることが期待できます。
また、顧客の行動やフィードバックを分析し、継続的にサンクスページを最適化することが重要です。
ShopifyでCVタグを設置する方法について
LPなどの静的ページと違い、Shopifyのサンクスページは動的に変更されます。
https://ドメイン/動的な数値/checkouts/動的な数値と文字列/thank_youそのため、サンクスページのCV計測をURLをトリガーにする場合、動的な値に対応できるようにしなければなりません。
サンクスページをCV計測するために、正規表現を使って動的な値に対応できるようにします。
正規表現とは？
正規表現は、特定の記号や文字を使用して、文字列のパターンマッチングを行うための強力なツールです。
正規表現の記載方法について
正規表現の基本的な要素には以下のようなものがあります。
- リテラル: 通常の文字。特定の文字を直接検索します。
- メタ文字: 特殊な意味を持つ文字。例えば、
.（ドット）は任意の単一文字にマッチします。 - 文字クラス: 特定の文字セットにマッチします。例えば、**
[a-z]**は任意の小文字のアルファベットにマッチします。 - 量指定子: どれだけの頻度でパターンが繰り返されるかを指定します。例えば、**“**は0回以上の繰り返しを意味します。
- 位置指定子: 文字列の特定の位置にマッチします。例えば、**
^は文字列の開始部分、$**は終了部分にマッチします。
正規表現の記号や使い方
以下に、よく使われる正規表現の記号について紹介します。
| 記号/構文 | 説明 | 例 | 例のマッチ |
|---|---|---|---|
| . | 任意の単一文字 | a.c | “abc”, “adc” |
| ^ | 文字列の開始 | ^abc | “abcde”, “abcdef” |
| $ | 文字列の終了 | abc$ | “myabc”, “theabc” |
| * | 直前の文字の0回以上の繰り返し | ab*c | “ac”, “abc”, “abbc” |
| + | 直前の文字の1回以上の繰り返し | ab+c | “abc”, “abbc” |
| ? | 直前の文字の0回または1回の出現 | ab?c | “ac”, “abc” |
| [ ] | 指定された文字セットのいずれか一文字 | [abc] | “a”, “b”, “c” |
| – | 文字の範囲指定 | [a-z] | 任意の小文字 |
| ^ (文字クラス内) | 文字クラスの否定 | [^a-z] | 小文字以外の文字 |
| \\d | 任意の数字 | \\d | “2”, “9” |
| \\w | 任意の単語文字 | \\w | “a”, “Z”, “0”, “_” |
| \\s | 任意の空白文字 | \\s | スペース, タブ, 改行 |
| . (エスケープ) | メタ文字のリテラルマッチ | \\.com | “.com” |
| {n} | 直前の文字のn回繰り返し | a{3} | “aaa” |
| {n,} | 直前の文字のn回以上の繰り返し | a{2,} | “aa”, “aaa”, “aaaa” |
| {n,m} | 直前の文字のn回以上、m回以下の繰り返し | a{2,4} | “aa”, “aaa”, “aaaa” |
この表は正規表現の基本的な要素をまとめたものですが、実際の使用ではこれらの要素を組み合わせてより複雑なパターンを作成することができます。
正規表現は非常に柔軟で強力なツールなので、練習を通じて様々なパターンに慣れることが重要です。
これにより、Shopifyのサンクスページにマッチする正規表現は次の通りです。
.*/checkouts/.*/thank_youGoogle Tag Managerを使用して設定する方法
Google Tag Manager（GTM）を使ってCV計測をする場合、サンクスページのみで発火させるようトリガーを作成します。
トリガーの作成
- トリガーの新規作成:
- GTMダッシュボードの「トリガー」セクションに移動し、「新規」をクリックします。
- トリガータイプの選択:
- 「トリガーの設定」で、「ページビュー」を選択します。
- トリガーの条件設定:
- 「ページビュー」のタイプとして「一部のページビュー」を選択します。
- 「トリガーが発火する条件」で、URLに関する条件を設定します。例えば、「ページURL」が「サンクスページのURL」に一致する場合などです。ここで、先に作成したサンクスページのURLにマッチする正規表現を使用します。
- トリガーの保存:
- トリガーに名前を付け（例：「サンクスページのトリガー」）、保存します。
トリガーを「保存」して、CVタグの発火条件にこのトリガーを設定します。
最後にこの変更を「公開」すれば設定完了です。
サンクスページを効果的にカスタマイズしましょう
Shopifyのサンクスページをカスタマイズする方法について解説しました。
カスタマイズするには、HTML、JavaScript、Liquidの知識や、CVタグの設置ではGTMの使い方や正規表現の理解が必要になります。
もし間違ったコードを書くとトラブルの原因になり、CV計測がしっかりできていないとマーケティング施策にも悪影響があります。
曖昧な理解のままカスタマイズするのではなく、自分でわからないことがある場合にはShopify構築を請け負っている制作会社に依頼することを検討しましょう。
監修：株式会社Forest Book 代表取締役 森本竜治
Shopifyアプリ開発およびストア構築に特化したフルスタックエンジニア。Shopifyのアプリ開発を学べるテックギークを運営している。
執筆：鈴木由将
Webエンジニア歴4年以上。会社員として Ruby on Rails を用いたアプリ開発に携わる傍ら、自己学習にてReact.jsを習得（実務での使用経験あり）。「システムではなくサービスを作ること」をモットーに、エンジニアとしてただ技術力を提供するのではなく、その先にある「自分が提供する価値」を大切にしている。
株式会社プレイビット
Shopifyを活用したECサイトの構築・運用の支援サービスを提供しています。
Shopifyの制作・運用に特化したプロ集団が、トータルサポートさせていただきます。ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。
