catch-img

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

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

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン


目次[非表示]

  1. 1.Helium Customer Fieldsとは
  2. 2.Helium Customer Fieldsのダッシュボード
  3. 3.Helium Customer Fieldsでフォーム作成
  4. 4.Helium Customer Fieldsの顧客管理
  5. 5.Helium Customer Fieldsのデータカラム
  6. 6.Liquidの編集



Helium Customer Fieldsとは

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


Helium Customer Fieldsのインストール

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

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


・料金プラン

Lite
Pro
Advanced
$12/月
$26/月
$60/月
・フォームは2つ
・顧客数の上限は5,000
・アカウント承認とメール承認
・アカウント編集ページ
・スタッフ向けメール通知
・フォームは5つ
・顧客数の上限は10,000
・入力項目のカスタマイズ
・自動タグ付加
・ルール
・アプリの統合
・Liteのすべての機能
・フォーム数に制限なし
・顧客数の上限は50,000
・優先サポート
・REST API
・Proのすべての機能



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で良いと思います。


Default
Shopifyに顧客データを自動生成します。顧客はログインすればアカウントの編集が可能です。
Require email verification
Shopifyの招待メールが自動送信されます。顧客はアカウントを有効にするためにメールアドレスの確認とパスワードの設定が必要になります。
Require account approval
Shopifyの顧客データを生成するには顧客の承認が必要になります。また新規登録する顧客のアカウントを有効にするにはマーチャントの承認が必要になります。

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


Standardのプレビュー


Modernのプレビュー


Addressのプレビュー


Demographicsのプレビュー


B2B/Wholesaleのプレビュー

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



フォームのカスタマイズ

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


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



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

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

フォームエディタの左側の設定項目を下にスクロールすると「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

Name
管理用のフォーム名
Mark required fields
フォーム上の入力必須フィールドに *印(アスタリスク)を表示します。
Display password reset link
お客様がログインしているときにパスワードをリセットするためのリンクを表示することができます。そのリンクをクリックするとリセット用のメールが送信されます。


Redirect options

Redirect to another page after submitting
フォームの入力後に指定したURLにリダイレクトさせることができます。
Display success step after submitting
フォームの入力後に登録完了ページを表示します。
Display cancel button
フォームにキャンセルボタンを表示します。


Account options

Default
Shopifyに顧客を自動登録します。お客様はログインするとアカウントの編集ができます。
Require email verification
Shopifyの招待メールを自動送信します。新規登録したお客様はアカウントを有効にするためにメールアドレスを確認し、パスワードの設定が必要です。
Require account approval
お客様が承認したときのみ Shopifyに登録されます。新規登録したお客様のアカウントを有効にするにはマーチャントの承認が必要になります。


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

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー

トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

Shopify(ショッピファイ)ストア構築・制作、
運用代行について問い合わせ

Shopifyアプリ解説・紹介記事

ShopifyのECサイト制作ならトランスコスモス

トランスコスモスは、Shopifyのエンタープライズ版「Shopify Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。

Shopifyを使ったECサイト制作から、調査分析・戦略立案、WEB広告(SEM)、ECサイト制作、お客様サポート、受発注、フルフィルメントまで業務設計・運用代行いたします。

トランスコスモスのEC全領域を網羅するサービス

関連記事


【無料】セミナー動画視聴


EC関連サービス


数字で見るトランスコスモスの強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
ロジスティクスサービス

 記事カテゴリー

【週間ランキング】ECブログ人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用