catch-img

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

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


目次[非表示]

  1. 1.Customer Fieldsとは
  2. 2.Customer Fieldsのインストール
  3. 3.Customer Fieldsでフォーム作成
  4. 4.Customer Fieldsの顧客管理
  5. 5.Customer Fieldsのデータカラム
  6. 6.Liquidの編集



Customer Fieldsとは

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


Customer Fieldsのインストール

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

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

Lite
Pro
Advanced
$12/月
$26/月
$60/月
・フォームは1つ
・顧客数の上限は5,000
・アカウント承認
・Shopifyフィールド
・表示フィールド
・項目チェック
・フォームステップ
・フォームは2つ
・顧客数の上限は10,000
・入力項目のカスタマイズ
・自動タグ付加
・ルール
・Eメール通知
・フォーム修正
・Liteのすべての機能
・フォーム数に制限なし
・顧客数の上限は50,000
・Zapierによる他アプリ接続
・REST API
・Proのすべての機能



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

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


Customer Fieldsのダッシュボード

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


Customer Fieldsでフォーム作成

新しいフォームを作成

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」ボタンをクリックするとさらに詳細なチェックを追加することもできます。

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



入力フィールドの種類

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

また、フォームを修飾するための区切りや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」ボタンを押すのを忘れないようにご注意ください。



Customer Fieldsの顧客管理

Customers

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

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



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)を更新することでフォームの設定を変更することも可能です。






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

トランスコスモス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ストア構築・運用代行

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」企業です

SERVICE
ピックアップサービス

shopify専用倉庫スピードロジ

【週間ランキング】Shopify人気記事

 Tag(タグ)一覧

 記事検索

 記事カテゴリー

 【無料】募集中セミナー

正社員募集(求人)

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

Shopify認定パートナー企業

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」です。
Shopifyでのサイト制作ならお任せください
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
デジタルトランスフォーメーション総括 ECX本部

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


経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」

トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア

cotra
コンタクト/コールセンターに携わる方への情報サイト
トランンスコスモスにShopify(ショッピファイ)をお任せください!
shopify構築・制作・運用