ページにモジュールを組み込む

最終的なリクエストURLを作成したら、それをサイトに組み込みます。まず、販売プロセスのどの段階でアタッチメントモジュールを表示するかを選択します。次に、それらをどのように表示するかを選択します。ページ上にオーバーレイとして表示するか、iframeに埋め込むかです。

>> 最終リクエストURLの作成方法について詳しくはこちら

アタッチモジュールを使用することで、ユーザー向けの追加オプションとして、複数の事業分野を表示することができます。標準の設定では、主要な事業分野を1つ選択でき、それがカード形式で表示されます。また、1つのメッセージ内に1つ以上の副次的な事業分野も表示され、ユーザーはそれらをクリックしてさらに詳しいオプションを確認することができます。また、業務上の必要性から、主要な業務分野の表示を複数必要とする場合は、組み込みモジュールを使用して対応することが可能です。

モジュールがいつ、どのように表示されるかに関わらず、ユーザーが結果に対して操作を行うと、選択した項目は新しいタブで開かれます。

フローの場所を選択してください

有効にする各購入経路について、ユーザーがアタッチモジュールを目にするのに最適な場所を慎重に検討することをお勧めします。

Pre-purchase

ランディングページやin-purchaseのパス内では、フレキシブルモジュールによって関連商品が紹介されています。また、テンプレートサイトへのリンクを掲載せずに、利用可能なオプションについて認知を高めるための導入メッセージとして使用することも可能です。

予約後から旅行日まで

「フレキシブル」モジュールまたは「レコメンデーション」モジュールのいずれか、あるいはその両方を使用して、追加の商品をご提案ください。フレキシブルモジュールを重ねて表示すると、そこに組み込まれたおすすめ情報を通じて、ユーザーにさらなる購入を検討してもらうきっかけとなります。

表示オプションをお選びください

アタッチモジュールは、ユーザーの注目を新しいウィンドウへと移すオーバーレイとして表示するように設定することも、ページ自体に埋め込んで表示するように設定することもできます。

オーバーレイ処理

オーバーレイ機能では、ウェブページ上でモジュールを強調表示することで、そのモジュールに焦点を当てた表示が可能になります。ユーザーは、モジュールとやり取りしたり、閉じるボタン（X）をクリックするか、モジュールの外側をクリックすることで操作を終了したりすることができます。

このモジュールを使用するには、HTMLの<body> タグ内にJavaScriptコードを記述してください。

Overlaid screen with the heading 'Thanks! You've booked your hotel. Do you need another room too?' showing 3 options for additional rooms

コードサンプル

<!DOCTYPE html>
<html>
<head>
    <title>Booking Confirmation Page</title>    
</head>
<body>

    <h1>Booking Confirmation Page</h1>
    <p>Congratulations on your purchase</p>

    <#-- The overlay attach module Javascript code. -->
    <script src="//xsell.expedia.com/xsell-pwa.js?partnerId=partner123&outboundStartDateTime=2023-01-02T11%3A55%3A00%2B08%3A00&outboundEndDateTime=2023-01-02T12%3A55%3A00%2B08%3A00&returnStartDateTime=2023-01-12T22%3A30%3A00%2B08%3A00&returnEndDateTime=2023-01-12T22%3A30%3A00%2B08%3A00&destinationTLA=LAX&numOfAdults=2&locale=en-US&currencyCode=USD&bookingDateTime=2022-11-12T12%3A32%3A15%2B08%3A00&bookingId=123ABC&bookingStatus=confirmed&signature=bj01fgT85mUiRmzxxSufSmlGpiI">
    </script>

</body>
</html>

埋め込み治療

組み込みの添付モジュールにより、統合されたビューが提供され、ユーザーはページ上のURLの位置に基づいて結果を表示し、操作することができます。

このモジュールを設定するには、HTMLの<body> タグ内にJavaScriptコードを記述し、div 要素を追加しますid="krazyglue-embedded-wrapper"。

例えば：

<div id="krazyglue-embedded-wrapper">
       <#-- The first embedded attach module iframe will be loaded here. -->
</div>

Page showing itinerary confirmation, then an embedded block with the title 'Great news! You qualify for special hotel deals because you booked a flight' and 3 hotel deal options

コードサンプル

<!DOCTYPE html>
<html>
<head>
    <title>Booking confirmation page</title>    
</head>
<body>
    <h1>Booking confirmation page</h1>
    <p>Congratulations on your purchase</p>

    <#-- The embedded attach module Javascript code. -->
    <script src="//xsell.expedia.com/xsell-pwa.js?partnerId=partner123&outboundStartDateTime=2022-01-02T11%3A55%3A00%2B08%3A00&outboundEndDateTime=2014-01-02T12%3A55%3A00%2B08%3A00&returnStartDateTime=2014-01-12T22%3A30%3A00%2B08%3A00&returnEndDateTime=2014-01-12T22%3A30%3A00%2B08%3A00&destinationTLA=LAX&numOfAdults=2&locale=en-US&currencyCode=USD&bookingDateTime=2013-11-12T12%3A32%3A15%2B08%3A00&bookingId=123ABC&bookingStatus=confirmed&signature=bj01fgT85mUiRmzxxSufSmlGpiI">
    </script>
   
    <div>
       <p>Information about your flight</p>
    </div>
    <div>
       <p>Booking details</p>
    </div>

    <div id="krazyglue-embedded-wrapper">
       <#-- The first embedded attach module iframe will be loaded here. -->
    </div>
</body>
</html>

また、リファラーポリシー（クリックがどこから来たかを追跡する情報）も確認する必要があります。この値によって、埋め込みモジュールが表示されるiframeの高さが決まるためです。モジュールが組み込まれているページには、リファラーポリシーの値を設定する必要があります origin-when-cross-origin 正しく表示されるように。

統合先のページで、リファラーポリシーの値がどのようなものかおわかりになりませんか？確認方法は以下の通りです。

任意のウェブブラウザを使用して、埋め込みアタッチモジュールを統合するページを開いてください。
ページを右クリックし、「要素を検査」をクリックして、開発者ツールを開いてください。
ツールペインで「ネットワーク」タブに移動し、ページを再読み込みしてください。
[ネットワーク] タブで、ページのドメインを検索してください。そこには、リファラーポリシーのページヘッダーが表示されます。例えば、次のようなものです： <meta name="referrer" content="origin-when-cross-origin" />

デュアルアタッチモジュール

デュアル組み込みアタッチモジュールを統合するには、組み込みアタッチモジュールのリクエストに追加のembeddedId=krazyglue-embedded-wrapper-2 パラメータを含め、<div> のIDを.に更新してくださいkrazyglue-embedded-wrapper-2。

注：ポップアップアタッチモジュールのリクエストにおいて、JavaScript embeddedId に「src」パラメータを含めないでください。

コードサンプル

<body>
/** Popup module script */
  <script>/xsell-pwa.js?partnerId=sas_hotel_popup...param=xyz&signature=bj01fgT85mUiRmzxxSufSmlGpiI"></script>
/** Embedded module script */
  <script>/xsell-pwa.js?partnerId=sas_hotel_embedded...param=xyz&embeddedId=krazyglue-embedded-wrapper-2 &signature=bj01fgT85mUiRmzxxSufSmlGpiI"></script>
  <div id="krazyglue-embedded-wrapper-2"></div>
/** The embedded attach module iframe will be loaded here. */
</body>