メインコンテンツまでスキップ

会員情報登録フォームの設定とお客様情報の取得

このページでは、AL CustomerMetaSync（メタシンク）の 会員情報登録フォームを設定し、新しいお客様アカウントの初回ログイン時にお客様情報を取得する手順をご紹介します。

通常、Shopifyの標準機能であるワンタイムパスワード（OTP）を利用したログイン方式では、お客様の詳細情報を取得することができません。しかし、メタシンクを活用することで、姓名や電話番号、SMS購読の可否といったShopify標準データに加え、誕生日や性別、プライバシーポリシーへの同意といった「メタフィールド」の情報まで収集が可能になります。

これにより、新しい顧客アカウントに移行した場合でも、従来の顧客アカウント形式と同様の柔軟な運用を実現できます。

OTP認証後に表示される会員情報登録フォーム

ステップ1：会員情報登録フォームの作成​

アプリ管理画面で会員情報登録の画面を開きます。

会員情報登録フォームの初期画面

会員情報登録フォームをまだ作成していない場合は、2つのオプションのいずれかを選択して作成します。

  • オプション1 「既存のお客様にはフォームを表示しない」を選択した場合：完全に新規ログインのお客様にだけに作成した会員情報登録フォームが表示されます。既存のお客様は自動的に回答済みとして処理されるため、フォームは表示されません。

  • オプション2 「既存のお客様にもフォームを表示する」を選択した場合：既存のお客様を含むすべてのお客様に次回のログイン時に、会員情報登録フォームが出現します。しかし、取得したい情報を全て取得しているお客様には会員情報登録フォームは表示されません。

オプション2の活用方法として、ECカートのリプレイスなどで、一部データが欠損しているお客様や、姓名が1カラムになっており、リプレイス時に正しく姓名を分割して2カラムで入力していただきたい場合などのシーンでご活用いただくのをお勧めします。

ステップ2：表示するフォーム内容を設定​

会員情報登録フォームに表示したい項目を選択し、タイトル、サブタイトルやヘッダー画像などを必要に応じて調整します。

この画面で設定した内容が、初回ログイン時にお客様へ表示されるフォームになります。

会員情報登録フォームの設定画面

ステップ3：保存して設定を反映​

設定内容を保存すると、会員情報登録フォームの準備が完了します。

保存後は、設定が有効になっていることを確認してください。

会員情報登録フォームの設定完了画面

◆オプション機能

「送信後に元のページに戻る」をチェックした場合、お客様は会員情報登録フォームを提出後に、ログイン前に見ていたページに戻ります。この設定をチェックすると、お客様の購買体験を損ないません。

一方で、「送信後に元のページに戻る」をチェックを外した場合、会員情報登録フォームを提出後にお客様を任意のページに遷移させることが可能です。例えばLINE連携アプリをご使用で、連携率を上げたい場合、プロフィールページに遷移させるのは1つのアイデアとなります。

会員情報登録フォームの設定完了画面

💻 制作者向け​

メタシンクの会員情報登録フォームでは、assetsフォルダ以下に特定ファイル名でCSS, JSファイルを作成することで、UIやバリデーションなどの調整が可能となります。

詳細説明については、会員情報登録フォームのカスタマイズをご確認ください。

ステップ4：テーマエディタでApp embedsを有効化​

Shopify管理画面から オンラインストア > テーマ > カスタマイズ を開き、埋め込みアプリ でメタシンクの埋め込みアプリを有効化します。

⚠️ この設定を有効化しないと、会員情報登録フォームがワンタイムパスワードの直後に表示されません。

App embedsの有効化画面

設定を有効化したにも関わらず、会員情報登録フォームが表示されない場合、2つの理由が考えられます。

  1. アプリがご使用中のテーマに対応していない
  2. ログイン周りのコードがカスタマイズされており、アプリがログイン周りのコードを上書きできない

1の場合、まずはログイン周りのコードを確認する必要があります。 Shopifyの主要なテーマでは、公式ドキュメントのテーマにお客様ログインリンクを追加するにあるように設定されています。ドキュメント記載の方法に変更することで、メタシンクは正しく動作します。

もしコードの編集が難しいなどあれば、アプリページの「サポートに連絡する」ボタンからご連絡ください。 コードの改修までサポートさせていただきます。

2の場合、カスタマイズされているコードを1のように編集いただくか、Shopifyが標準で提供しているCustomer sign-in links and redirects の機能を使って編集ください。

まずは、ログインボタンのコードを探してください。 対象のコードを見つけた後で、以下のようにコードを書き換えてください。

<a href="/customer_authentication/login?locale={{ localization.language.iso_code }}&return_to={{ "/apps/al-customermetasync/onboarding" | url_encode }}">

アプリ側の設定で、フォーム送信後のリダイレクトURLを指定している場合、上記の書き換えで、会員情報登録フォームの提出後にメタシンクで設定している任意のページに遷移します。

ステップ5：初回ログイン後の表示を確認​

新しいお客様アカウントでログインし、ワンタイムパスワード(OTP)認証後に会員情報登録フォームが表示されることを確認します。

表示されたフォームから送信された値は、設定したメタフィールドへ保存されます。

OTP認証後に表示される会員情報登録フォーム

補足​

  • 既に会員情報登録フォームの項目で、値がある項目は、表示されません。
  • 会員情報登録フォームが未回答でも、データの移行や他の接点で質問項目全てに対して回答がある場合、フォームの表示はスキップされます。
  • フォーム送信後のデータ活用には、Shopify Flow連携もあわせてご利用ください。