【新しい顧客アカウント対応】Shopifyで会員登録時に生年月日を収集する方法
はじめに
ECサイトのリテンション率を向上させる施策として、誕生日メールでクーポンを送付することは大変効果的です。また、誕生日にクーポンをプレゼントすることを顧客にご案内することで、ECサイトへの会員登録を促すことも可能でしょう。
本記事では、誕生日メール施策を実施するための準備として、StoreCRMを活用したShopifyの「生年月日フォーム」の追加についての具体的な設定方法や注意点について解説します。
従来のお客様アカウントとの違い
従来のお客様アカウントでは、テーマの
`customer/register.liquid` や
`customer/account.liquid` を編集して、生年月日フォームを追加していました。
一方、新しいお客様アカウントでは、パスワード式の会員登録ページではなく、メールに届くワンタイムコードでログインする仕組みになります。そのため、テーマの会員登録ページへLiquidコードを追加する方法は利用できません。
新しいお客様アカウントでは、Shopifyの「チェックアウトとアカウントエディタ」からStoreCRMのアプリブロックを追加し、以下のタイミングで生年月日を収集します。
- お客様アカウントのプロフィールページ
- 購入完了ページ
- 注文状況ページ
初回ログインや初回購入後に生年月日登録フォームを表示できるため、新しいお客様アカウントを利用しているストアでも誕生日メール施策に必要な情報を収集できます。
対応している表示場所
StoreCRMの新しいお客様アカウント対応では、以下のアプリブロックを利用できます。
- プロフィールページ ・・・会員ログイン後のマイページで生年月日を登録 。 もっとも基本の設置場所です。
- 購入完了ページ ・・・購入完了直後に生年月日を登録 。 初回購入後の登録促進に向いています。
- 注文状況ページ ・・・注文詳細確認時に生年月日を登録 。 購入後に再訪した顧客にも案内できます。
チェックアウトとアカウントエディタ上では、表示場所ごとに追加できる `StoreCRM Birthday` ブロックが表示されます。プロフィールページ、購入完了ページ、注文状況ページのうち、設置したいページを選択してからアプリブロックを追加してください。
誕生日がすでに登録されている顧客には、登録フォームは表示されません。プロフィールページでは登録済みの誕生日と補足文が表示され、再登録できない状態になります。
会員登録直後の収集率を高めたい場合
StoreCRMのアプリブロックは、プロフィールページ、購入完了ページ、注文状況ページで生年月日を収集できます。
一方で、新しいお客様アカウントでは従来のような会員登録フォームをテーマ側で自由に編集できないため、「ログイン・会員登録の直後に必ず追加情報の入力画面へ進めたい」という場合は、専用アプリの併用も有効です。
たとえば、Shopifyアプリの [新しいお客様アカウント 会員登録フォーム ‑ メタシンク]を利用すると、新しいお客様アカウントのログイン直後に会員登録フォームを表示できます。
👇インストールはこちら
https://apps.shopify.com/al-customermetasync
このアプリを使うことで、会員登録後すぐに生年月日入力フォームへ案内できるため、プロフィールページや購入完了ページで後から入力してもらう方法よりも、誕生日の収集率を高めやすくなります。
また、メタシンクでは誕生日だけでなく、電話番号、SMS同意、性別、プライバシーポリシー同意、アンケート項目なども顧客メタフィールドとして収集できます。
収集した生年月日をStoreCRMで利用する場合は、StoreCRMの `誕生日メタフィールド` と同じメタフィールド、たとえば `facts.birth_date` に保存されるように設定してください。
メタシンクはStoreCRMとは別アプリのため、料金、仕様、サポート範囲はアプリ提供元の案内をご確認ください。
事前準備
設定を始める前に、以下を確認してください。
- StoreCRMアプリがShopifyストアにインストールされていること
- Shopify管理画面の `[設定] > [お客様アカウント]` で、新しいお客様アカウントを利用していること
- 顧客がプロフィールページへアクセスできるよう、お客様アカウントのログインリンクが有効になっていること
- テスト用の顧客アカウントを用意できること
- 生年月日の取得目的を、プライバシーポリシーや会員登録導線などで顧客に案内していること
新しいお客様アカウントでは、既存のテーマLiquidやJavaScriptを直接編集する必要はありません。
顧客メタフィールドの作成
StoreCRMは、Shopifyのお客様メタフィールドに登録された生年月日をもとに、StoreCRM側の顧客データへ誕生日を反映します。
標準では、以下のShopify標準メタフィールドを使用します。
- ネームスペース・・・ `facts`
- キー ・・・ `birth_date`
- StoreCRMでの指定形式・・・`facts.birth_date`
- コンテンツタイプ ・・・日付
メタフィールドが未作成の場合は、以下の手順で作成してください。
誕生日登録欄を実装するには顧客のメタフィールドに誕生日を登録するフィールドを作成する必要があります。
➀shopify管理画面>[設定]>[メタフィールドおよびメタオブジェクト]>[お客様]をクリックします。
➁[定義を追加する]をクリックします。
③名前に[生年月日]と入力すると、下部に選択項目が出てくるのでクリックしてください。
④オプション＞お客様アカウントへのアクセスで[読み取りおよび書き込み]を選択、Storefront APIへのアクセスをオンにして、[保存]をクリックします。
すでに別のメタフィールドで生年月日を管理している場合は、ネームスペースとキーを控えておいてください。後続のStoreCRM設定で同じ値を指定します。
StoreCRMの顧客設定を確認する
StoreCRM側で参照する誕生日メタフィールドを確認します。
①StoreCRMアプリを開きます。
②[設定] > [顧客設定]を開きます。
③`誕生日メタフィールド` に `facts.birth_date` と入力されていることを確認します。
【この手順は任意です】④別のメタフィールドを使う場合は、`namespace.key` の形式で入力します。
例：`custom.birthday` のように、ネームスペースとキーをドットでつないで入力します。
⑤[保存]` をクリックします。
プロフィールページに生年月日登録フォームを追加する
本項目では、お客様アカウントのプロフィールページに生年月日登録フォームを追加します。
プロフィールページは、ログイン済みのお客様が自分の情報を確認する画面です。生年月日を未登録の顧客には登録フォームが表示され、登録済みの顧客には現在の誕生日と補足文が表示されます
本項目のゴール
お客様アカウントのプロフィールページに、StoreCRMの生年月日登録ブロックを表示します。
登録前は、生年月日入力欄と登録ボタンが表示されます。登録後は、同じ画面から誕生日を変更できない状態になります。
設定手順
➀Shopify管理画面から `[設定] > [チェックアウト]` を開きます。
➁[設定]` セクションで、編集したいチェックアウト設定の横にある `[カスタマイズ]` をクリックします。
③チェックアウトとアカウントエディタが開いたら、ページセレクターから `[プロフィール]` を選択します。
④左側の `[アプリ]` から `StoreCRM Birthday` を探します。追加先に `[プロフィール]`があるのでブロックを追加します。
⑤左側のお知らせバーから、該当のブロックをドラック＆ドロップして好きな位置に調整します。
⑥必要に応じて、右側の設定パネルで文言やボタンの見た目を変更します。最後に忘れずに保存をクリックします。
購入完了ページ・注文状況ページに生年月日登録フォームを追加する
プロフィールページだけでなく、購入完了ページや注文状況ページにも生年月日登録フォームを設置できます。
購入後のタイミングで誕生日クーポンの案内をしたい場合や、プロフィールページへ誘導する前に生年月日を収集したい場合におすすめです。
本項目のゴール
購入完了ページと注文状況ページのブロックは、顧客を特定でき、かつ誕生日が未登録の場合に表示されます。
購入完了ページへの追加
①先ほどと同じ要領で、チェックアウトのカスタマイズページを開きます。
②ページセレクターから `[サンキュー]` を選択します。
③左側のブロック追加から、`StoreCRM Birthday` を追加します。
④左側のお知らせバーから、該当のブロックをドラック＆ドロップして好きな位置に調整します。
⑤必要に応じて、右側の設定パネルで文言やボタンの見た目を変更します。設定後、`[保存]` をクリックします。
注文状況ページへの追加
①先ほどと同じ要領で、チェックアウトのカスタマイズページを開きます。
②ページセレクターから `[注文状況]` を選択します。
③左側のブロック追加から、`StoreCRM Birthday` を追加します。
④左側のお知らせバーから、該当のブロックをドラック＆ドロップして好きな位置に調整します。
⑤必要に応じて、右側の設定パネルで文言やボタンの見た目を変更します。設定後、`[保存]` をクリックします。
表示文言とデザインを調整する
StoreCRM Birthdayブロックでは、チェックアウトとアカウントエディタ上で以下の項目を変更できます。
- タイトル文言 …ブロック上部の見出しです。未設定時は `誕生日` と表示されます。
- 説明文言…生年月日入力欄の説明文です。未設定時はStoreCRM標準の案内文が表示されます。
- 登録ボタン文言… 保存ボタンの文言です。未設定時は `誕生日を登録する` と表示されます。
- 登録済み補足文…プロフィールページで誕生日登録済みのときだけ表示される文言です。
- ボタンスタイル… `primary`、`secondary`、`critical`、`monochrome`、`plain` から選択できます。
- 入力欄サイズ … `wide`、`middle`、`small` から選択できます。
- 入力欄配置 … `left`、`center`、`right` から選択できます。
- ボタンサイズ… `wide`、`middle`、`small` から選択できます。
- ボタン配置…`left`、`center`、`right` から選択できます。
[テクニック紹介]
プロフィールページの `登録済み補足文` では、以下の形式で問い合わせフォームへのリンクを設定できます。
誕生日は登録後、この画面から変更できません。変更が必要な場合は[お問い合わせフォーム](https://example.com/contact)よりご連絡ください。
リンクには `https://`、`mailto:`、`tel:` から始まるURLを指定してください。
動作確認をおこなう
設定が完了したら、以下の手順で動作確認を行います。
プロフィールページで確認する
1. 誕生日が未登録のテスト顧客を用意します。
2. ストアのお客様アカウントへログインします。
3. プロフィールページを開きます。
4. 生年月日登録フォームが表示されることを確認します。
5. 生年月日を入力し、`誕生日を登録する` をクリックします。
6. `誕生日を保存しました。` と表示されることを確認します。
7. ページを再読み込みし、フォームが再表示されず、登録済みの誕生日が表示されることを確認します。
購入完了ページ・注文状況ページで確認する
1. 誕生日が未登録のテスト顧客でテスト注文を行います。
2. 購入完了ページ、または注文状況ページを開きます。
3. 生年月日登録フォームが表示されることを確認します。
4. 生年月日を入力し、`誕生日を登録する` をクリックします。
5. 保存完了の文言が表示されることを確認します。
Shopify管理画面で確認する
1. Shopify管理画面から `[顧客管理]` を開きます。
2. 対象のテスト顧客を開きます。
3. メタフィールドの `生年月日` に、登録した日付が保存されていることを確認します。
StoreCRMで確認する
1. StoreCRMアプリを開きます。
2. `[顧客] > [顧客一覧]` を開きます。
3. 対象のテスト顧客をクリックします。
4. 顧客詳細の誕生日項目に、登録した生年月日が表示されていることを確認します。
ここまで確認できれば、生年月日収集の設定は完了です。
よくあるトラブル
StoreCRM Birthdayブロックが表示されない
以下を確認してください。
– StoreCRMアプリがインストールされているか
– Shopifyのチェックアウトとアカウントエディタを開いているか
– 新しいお客様アカウントを利用しているか
– 追加しようとしているページが、プロフィールページ、購入完了ページ、注文状況ページのいずれかか
ブロックが見つからない場合は、StoreCRMの対応状況を確認しますので、お問い合わせフォームからご連絡ください。
顧客画面にフォームが表示されない
以下の場合、フォームは表示されません。
– すでに誕生日が登録されている
– 顧客がログインしていない
– 購入完了ページや注文状況ページで顧客を特定できない
– StoreCRM側で顧客情報の取得中、または取得に失敗している
登録済み顧客で確認したい場合は、別のテスト顧客を用意してください。
誕生日を保存できない
以下を確認してください。
– 未来日を入力していないか
– 生年月日が正しい日付になっているか
– ShopifyとStoreCRMの連携が有効か
– StoreCRMの `誕生日メタフィールド` が `namespace.key` の形式になっているか
短時間に何度も保存を試した場合、一時的に保存が制限されることがあります。時間をおいてから再度お試しください。
誕生日を変更したい
誕生日は登録後、お客様アカウントの画面からは変更できません。
登録内容の修正が必要な場合は、Shopify管理画面の顧客メタフィールドを編集するか、StoreCRMサポートへご相談ください。
従来のお客様アカウントでも同じ手順で使えますか？
従来のお客様アカウントを利用している場合は、本記事の手順ではなく、テーマの会員登録ページやマイページにフォームを追加する従来版の設定手順を利用してください。
Shopifyで会員登録ページに生年月日フォームを設置する方法
まとめ
新しいお客様アカウントでは、テーマのLiquidコードを編集するのではなく、チェックアウトとアカウントエディタからStoreCRMのアプリブロックを追加して生年月日を収集します。
StoreCRMを活用することで、Shopifyの新しいお客様アカウントでも誕生日メール施策に必要な生年月日を収集し、誕生日配信や誕生月配信に活用できます。
また、StoreCRMではアプリに関わる設定の無料サポート（設定代行）や導入いただいたお客様への売り上げアップのためのご提案も
おこなっております。
お問い合わせフォームからご気軽にご相談ください。
