1. はじめに
ECサイトのリテンション率を向上させる施策として、誕生日メールでクーポンを送付することは大変効果的です。また、誕生日にクーポンをプレゼントすることを顧客にご案内することで、ECサイトへの会員登録を促すことも可能でしょう。
本記事では、誕生日メール施策を実施するための準備として、StoreCRMを活用したShopifyの「生年月日フォーム」の追加についての具体的な設定方法や注意点について解説します。
2. ストアの設定
本記事では無料テーマのDawnテーマにて解説を行います。有料テーマやカスタマイズがはいったテーマはファイル構成が異なる場合があります。
StoreCRMのカスタマーサポートにご連絡いただければ、テーマの改修を無償で対応することも可能です。（特別なデザインで実装したいといったご要望については別途お見積りさせていただく可能性があります）下記リンク先よりお問い合わせください。
https://www.groovymedia.jp/contact_app?user_id=&company=&name=&email=&appname=StoreCRM
顧客メタフィールドの作成
誕生日登録欄を実装するには顧客のメタフィールドに誕生日を登録するフィールドを作成する必要があります。
➀shopify管理画面>[設定]>[カスタムデータ]>[顧客]をクリックしてメタフィールド作成ページを開きます。
メタフィールド作成ページが開いたら[定義を追加する]をクリックします
➁作成ページの名前欄に[生年月日]と入力すると、推奨される標準設定に生年月日が出てきますのでクリックします。
③オプションとしてアクセス権の設定が表示されるので、[ストアフロントのアクセス]>[読み取り]>[お客様アカウントのアクセス]>[読み取りおよび書き込み]を選択して[保存]をクリックします。
3. 新規会員登録時の誕生日登録フォームの実装
本項目のゴール
まずは今回実装する、誕生日登録フォームの完成画面を確認しましょう。
※赤枠の中が誕生日登録欄になります。
実装箇所のコードを開く
➀[shopify管理画面]>[販売チャネル]>[オンラインストア]>[テーマ]からテーマ一覧を開きます。
[・・・]をクリックし、[コードを編集]をクリックします。
この先の手順でテーマのコードを編集するので、不安な方はテーマの「複製」を行い、複製されたテーマを編集することをおすすめします。
➁[コードを編集]をクリックすると、ファイルの一覧画面に遷移します。今回は、会員登録画面を編集するので
[テンプレート]→[customer/register.json]を開きます。
ファイルを開くとsections>main>typeに書かれているコードを確認します。
Dawnテーマの場合は[main-register]と記載されていました。
これは会員登録ページのコードの場所が記されており、
今回は[セクション]>[main-register.liquid]にコードが該当することを示しています。
③実際に[セクション]>[main-register.liquid]をクリックしてファイルを開きます。
実装箇所のコードを開く
今回はパスワード入力欄の下、[作成する]ボタンの上に実装をおこなうため、137行目と138行目の間にコードを実装します。
➀下記のHTMLコードをコピーして貼り付けをおこないます。
<div class="customer-birthday">
<div class="birthdaylabel">生年月日</div>
<ul class="birthdayinput" style="padding-left: 0;margin-bottom: -10px;margin-top: 0px;">
<li class="dayform">
<select class="form-control yearselect" id="year" name="customer_year" >
<option value="0">Year</option>
</select>
<input type="text" class="birthdayyear" aria-required="true" style="width:0px;height:0px;opacity: 0;" name="customer[note][birthday-year]" value="">
<span class="daychar">年</span>
</li>
<li class="dayform">
<select class="form-control monthselect" id="month" name="customer_month" >
<option value="0">Month</option>
</select>
<input type="text" class="birthdaymonth" aria-required="true" style="width:0px;height:0px;opacity: 0;" name="customer[note][birthday-month]" value="">
<span class="daychar">月</span>
</li>
<li class="dayform">
<select class="form-control dayselect" id="day" name="customer_day" >
<option value="0">Day</option>
</select>
<input type="text" class="birthdayday" aria-required="true" style="width:0px;height:0px;opacity: 0;" name="customer[note][birthday-day]" value="">
<span class="daychar">日</span>
</li>
</ul>
</div>
➁続いて、css、javascriptの追記をおこないます。cssについては最低限のコードとなっているので、デザインを変えたい場合はご自身の好みでカスタマイズをおこなってみてください。
javascriptに関してはセレクターの年月日を生成するスクリプトなので、そのまま貼り付けてください。コードを貼り付けて[保存]をクリックすればコードの追記は完了です。
<style>
.dayform {
display: flex;
align-items: center;
margin-right:2rem;
}
.birthdayinput {
display:flex;
}
.form-control {
box-shadow:0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity))
}
.birthdaylabel {
text-align: left;
margin-top: 5px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){var e=new Date,t=e.getFullYear();for(var n=document.getElementById("year"),r=t;r>=1900;r--)!function(e,t){var n=document.createElement("option");n.value=n.innerHTML=t,e.appendChild(n)}(n,r);for(var o=document.getElementById("month"),a=1;a<=12;a++)!function(e,t){var n=document.createElement("option");n.value=n.innerHTML=t,e.appendChild(n)}(o,a);for(var c=document.getElementById("day"),i=1;i<=31;i++)!function(e,t){var n=document.createElement("option");n.value=n.innerHTML=t,e.appendChild(n)}(c,i);var l=document.querySelector(".yearselect"),d=document.querySelector(".birthdayyear"),s=document.querySelector(".monthselect"),u=document.querySelector(".birthdaymonth"),g=document.querySelector(".dayselect"),m=document.querySelector(".birthdayday");l.addEventListener("change",function(e){var t=l.options[l.selectedIndex].value;d.value=t}),s.addEventListener("change",function(e){var t=s.options[s.selectedIndex].value;t<10&&(t="0"+t),u.value=t}),g.addEventListener("change",function(e){var t=g.options[g.selectedIndex].value;t<10&&(t="0"+t),m.value=t})});
</script>動作確認をおこなう
コードの追記が終わったら動作確認を行いましょう。
➀アカウント作成ページを開くと誕生日登録フォームが表示されるはずです。動作の確認のため、アカウント情報と誕生日を選択して、[作成する]をクリックします。
➁アカウントの作成が完了したら、実際に誕生日情報が取得出来ているかの確認を行います。
StoreCRMアプリページを開き、[顧客]>[顧客一覧]をクリックします。
一覧の上部に先ほど作成したアカウントがあるので名前をクリックして顧客詳細ページを確認します。
③顧客詳細の誕生日項目を確認し、先ほど登録した誕生日情報が登録されていれば成功です。
動作確認が上手くいかない場合は[コードを追記する]項目のコードと実際に追記したコードを見比べて
差異がないことを確認してください。
4. アカウントページの誕生日登録フォームの追加
本項目のゴール
まずは今回実装する、誕生日登録フォームの完成画面を確認しましょう。
アカウントページへの誕生日登録フォーム実装は、新規会員登録時とは異なり何度でもアクセスできてしまうので、一度誕生日を登録すると変更できないようにする必要があります。
今回の実装では、誕生日の登録、未登録を判定し、表示内容の出し分けを行います。
実装箇所のゴール
[shopify管理画面]>[販売チャネル]>[オンラインストア]>[テーマ]からテーマ一覧を開きます。
[・・・]をクリックし、[コードを編集]をクリックします。
この先の手順でテーマのコードを編集するので、不安な方はテーマの「複製」を行い、複製されたテーマを編集することをおすすめします。
➀[コードを編集]をクリックすると、ファイルの一覧画面に遷移します。
今回は、会員登録画面を編集するので[テンプレート]→[customer/account.json]を開きます。
ファイルを開くとsections>main>typeに書かれているコードを確認します。
Dawnテーマの場合は[main-account]と記載されていました。
これは会員登録ページのコードの場所が記されており、今回は[セクション]>[main-account.liquid]に
コードが該当することを示しています。
➁実際に[セクション]>[main-account.liquid]をクリックしてファイルを開きます。
コードを追記する
今回は注文履歴の下に実装をおこなうため、137行目と138行目の間にコードを実装します。
➀以下のHTMLコードをコピーして貼り付けをおこないます。
<div id="accountBirthday" class="acountInfoSp sp" style="margin-top:20px;">
<h2>誕生日設定</h2>
<h3 class="setbirthday">
現在設定されている誕生日：
{% if customer.metafields.facts.birth_date == null %}
未登録
{% else %}
{{ customer.metafields.facts.birth_date | date: "%Y年%m月%d日" }}
{% endif %}
</h3>
{% if customer.metafields.facts.birth_date == null %}
<!-- Birthday Widget By OBAKE -->
<div>
<ul class="grid grid--3-col birthdayinput" style="padding-left: 0;margin-bottom: 5px;">
<li class="grid__item dayform"><select class="form-control" id="year" name="customer_year" ><option value="0">Year</option></select><span class="daychar">年</span></li>
<li class="grid__item dayform"><select class="form-control" id="month" name="customer_month" ><option value="0">Month</option></select><span class="daychar">月</span></li>
<li class="grid__item dayform"><select class="form-control" id="day" name="customer_day" ><option value="0">Day</option></select><span class="daychar">日</span></li>
</ul>
<button id="birthdaySave" class="btn btn-primary" onClick="window.obakeStoreBirthday(obakeGetBirthday());">保存する</button>
<div class="saveok">お誕生日が追加されました</div>
</div>
{% else %}
<p style="font-size:14px;">※誕生日は登録後変更できません。登録時に誤った日時を登録してしまった場合は、
<a style="text-decoration: underline;" href="#">こちらまでお問い合わせください。</a></p>
{% endif %}
</div>➁続いて、css、JavaScriptの追記をおこないます。
cssについては最低限のコードとなっているので、デザインを変更したい方はご自身の好みでカスタマイズを行ってください。
③コードを貼り付けて[保存]をクリックすればコードの追記は完了です。
<style>
.dayform {
display: flex;
align-items: center;
position: relative;
margin-bottom: 0;
}
.birthdayinput {
display: flex;
margin-left: 0;
}
.yearselect, .monthselect, .dayselect {
min-width: 100px;
}
.birthdayyear, .birthdaymonth, .birthdayday {
padding: 0;
left: 10px;
position: absolute;
}
.daychar {
margin: 0 10px;
}
.form-control {
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
}
.saveok {
color: red;
font-size: 16px;
display: none;
margin-top: 15px;
}
@media (max-width: 500px) {
.daychar {
font-size: 14px;
margin: 0 -20px 0 5px;
}
.birthdayinput {
display: flex;
justify-content: space-between;
}
.customer-birthday {
padding-right: 25px;
}
.dayform {
max-width: 100px !important;
min-width: 0 !important;
}
#year {
min-width: 90px;
}
#month {
min-width: 70px;
}
#day {
min-width: 70px;
}
}
</style>
<script>var obakeCurrentBirthday='{{ customer.metafields.facts.birth_date }}';function addZero(e,t){return('00'+e).slice(-t)}function createOption(e,t,n){var a=document.createElement('option');a.value=e,a.text=t,document.getElementById(n).appendChild(a)}function populateDateFields(e){for(var t=new Date().getFullYear();t>=1900;t--)createOption(t,t,'year');for(var t=1;t<=12;t++)createOption(t,t,'month');for(var t=1;t<=31;t++)createOption(t,t,'day');var n=e.match(/([0-9]+)-([0-9]+)-([0-9]+)/);n&&(t=parseInt(n[1]),n=parseInt(n[2]),a=parseInt(n[3]),document.getElementById('year').value=t,document.getElementById('month').value=n,document.getElementById('day').value=a)}(function(){populateDateFields(obakeCurrentBirthday)})(),window.obakeGetBirthday=function(){var e=document.getElementById('year').value,t=addZero(document.getElementById('month').value,2),n=addZero(document.getElementById('day').value,2);return[].forEach.call(document.querySelectorAll('.saveok'),function(e){e.style.display='block'}),document.getElementById('birthdaySave').disabled=!0,[].forEach.call(document.querySelectorAll('.form-control'),function(e){e.disabled=!0}),e+'-'+t+'-'+n};</script>
<script defer src="/apps/obake/birthdayscript"></script>動作確認をおこなう
コードの追記が終わったら動作確認を行いましょう。
➀アカウント作成ページにて誕生日を登録せずに会員登録をおこないます。
➁アカウント作成後、マイページを確認すると誕生日登録欄が表示されているので、誕生日を選択して保存ボタンをクリックします。
その際に以下の動作をを確認してください。
保存が完了すると[保存する]ボタン下に[お誕生日が追加されました]と文言が表示されること。
誕生日選択のセレクトボックス、[保存する]ボタンが押せなくなっていること。
ページをリロードしたり、再度マイページにアクセスした際に、表示が変わって誕生日の変更ができないこと。
③StoreCRMアプリページを開き、[顧客]>[顧客一覧]をクリックします。
一覧の上部に先ほど作成したアカウントがあるので名前をクリックして顧客詳細ページを確認します。
④顧客詳細の誕生日項目を確認し、先ほど登録した誕生日情報が登録されていれば成功です。
動作確認が上手くいかない場合は[コードを追記する]項目のコードと実際に追記したコードを見比べて
差異がないことを確認してください。
5. まとめ
StoreCRMを活用することで、今回ご紹介した誕生日登録機能のように今まではコードを実装したり、
ShopifyFlowやShopifyアプリを組み合わせて難しい設定を行わないと実現できなかった様々な施策が、本アプリ1つで実現可能になります。
また、StoreCRMではアプリに関わる設定の無料サポート（設定代行）や導入いただいたお客様への売り上げアップのためのご提案も
おこなっております。
下記リンク先のお問い合わせフォームからご気軽にご相談ください。
https://www.groovymedia.jp/contact_app?user_id=&company=&name=&email=&appname=StoreCM
その他のノウハウ
Shopifyで会員登録ページに生年月日フォームを設置する方法
Shopify × StoreCRM フローエディタによるセグメント配信方法
Shopifyで顧客の再アクティブ化を図ろう！ウィンバックメールを使った顧客回帰戦略
