Shopify(ショッピファイ)顧客データツールキット Helium Customer Fields を解説

デフォルトの Shopifyのアカウント登録フォームは非常にシンプルでメルマガ配信の許諾をとることもできません。今回は、アカウント登録フォームをカスタマイズしたい、できればマーケティング分析・施策に必要な属性情報をもっと収集したいというマーチャントのニーズを実現できる Helium Customer Fieldsというアプリをご紹介します。

Helium Customer Fieldsとは

Helium Customer Fields は、オリジナルの顧客登録フォーム、メルマガ登録フォーム、問い合わせフォームにより、氏名、メールアドレスだけでなく、様々な顧客データの収集を可能にするアプリです。登録されたデータに応じたタグ付けで顧客を自動的にグルーピングすることもできます。また、一括インポート/エクスポートも対応しています。顧客データはユーザー自身がマイページから変更することも可能です。

Helium Customer Fieldsのインストール

アプリストアから Customer Fieldsをインストールする

Shopifyのダッシュボードの「アプリ管理」から Shopifyアプリストアを開いて、Helium Customer Fieldsを検索してインストールします。Helium Customer FieldsをインストールするとHelium Customer Fieldsのプランを聞いてきますので、適切なプランを選択します。

・料金プラン

Shopifyの顧客データをインポートするか

プランを選択すると、続いて Shopifyに登録済みの顧客データを Customer Fieldsにインポートするかどうかを聞いてきます。ここでは自動インポートしないで進めます。

Helium Customer Fieldsのダッシュボード

インストールが完了するとHelium Customer Fieldsのダッシュボードが表示されます。

Helium Customer Fieldsでフォーム作成

新しいフォームを作成

Helium Customer Fieldsのメニューで「Forms」をクリックします。初めてのフォーム作成の場合は「Get started」と表示されるので、そのボタンをクリックします。

Add formの画面が開きます。

「Name your form」にはフォームの名前を指定し、「Account options」は顧客がアカウント登録フォームから登録操作を行ったときのオプションを指定することができます。通常は Defaultで良いと思います。

画面を下にスクロールすると「Select your template」でフォームの基本デザインを選択することができます。ラジオボタンをクリックすると、それぞれのプレビューを確認することもできます。

Standardのプレビュー

Modernのプレビュー

Addressのプレビュー

Demographicsのプレビュー

B2B/Wholesaleのプレビュー

「Name your form」、「Account options」、「Select your template」を設定したら「Continue」ボタンをクリックします。

フォームのカスタマイズ

続いてフォームをカスタマイズすることができます。まずは「Form editor」でフォームをデザインします。左端にあるアイコンをクリックすると入力フィールドの種類を変更することができ、各種類ごとに用意されている入力フィールドをフォームに追加することができます。

「Add all standard fields」ボタンですべての入力フィールドをフォームに追加することもできますし、１つずつドラッグ＆ドロップで追加することもできます。

入力フィールドのカスタマイズ

フォームエディタの右側でフィールドを選択すると、エディタの左側に表示される各種設定で入力フィールドのカスタマイズができます。また、入力フィールドの表示位置を変更する場合はフィールドの左端のハンバーガーメニューのようなアイコンをドラッグします。削除する場合はフィールドの右下の赤いバケツをクリックします。

フォームエディタの左側の設定項目を下にスクロールすると「VALIDATION」という設定があります。ここで、選択中の入力フィールドが必須かどうか、入力漏れしたときのエラーメッセージを編集することができます。「Required」をチェックして必須項目とした場合は、フォーム上で項目名の右側に *印（アスタリスク）が表示されます。

また、「Add varidation rule」ボタンをクリックするとさらに詳細なチェックを追加することもできます。

条件式は次のような種類があります。

パスワードのバリデーションチェック

Shopify標準のパスワードルールは「5文字以上」のみとなっており、「数字/英字/特殊文字」の組み合わせ制限などの会員パスワードのルールを提供していません。しかし、本アプリを利用することで「会員新規登録画面」と「会員情報変更画面」には、パスワードのバリデーションチェックが設定可能です。

設定方法

FormのパスワードのVALIDATIONに新たにバリデーションルールを追加し、該当箇所に以下のものを選択、追加します。
※ここでは、「半角英数字をそれぞれ1種類以上含む8文字以上100文字以下」として設定します。

ドロップダウン：「Must match regular expression」を選択
バリデーション：(/^(?=.?[a-z])(?=.?\d)[a-z\d]{8,100}$/i)
ErrorMessage：半角英数字をそれぞれ1種類以上含む8文字以上100文字以下に指定してください。（例）

会員新規登録画面に遷移します。「半角英数字をそれぞれ1種類以上含む8文字以上100文字以下」のルールに反するパスワードを入力し、Create accountボタンを押下すると入力エラーが表示され、パスワードが登録できないことを確認できれば設定は完了です。

