クライアントのためにShopifyのメール通知をカスタマイズする方法

Shopifyのメール通知をカスタマイズすることは、お客さまとのコミュニケーションを最適化したいクライアントからよく聞かれるリクエストです。

Shopifyのメール通知をカスタマイズすることは、お客さまとのコミュニケーションを最適化したいクライアントからよく聞かれるリクエストです。また、Shopifyストアをパーソナライズするためのもっとも簡単な方法といえます。慎重にデザインされたメールはパワフルなコミュニケーションツールであり、購入プロセスのさまざまなタッチポイントで人間味をもたらします。とくにBFCMのような繁忙期には、特別な価値のあるツールです。

このようなタイプのメールは、ビジネスメールのフォーマットとは異なり、配送状況、カゴ落ち、アカウントのアップデート等に応じて自動で送信されます。つまり、幅広いスコープでカスタマーエクスペリエンスを向上させることが可能です。メールのカスタマイズという付加価値をクライアントに売り込むことで、あなたはプロジェクトの価値は高めることができます。

今回の記事では、Shopifyのメール通知に追加機能を付加する実践的な方法と、Liquidの専門的な使い方を解説します。 

なぜメール通知をカスタマイズする必要があるのか？

オンラインビジネスは多岐にわたるチャネルで展開されるようになり、お客さまはすべてのタッチポイントでシームレスな体験ができることを期待しています（例としてサブスクリプションベースのメールマーケティングを考えてみてください）。即効性のあるUX要素と比べてメールは過小評価されがちですが、すべてのお客さまがメール通知を受け取ることを考慮するなら、クライアントのお客さまと効果的で適切なメールコミュニケーションをおこなうことは決定的に重要です。

パーソナライズされたメールにより、クライアントはブランドの一貫性のあるテイストを維持できます。ブランドに合った画像を使い、ブランドのトーンを持った表現に書き換えることで、オーディエンスにより近づくことが可能になります。

また、これらの通知にコンテンツを追加して、クライアントの商品価値を強調することもできます。商品の取扱説明をテキストで書き加えたり、ビデオのリンクを貼ったりすることが考えられます。

カゴ落ち通知メールに関しては戦略が大切で、送り方次第で新たなマーケティング機会が開かれます。割引コードを適用すればクライアントはコンバージョンを向上できるでしょう。割引はセールスをクローズさせるインセンティブになるからです。 

メール通知をカスタマイズする方法

Shopifyはユーザーのさまざまなアクションに応じて通知を送信します。注文確認やカゴ落ちなどを含め、16種類の通知があります。

これらの通知テンプレートは、個々にHTMLとCSSのカスタマイズが可能です。つまり、クライアントのブランドを表現できる余地が多いにあります。クライアントごとに、どのようなカスタマイズが最適なのかを見極めることが大切です。

メール用のLiquid変数はいろいろあるので、目的に応じて使い分けましょう。出力表示したいのが顧客情報であっても商品機能であっても、クライアントのためにメール通知を改良する機能が見つかるはずです。

これらのことを念頭に置いたうえで、高度なShopifyメール通知機能を追加するのに役立つ2つのカスタマイズ方法をご紹介します。

1. Liquidオペレーターを使って条件付きコンテンツを追加する

Liquidの条件オペレーターを使用すると、メール内で個別商品ごとに特定コンテンツを表示させることが可能になります。ifステートメントを使えば、設定条件を満たす商品にテキストや画像を付け加えられます。

Liquidオペレーターのほかにも、ラインアイテムオブジェクトを使って、ユーザーのカート内にある商品プロパティを参照することが可能です。個々のラインアイテムはユーザーのカート内にある1つのラインを表し、メール通知において商品の個別プロパティを独立させるために使用できます。さまざまな変数の詳細は、Liquidドキュメントでご確認いただけます。

たとえば、クライアントが特定のインストラクションを必要とする商品セットをもっているとします。おそらく、ダウンロードできる商品で、開始するまでにいくつかのステップが必要なのかもしれません。こうしたケースの場合、Liquidのifステートメントを使って、商品に特定のワードが入っている場合などにインストラクションを表示するようにします。

ifステートメントでcontainsを使用し、特定ワード（例：”Book”）がタイトルにあるかを確認するコードは、次のようになるでしょう。

{% if line.title contains 'Book' %}

    <p>These are the instructions for the Book</p>

{% endif %}

このメッセージを表示させる場所はあなた次第ですが、通常は商品タイトルの下になることが多いはずです。今回の例では、line.variant.titleを含むセルの中、</td>タグの上になります。以下が、コードのイメージです。

これで、お客さまがタイトルに”Book”を含む商品を購入すると、注文確認通知メールで特定のメッセージが商品タイトルの下に表示されます。お客さまが見るメールはこのようになります。

これはシンプルな方法ですが、メールに特定コンテンツを表示させる強力な手法です。また、購入後のアクションやインストールなどが必要な場合に、お客さまのフラストレーションを軽減する効果があります。単純にフレンドリーなメッセージを商品ごとに送信したいとクライアントが望んでいる場合でも、通知メールにクリエイティビティを付加するパーフェクトな方法といえます。

