Sirvoyウィジェットを含めるときに「data-callback」を指定することで、イベントをキャッチし、独自のカスタムスクリプトを実行できます(以下の例を参照してください)。通常の場合、「booking_completed」イベントのみに関心があることでしょう。
「false」を返すことにより、Google Analytics、またはFacebookピクセルトラッキングがトリガーされないように制御することもできます。これは、まだ同意されていないCookie同意バナーと組み合わせたり、特定のイベントのみをトリガーさせたい場合などに役立ちます。デフォルトでは、設定したトラッキングがトリガーされるため、「false」以外の値が返された場合(または何も返されない場合)、トラッキングがトリガーされます。
予約を入れる手順では、以下のイベントが発生します:
- page_code_required – キーとしてクーポンコードを必要とする予約フォームを表示すると発生します。
- page_search – 検索フォームを表示すると発生します。追加データ:「user_data」 (arrivalDate, departureDate, totalAdults, category)
- page_results – 検索結果を表示すると発生します。追加データ:「user_data」 (page_searchと同じです)
- page_details – ゲスト情報入力ページを表示すると発生します。追加データ:「user_data」 (page_searchと同じです)
- page_pending – 確認ステップの前でオンライン決済プロバイダーから戻った後、もしくはオンライン決済プロバイダーを使用していない場合にはpage_detailsイベントの後に発生します。追加データ:「予約」(JSONの予約の表示)
- page_confirmation – 確認ステップにて、オンライン決済プロバイダーから戻った後、もしくはオンライン決済プロバイダーを使用していない場合にはpage_detailsイベントの後に発生します。追加データ:「予約」(JSONの予約の表示)
- booking_completed – 予約が確定し、確認ページで完了したときに発生します。このイベントは各予約に対して必ず1回のみ発生しますが、「page_confirmation」や「page_pending」のイベントはゲストが任意の支払いを行ってオンライン決済プロバイダーから再びリダイレクトされると、再度発生します。追加データ:「予約」(JSONの予約の表示)
「予約の確認」機能の手順の以下のイベントを追跡することができます
- page_review_search – 「予約の確認」フォームを表示すると発生します。
- page_review_booking – 予約の確認ページを表示すると発生します。追加データ:「予約」(JSONの予約の表示)
- page_review_pending – 予約の確認ページから任意の支払いが行われた後に発生します。このイベントの後、予約の確認ページが再度表示され、「page_review_booking」イベントが再度発生します。追加データ:「予約」(JSONの予約の表示)
ページにカスタムスクリプトを追加して、その予約フォームをインストールするための新しいコードを生成するためには、「設定」 -> 「予約フォーム」 -> 「インストール方法」 へと移動します。
「インストール方法」 のページで、「アドバンス設定」をクリックし、「Javascript コールバック機能」の入力欄に、以下の例では「customEventHandler」、もしくはこの機能の名前として自分で決めたものを入力します。「このコードをコピーする」に表示されたコードをコピーして貴ウェブサイトで使用します。これで、予約中にゲストが行うステップごとに関数が呼び出されます。
予約が入った、または以前から存在している場合(予約プロセスの最後のステップ、または予約確認のプロセス)、付加的なデータとしてその予約の全ての情報を含むそのイベントが「booking」キーの下に含まれます。「booking」キーに使用される形式について詳しくは、こちらの記事をご覧ください。
以下は、利用可能なさまざまなイベントと関連データを探索するために使用できる例ですが、この特定の例は、ウェブデベロッパーコンソールのすべてのイベントをプリントアウトする以外に何もしません。実際に使用するには、Javascriptの知識が必要です。
<script>
function customEventHandler(data) {
console.log("Got Sirvoy custom JS event: " + data.event);
console.dir(data);
}
</script>