入力フィールドの種類

入力フィールドの種類は次のようなものがあります。

また、フォームを修飾するための区切りやHTMLブロックなどのディスプレイフィールドも用意されています。

都道府県の入力フィールドについて

「Address fields」の「State/Province」が日本の場合は都道府県に該当しますが、これを使うとフォームのプルダウンは「Hokkaido」、「Aomori」、、と英語表記になってしまいます。

ですので、日本語の都道府県を選べるようにしたいときは、「Custom input fields」の「Dropdown」を利用します。「Dropdown」をフォームに追加したら

そのフィールドをクリックして詳細設定を開き、「Data column」の「Edt」をクリック。

「Data column」の選択肢から「Province (default_address.province)」を選択します。

続いて、「CHOISES」の「Separate values」のチェックボックスをチェックして、下方に表示される表に 47都道府県を登録します。「Label」が日本語名、「Value」が英語名です。

表の右上のオプションボタンからCSVインポートも可能です。CSVファイルの文字コードは utf-8なのでご注意ください。

入力フィールドの保存先

「Standard fields」および「Address fields」のフィールドに入力されたデータは  Shopifyの標準カラムに保存され、「Custom input fields」で作成されたフィールドに入力されたデータは、デフォルトでは Shopifyのメタフィールドに保存されます。

フォームのプレビュー

メニューの「Preview」はその名のとおりフォームのプレビューを確認することができます。

ルール

「Rules」はフォームの入力フィールドを条件にアクションを付与することができます。最初は下図のような画面が表示されますので、「Add rule」ボタンをクリックしてルールを作成します。

そしてルール設定画面では、「Add condition」で条件を追加し、「Add action」で条件が整ったときのアクションを設定します。

例えば、フォームの「パスワード」のフィールドが空のときは「パスワード確認」のフィールドを非表示にし、「パスワード」に入力されたら（空でなくなったとき）「パスワード確認」のフィールドを表示する場合は下図のような設定をします。

会員登録フォームなどで、最初からたくさんの入力項目があると、それだけで辟易して離脱してしまうお客様もいると思いますが、この「Rules」を使えば EFO（入力フォームの最適化）を実現し、お客様の入力負担の軽減・離脱防止につなげることも可能です。

セッティング

「Settings」はフォームの基本設定を行うメニューです。

General

Redirect options

Account options

Language

フォーム上の規定のラベルやボタン、メッセージなどをローカライズすることができます。

インストレーション

「Instllation」は作成したフォームを適用するテーマやインストール先を指定して、テーマをアップデート、もしくはフォームのアンインストールができます。

保存

設定が終わったら必ず「Save」ボタンを押すのを忘れないようにご注意ください。

Helium Customer Fieldsの顧客管理

Customers

Helium Customer Fieldsの左メニューの「Customers」をクリックすると顧客管理画面が表示されます。まだ登録されたデータが存在しない場合は、下図の表示になります。「Add customer」ボタンで一名ずつ顧客登録したり、「Import customers」ボタンで一括インポートすることもできます。「Change sync settings」でインポート時や新規顧客登録時の Shopifyとの同期方法等を設定することができます。

すでに登録された顧客は一覧で確認することができ、「+ Add filter」で絞り込みを行うこともできます。顧客データの取り扱いはご注意が必要ですがエクスポートも可能です。

Helium Customer Fieldsのデータカラム

Data columns

「Standard columns」タブで標準項目を確認できます。「Form columns」タブではフォーム作成時に追加したメタフィールドの項目、「Other columns」はこの画面の「Add data columns」で追加したオリジナルの項目を管理できます。特殊なフォームを作成するのでない限り、使うことはないのではないでしょうか。詳細は Helium社のヘルプ（英語）をご覧ください。

Liquidの編集

customer-fields.liquid

レアケースかもしれませんが、customer-fields.liquidを編集する場合があります。ただし、Customer Fieldsの管理画面でフォームを更新すると Liquidファイルが上書きされてしまいますので、直接編集した箇所は再度カスタマイズしなければなりません。

cf_form_data.XXXXXX.json

これもレアケースかと思いますが、フォームの設定情報を直接書き換える場合はcustomers/account.edit.liquid 等を開いて Customer FieldsのフォームIDを確認して、

Assetsフォルダにある cf_form_data.XXXXXX.json（XXXXXX：フォームID）を更新することでフォームの設定を変更することも可能です。

Helium Customer Fieldsはお客様にアカウント登録していただくフォームを簡単かつお客様に負担をかけないデザインで作成することができる優れたアプリです。ヘルプが英語しかないので少し取っ付きにくいところはありますが、工夫しだいでマーケティング情報を適切に収集し、キャンペーンなどのカスタマーサービスの提供につなげることもできることでしょう。