2. カート放棄メールにディスカウントコードを適用する

Baymard Instituteによると、オンラインショッピングで買い物を完了する前に69％のカートが放棄されています。これは、あなたのクライアントにとって膨大な売上ロスです。カゴ落ちのリカバリーは大きな課題であり、ここで結果を改善できれば、クライアントのプロジェクトに多大な価値を付加できる（潜在的に請求金額を上げられる）わけです。

一般的にカゴ落ち通知メールは、潜在顧客が「離脱」してから数時間以内に送信されます。そのため、もしディスカウントコードなどがメールに記載されていれば、購入を完了するモチベーションになります。幸い、お客さま候補の人々に向けてカゴ落ちリカバリーメールを送る際、自動で割引を適用することが可能です。

これを実現するには、割合ディスカウントコードか定額ディスカウントコードをまず作成しておく必要があります。クライアントの希望に応じてプロモーションのタイプを選択しましょう。ディスカウントが作成できたら、コードに名前を付けます（例：”WelcomeBack”）。この名前は、通知テンプレートをカスタマイズするときに使用します。

次に、カゴ落ち通知テンプレートで、”購入を完了する”ボタンの遷移先を変更する必要があります。通常、このボタンをクリックするとチェックアウトページに飛び、お客さまが前回選択した商品が読み込まれます。これと同じプロセスをとるのですが、作成したディスカウントを適用するため、デフォルトURLをディスカウント適用後のURLに変更します。

以下の内容を含む行を見つけてください。

<td class="button__cell"><a href="{{ url }}" class="button__text">Complete your purchase</a></td>

それから、{{ shop.url }}を含む行も探します。

このURL変数を、コードスニペットに置き換える必要があります。スニペットはディスカウントを含めるためにURLにテキストをappendするものです。コードは下記のようになります。

{% if url contains '?' %}

    {{ url | append: '&discount=WelcomeBack' }}

{% else %}

    {{ url | append: '?&discount=WelcomeBack' }}

{% endif %}

{{ shop.url }}と{{ url }}を上述のスニペットに置き換えると、通知メールのコードは以下のようになっています。

最後に、ディスカウントが適用されることをカゴ落ち通知テンプレートに記載します。次のような感じです。

これで、お客さまがメール内のCTA（Call-To-Action）ボタンをクリックすると、クライアントストアのチェックアウトページに移り、割引適用後の商品が表示されます。クライアントのコンバージョンを上げるための最良の方法です！

テストを忘れずに！

どんなデザインであるかに関係なく、お客さまの観点からメールがどう見えるかをそれぞれのメールごとにテストする必要があります。最終プロダクトがクライアントのお客さまにどのような感情をもたらすものなのか、わたしたちは開発者としてつねに考えておくべきです。通知設定ページには、テストのための2つのオプションがあります。通知のプレビュー、またはテストメールの送信です。

プレビュー機能は、すぐに編集をおこなう際には有用ですが、テンプレートの作成が終わったらテストメールを送信することをお勧めします。実際のテスト注文をやってみるのがさらに効果的です。見過ごしていたペインポイントが見えてくることもあります。すべてが問題なくスムーズに運用できていることをしっかり確認しましょう。

原文：Liam Griffin 翻訳：深津望

 

よくある質問

メール通知をカスタマイズしたほうがいい理由は？

オンラインビジネスは多岐にわたるチャネルで展開されるようになり、お客さまはすべてのタッチポイントでシームレスな体験ができることを期待しています。お客さまと効果的で適切なメールコミュニケーションをおこなうことは決定的に重要です。
メールをパーソナライズすることで、クライアントはブランドの一貫性のあるテイストを維持できます。ブランドに合った画像を使い、ブランドのトーンを持った表現に書き換えることで、オーディエンスにより近づくことが可能になります。

Shopifyのメール通知にはどのようなものがありますか？

Shopifyはユーザーのさまざまなアクションに応じて通知を送信します。カスタマイズ可能なメールテンプレートの種類については、こちらをご覧ください。

メールに条件付きコンテンツを追加する方法は？

Liquidの条件オペレーターを使用すると、メール内で個別商品ごとに特定コンテンツを表示させることが可能になります。if ステートメントを使えば、設定条件を満たす商品にテキストや画像を付け加えられます。

Liquidオペレーターのほかにも、line_item object を使って、ユーザーのカート内にある商品プロパティを参照することが可能です。さまざまな変数の詳細は、Liquidドキュメントでご確認いただけます。

カゴ落ちに有効なメール通知とは？

Baymard Instituteによると、オンラインショッピングで買い物を完了する前に、69％のカートが放棄されています。
一般的にカゴ落ち通知メールは、潜在顧客が「離脱」してから数時間以内に送信されます。そのため、もしディスカウントコードなどがメールに記載されていれば、購入を完了するモチベーションになります。