こんにちは！
Yuki (@yukibnb) です。
今回はBeds24の予約エンジンを使って自社HPで集客している民泊運営者様向けに、Beds24のUpsell(アップセル)の販売数量を調整する方法を紹介します。
では早速見ていきましょう！
はじめに
アップセルとは？
Upsell(アップセル)とは「より高価なグレードの商品やサービスを購入してもらうための営業方法」というマーケティング用語です。
宿泊業界だけでなく様々な業界で実践されている手法です。
例えば「予約時に一定の追加料金でグレードの高いお部屋をおすすめする」というようなものです。
似たような用語にcrosssell(クロスセル)があります。
クロスセルは「関連する他の商品やサービスを一緒に購入してもらうための営業方法」というマーケティング用語です。
例えば「革靴を購入したお客様に防水スプレーの購入もおすすめする」というようなものです。
アップセルもクロスセルも押しつけがましいと逆効果ですが、適切に活用できると顧客一人当たりの単価が向上します。
Beds24でのアップセル
Beds24でのアップセルは一般的なアップセルよりも範囲が広く、追加オプションの販売というイメージです。
自社HPで集客する際により高いグレードのお部屋をおすすめするだけでなく、基本的にどのようなもの(※注1)も追加オプションとして設定し販売できます。
本記事ではBeds24でのアップセルの設定方法そのものは割愛します。(今後別記事で解説しようと思います！)
「どのようなもの」とはいえ、法令上の許可や免許等が必要なものはもちろん無許可・無免許では販売できません。
Beds24のアップセルの販売数量を調整する方法！
調整したい内容
「optional qty」というタイプのアップセルを使用すると、お客様が予約時に対象オプションの数量を選択できます。
「qty」は「quantity(数量)」の略語です。
例えば「滞在期間中にひとつ2,000円で○○を貸し出します。必要な個数を選択してください」というオプションを販売することができます。
すごく便利ですがこのままだと少し困る場合があります。
それは初期設定では数量が0～250まで選択可能だという点です。
提供できる数が限られている追加オプションを販売したい場合、250まで選択できると不要なトラブルを招いてしまいます。
というわけで「選択できる数量 = 販売数量」を調整しましょう！
[Developer]を開く
以下の手順で[Developer]を開いてください。
- 1. [Settings]をクリック
- 2. [Booking Engine]をクリック
- 3. [Property Booking Page]をクリック
- 4. [Developer]をクリック
CSSを記述して保存する
Developer画面内で以下手順でCSSを記述することで、アップセルの販売数量を調整することができます。
- 1. Propertyを選択
- 2. CSSを記述
- 3. [Save]をクリックして保存
#optextra1 option:nth-child(n+6){display:none;}
例えばこのようなCSSを記述すると、以下画像のようにひとつめのアップセルの販売数量を0～4に調整できます。
設定方法自体はシンプルですが「2. CSSを記述」の部分に何を書けばいいのかわかりにくいですよね。
実は簡単なルールに沿ってCSSを記述しているだけですので、ポイントさえ押さえればみなさん自身で自由に販売数量を調整できます。
詳しく見てみましょう。
解説！アップセルのCSS
概要
#optextra1 option:nth-child(n+6){display:none;}
例として「ひとつめのアップセルの販売数量を0～4に調整」するCSSを見てみましょう。
ポイントはふたつあります。
ポイント1: 何番目のアップセルか指定する
#optextra半角数字と記述することで、何番目のアップセルかを指定できます。
ひとつめのアップセルを指定する場合#optextra1と記述します。
| アップセル | CSS |
|---|---|
| ひとつめのアップセル | #optextra1 |
| ふたつめのアップセル | #optextra2 |
| みっつめのアップセル | #optextra3 |
| よっつめのアップセル | #optextra4 |
| いつつめのアップセル | #optextra5 |
| X番目のアップセル | #optextraX |
ポイント2: 何番目以降の選択肢を非表示にするか指定する
僕たちの頭の中では「0～4までを表示させる」と考えますが、CSSでは「5以降を非表示にする」という記述をします。
#optextra1 option:nth-child(n+6){display:none;}
option:nth-child(n+6){display:none;}は6番目以降の選択肢を非表示にする、という意味です。
(n+6)の6をお好きな半角数字に置き換えるだけで販売数量を調整できます。例えば(n+8)と記述すれば8番目以降の選択肢を非表示にできます。
「display」とは「展示」、「none」は「ない」という意味です。
ここで注意が必要なのが「6番目」というのは選択肢の6ではないという点です。
1番目の選択肢は0のため、6番目の選択肢は5です。
そして6番目以降の「以降」とは6番目も含むため、5以降の選択肢が非表示になります。
少しこんがらがりそうですが、選択肢の最大数に2を足した数字を「(n+数字)」に記述すればOKです。
選択肢の最大数を4にしたい場合、4に2を足した6を「(n+6)」と記述します。
選択肢の最大数を10にしたい場合、10に2を足した12を「(n+12)」と記述します。
| 販売数量 | 選択肢の最大数 | CSS |
|---|---|---|
| 0～1 | 1 | option:nth-child(n+3){display:none;} |
| 0～2 | 2 | option:nth-child(n+4){display:none;} |
| 0～3 | 3 | option:nth-child(n+5){display:none;} |
| 0～4 | 4 | option:nth-child(n+6){display:none;} |
| 0～5 | 5 | option:nth-child(n+7){display:none;} |
| 0～X | X | option:nth-child(n+(X+2)){display:none;} |
ポイント1とポイント2を組み合わせる
ポイント1で何番目のアップセルかを指定しました。そしてポイント2で販売数量を指定しました。
後はポイント1とポイント2を組み合わせて、[Developer]内にCSSを記述すればOKです。
例えば「ふたつめのアップセルの選択肢の最大数を10にしたい」場合、「ふたつめのアップセル」は#optextra2、「最大数が10」は(n+12)のため、このように記述します。
#optextra2 option:nth-child(n+12){display:none;}
そして「ひとつめのアップセルの選択肢の最大数は4にしたいけど、ふたつめのアップセルの選択肢の最大数は10にしたい」というようにアップセルごとに販売数量を変えることも可能です。
単純に以下のように改行して記述すればOKです。
#optextra1 option:nth-child(n+6){display:none;} #optextra2 option:nth-child(n+12){display:none;}
アップセルごとに販売数量を調整できました！
まとめ
今回はBeds24の予約エンジンを使って自社HPで集客している民泊運営者様向けに、Beds24のUpsell(アップセル)の販売数量を調整する方法を紹介しました。
ふたつのポイントさえ押さえれば誰でもすぐに設定できます。
Beds24のアップセルはできることが豊富なので、いずれ別記事で色々紹介したいと思います！
