結論: Howdyの会員登録フォームは、一般設定で「コード側で指定」を選び、テーマのボタンにhowdy-register-original-trigger-btnクラスとdata-register-redirect属性を付けると、会員登録が完了した直後にお客様を指定したページへ自動で移動させられます。ボタンごとに異なる移動先を指定できるため、キャンペーンページ経由で登録した人だけをクーポンページへ案内し、通常の登録ボタンからはプロフィールページへ移動させる、という分け方ができます。移動先のURLにはLiquid変数やパラメータも指定できるため、登録前にいたページへ戻す設定や、登録経路ごとの効果測定にも使えます。
この記事の要点
- 一般設定で「コード側で指定」を選ぶと、テーマのコード側でボタンごとに移動先を指定できるようになる
- 移動先の指定には
howdy-register-original-trigger-btnクラスと、data-register-redirect・data-login-redirect・data-already-loggedinの3つの属性を使う - ボタンごとに異なる移動先を指定できるため、キャンペーンページ経由の登録者だけをクーポンページへ移動させられる
- 移動先のURLには
{{ request.path }}や{{ routes.account_url }}などのLiquid変数を使え、登録前にいたページへ戻すこともできる - 移動先のURLにパラメータを付け加えて、ストア側の分析に使うこともできる
- チェックアウトボタンなど既存のボタンにも、ログイン状態を判定する実装を加えれば同じ設定を組み込める
会員登録が完了した直後に、指定したページへ自動で移動させるにはどうすればいいですか？
Howdyの管理画面の一般設定で「コード側で指定」オプションを選んで保存します。この設定にすると、テーマのコード側で移動先を自由に指定できるようになります。次にテーマのコードで、移動先を指定したいボタンに次の形でクラスと属性を付けます。
<button
class="howdy-register-original-trigger-btn"
data-register-redirect="/pages/thanks"
>会員登録する</button>
howdy-register-original-trigger-btnクラスは、Howdyがそのボタンを移動先の指定対象として認識するために必須です。data-register-redirectには、会員登録が完了した直後に移動させたいページのURLを、相対パスまたは絶対パスで指定します。このボタンから会員登録が完了すると、指定したURLへ自動で移動します。
出典: Howdyヘルプ「フォーム入力後のリダイレクト先をコードで指定する方法」
会員登録後の移動先と、ログイン後の移動先を別々に設定できますか？
別々に設定できます。同じボタンにdata-register-redirect（会員登録が完了したときの移動先）とdata-login-redirect（ログインが完了したときの移動先）を、それぞれ別のURLで指定すると、新しく登録した人とすでにアカウントを持っていてログインした人を、別々のページへ移動させられます。すでにログイン済みの状態でボタンを押した場合の移動先は、data-already-loggedin属性で指定します。
<button
class="howdy-register-original-trigger-btn"
data-login-redirect="/"
data-register-redirect="/pages/thanks"
data-already-loggedin="{{ routes.account_url }}"
>ボタン</button>
3つの属性は、対象にするお客様の状態が異なります。
| 属性 | 移動先を指定する対象 |
|---|---|
data-register-redirect |
ボタンから会員登録が完了したお客様 |
data-login-redirect |
ボタンからログインが完了したお客様 |
data-already-loggedin |
ボタンを押した時点ですでにログイン済みのお客様 |
出典: Howdyヘルプ「フォーム入力後のリダイレクト先をコードで指定する方法」
キャンペーンページから登録した人だけをクーポンページへ移動させることはできますか？
できます。howdy-register-original-trigger-btnクラスは複数のボタンに付けられ、ボタンごとに異なるdata-register-redirectを指定できます。キャンペーンページに設置したボタンのdata-register-redirectをクーポンコードを表示するページのURLにし、サイト内の通常の登録ボタンのdata-register-redirectはプロフィールページのURLのままにしておくと、キャンペーンページ経由で登録した人だけをクーポンページへ移動させ、それ以外の登録者は通常どおりプロフィールページへ移動させる、という分け方になります。移動先はボタンを設置したテーマのコードごとに決まるため、キャンペーンページとサイト内のページで別のボタンを用意しておけば、それぞれのdata-register-redirectを書き換えるだけで移動先を切り替えられます。
<!-- キャンペーンページに設置するボタン -->
<button class="howdy-register-original-trigger-btn" data-register-redirect="/pages/coupon-code">キャンペーン限定で会員登録する</button>
<!-- サイト内の通常の登録ボタン -->
<button class="howdy-register-original-trigger-btn" data-register-redirect="{{ routes.account_url }}">会員登録する</button>
出典: Howdyヘルプ「フォーム入力後のリダイレクト先をコードで指定する方法」
移動先のURLに、登録前にいたページへ戻す指定やパラメータを付けられますか？
付けられます。移動先のURLにLiquidの{{ request.path }}を指定すると、会員登録やログインをする前にお客様がいたページへそのまま戻します。カートページに設置したボタンからログインしたお客様を、ログイン後もカートページに留めるという使い方ができます。
<!-- 登録・ログイン前にいたページへ戻すボタン -->
<button class="howdy-register-original-trigger-btn" data-login-redirect="{{ request.path }}" data-register-redirect="{{ request.path }}">ボタン</button>
また移動先のURLに/thank-you?source=campaign_a&button_id=123のようにパラメータを付け加えることもでき、どのボタンから登録が完了したかをストア側の分析に使えます。すでにログイン済みのお客様向けのdata-already-loggedinにも、{{ routes.account_url }}のようなLiquid変数を指定できます。
出典: Howdyヘルプ「フォーム入力後のリダイレクト先をコードで指定する方法」
会員登録フォーム以外の既存のボタンにも、この設定を適用できますか？
適用できます。チェックアウトボタンなど、すでにテーマに用意されている既存のボタンにこの設定を組み込む場合は、テーマのLiquidコードでお客様のログイン状態を判定し、ログインしていないお客様にだけhowdy-register-original-trigger-btnクラスを付けた独自のボタンを表示する実装が必要です。既存のボタンをそのまま書き換えるのではなく、ログイン状態で表示を出し分ける形でボタンを用意し、そのボタンにdata-register-redirectやdata-login-redirectなどの属性を指定します。コードの編集に不安がある場合は、Howdyのサポート（support@macro-micro.co.jp）に問い合わせできます。
出典: Howdyヘルプ「フォーム入力後のリダイレクト先をコードで指定する方法」
関連記事
よくある質問
Howdyは14日間無料で試せます
会員登録後の移動先をコード側で指定する設定は、Howdyの一般設定を切り替え、テーマのボタンにクラスと属性を追加する形で組み込めます。顧客メタフィールドの作成、会員登録フォームの項目設定、プロフィールページのブロック配置は、Howdyの専任チームが無料で代行します。
