誕生日メールでクーポンを送るには、次のように操作してください。
マニュアルを見て設定する
1. はじめに
ECサイトのリテンション率を向上させる施策として、誕生日メールでクーポンを送付することは大変効果的です。また、誕生日にクーポンをプレゼントすることを顧客にご案内することで、ECサイトへの会員登録を促すことも可能でしょう。
本記事では、StoreCRMを活用したShopifyの「誕生日登録機能」の追加と「誕生日を活用したクーポン送付」についての具体的な設定方法や注意点について解説します。
2. StoreCRMでできること
StoreCRMでは、Shopify Flowを使わずに誕生日メール/誕生月メールを送信することが可能です。さらに、テーマの改修を行うことで、会員登録と同時に誕生日取得をすることが可能となります。
顧客のアカウントページに誕生日登録フォームを追加することで、新規会員だけでなく、既存の会員の誕生日も収集することができます。誕生日を収集することで、クーポン送付を行うだけでなく、ストアの顧客層の把握にもつながります。
メモ
StoreCRMで作成するシナリオでは、クーポン送付のメールに加えて、クーポンの有効期限切れを案内するメールを送ることも可能です。クーポンを送付する1回のみのメールよりも、2回目のメールでクーポンの有効期限切れをご案内することで、シナリオ経由の売上が40%向上することが確認されています。
3. ストアの設定
メモ
本記事では無料テーマのDawnテーマにて解説を行います。有料テーマやカスタマイズがはいったテーマはファイル構成が異なる場合があります。
StoreCRMのカスタマーサポートにご連絡いただければ、テーマの改修を無償で対応することも可能です。（特別なデザインで実装したいといったご要望については別途お見積りさせていただく可能性があります）ぜひお問い合わせください。
顧客メタフィールドの作成
誕生日登録欄を実装するには顧客のメタフィールドに誕生日を登録するフィールドを作成する必要があります。
➀shopify管理画面>[設定]>[カスタムデータ]>[顧客]をクリックしてメタフィールド作成ページを開きます。
メタフィールド作成ページが開いたら[定義を追加する]をクリックします
➁作成ページの名前欄に[生年月日]と入力すると、推奨される標準設定に生年月日が出てきますのでクリックします。
③オプションとしてアクセス権の設定が表示されるので、[ストアフロントのアクセス]>[読み取り]>[お客様アカウントのアクセス]>[読み取りおよび書き込み]を選択して[保存]をクリックします。
4. 新規会員登録時の誕生日登録フォームの実装
本項目のゴール
まずは今回実装する、誕生日登録フォームの完成画面を確認しましょう。
※赤枠の中が誕生日登録欄になります。
実装箇所のコードを開く
➀[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))
}
</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アプリページを開き、[顧客]>[顧客一覧]をクリックします。
一覧の上部に先ほど作成したアカウントがあるので名前をクリックして顧客詳細ページを確認します。
③顧客詳細の誕生日項目を確認し、先ほど登録した誕生日情報が登録されていれば成功です。
動作確認が上手くいかない場合は[コードを追記する]項目のコードと実際に追記したコードを見比べて
差異がないことを確認してください。
5. アカウントページの誕生日登録フォームの追加
本項目のゴール
まずは今回実装する、誕生日登録フォームの完成画面を確認しましょう。
アカウントページへの誕生日登録フォーム実装は、新規会員登録時とは異なり何度でもアクセスできてしまうので、一度誕生日を登録すると変更できないようにする必要があります。
今回の実装では、誕生日の登録、未登録を判定し、表示内容の出し分けを行います。
実装箇所のゴール
[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アプリページを開き、[顧客]>[顧客一覧]をクリックします。
一覧の上部に先ほど作成したアカウントがあるので名前をクリックして顧客詳細ページを確認します。
④顧客詳細の誕生日項目を確認し、先ほど登録した誕生日情報が登録されていれば成功です。
動作確認が上手くいかない場合は[コードを追記する]項目のコードと実際に追記したコードを見比べて
差異がないことを確認してください。
6. 誕生日情報を活用してシナリオメールを作成する
本項目では2項、3項を活用して収集した誕生日、誕生月の情報を活用し、毎月、誕生日、誕生月が来た顧客を対象に自動的にメールを送信するシナリオを作成します。
メールに誕生日、誕生月限定クーポンを付与することで、顧客の購買意欲を刺激し売上アップを見込むことができます。
シナリオを作成する
StoreCRMでは[誕生日の人にメールをする]、[誕生月の人にメールをする]というシナリオテンプレートを用意しており、かんたんな条件を設定するだけで自動的にメールを送信することができます。
今回は[誕生日の人にメールをする]のシナリオを実際に作成してみます
➀StoreCRMアプリページを開き、[シナリオ]>[誕生日の人にメールをする]をクリックします。
※誕生月の人にメールをするシナリオを作成したい場合は、[誕生月の人にメールをする]をクリックしてください。
以降の手順は同じです。
➁シナリオの設定画面が出てくるのでメール送る日時を設定します。今回は以下の仕様の元設定をおこないました。
重要
- メールを送信する7日前に誕生日登録を締め切る
- 誕生日当日の0時に誕生日メールを送信する
③続いて、メールに誕生日クーポンを付与したいので、[このアクションで割引クーポンを自動発行する]にチェックを入れて作成するクーポンの設定をおこないます。
今回は以下の仕様の元設定をおこないました。
重要
- 1000円以上購入した場合25%お会計を割引する
- クーポンコードの先頭は[happybirthday-]に指定する
④設定が完了したら、[保存]ボタンを押すとシナリオが作成され、シナリオ詳細が表示されます。
[有効？]の箇所のトグルスイッチをクリックするとシナリオが有効になり、設定した条件に従ってメールが送信されます。
※シナリオ作成時点で、シナリオにあったメールが自動生成されます。
メールをカスタマイズしたい場合は次項を参考に編集をおこなってください。
これにてシナリオの作成は完了です。
メールの編集
StoreCRMでは、誕生日に関連するメールのテンプレートが予め用意されており、そのままでもシナリオを運用することができます。「メールをストアの雰囲気にあった文言、デザインにしたい」、「自身の言葉でお客様にメッセージを届けたい」といった場合は、メールエディターで編集することができます。
➀StoreCRMアプリページを開き、[メール]>[メール一覧]をクリックしてください。
メール一覧の中から編集したいメールの名前をクリックします。
➁メール詳細ページの[編集する]から[メール名称（管理用）]、[メールタイトル]、[本文]をそれぞれカスタマイズすることができます。
ストアの雰囲気にあったメールを作成し、開封率、CVR※アップを目指しましょう。
※CVRとは「Conversion Rate（コンバージョンレート）」の略で「CV率」とも言われ、Webサイトの成果＝コンバージョン（商品の購入や申込み）を達成した割合を表す指標です。
7. まとめ
StoreCRMを活用することで、今回ご紹介した誕生日メール施策のように今まではコードを実装したり、
ShopifyFlowやShopifyアプリを組み合わせて難しい設定を行わないと実現できなかった様々な施策が、本アプリ1つで実現可能になります。
また、StoreCRMではアプリに関わる設定の無料サポート（設定代行）や導入いただいたお客様への売り上げアップのためのご提案もおこなっております。
お問い合わせフォームからご気軽にご相談ください。
関連ページ