모듈을 페이지에 통합하기

최종 요청 URL을 생성한 후에는 이를 사이트에 통합해야 합니다. 먼저, 판매 프로세스 중 어디에 부가 모듈을 표시할지 선택해야 합니다. 그런 다음 이를 어떻게 표시할지 선택하면 됩니다. 페이지 위에 오버레이로 표시할지, 아니면 iframe에 삽입할지 선택하면 됩니다.

>> 최종 요청 URL 생성 방법에 대해 자세히 알아보기

모듈 연결 기능을 사용하면 사용자에게 추가 옵션으로 여러 사업 부문을 표시할 수 있습니다. 기본 설정에서는 주요 사업 분야를 하나 선택할 수 있으며, 이 정보는 카드 형식으로 표시됩니다. 또한 하나의 메시지 내에 하나 이상의 부수적인 사업 분야를 포함할 수 있으며, 사용자는 이를 클릭하여 더 많은 옵션을 확인할 수 있습니다. 또한, 비즈니스 요구 사항에 따라 하나 이상의 주요 사업 분야 디스플레이가 필요한 경우, 내장형 모듈을 사용하여 이를 구현할 수 있습니다.

모듈이 어떻게, 언제 표시되든 상관없이, 사용자가 결과와 상호작용할 때 선택한 항목은 새 탭에서 열립니다.

흐름 위치를 선택하세요

활성화하는 각 구매 경로마다, 사용자가 첨부 모듈을 접하기에 가장 적절한 위치가 어디인지 신중하게 고려해야 합니다.

Pre-purchase

랜딩 페이지와 ‘ in-purchase ’ 경로 내에서, 유연한 모듈을 통해 부가 상품들이 강조되어 소개됩니다. 또한 템플릿 사이트로 연결되는 링크 없이도, 이용 가능한 옵션에 대한 인식을 높이기 위한 안내 메시지로 사용할 수 있습니다.

구매 후

유연한 모듈이나 추천 모듈 중 하나, 혹은 둘 다를 사용하여 추가 상품을 제안하세요. 유연한 모듈을 중첩하여 표시하면, 사용자가 모듈 내에 포함된 추천 항목을 통해 추가 구매를 고려하도록 유도할 수 있습니다.

표시 옵션을 선택하세요

첨부 모듈을 사용자의 포커스를 새로운 창으로 이동시키는 오버레이 형태로 표시하거나, 페이지 자체에 내장된 형태로 표시하도록 설정할 수 있습니다.

오버레이 처리

오버레이 옵션은 웹페이지 위에서 해당 모듈을 강조 표시하여 모듈에 집중할 수 있게 해줍니다. 사용자는 닫기 버튼(X)을 클릭하거나 모듈 외부 영역을 클릭하여 모듈과 상호작용하거나 모듈을 종료할 수 있습니다.

이 모듈을 사용하려면 HTML의 <body> 태그 안에 자바스크립트 코드를 삽입하십시오.

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> 태그 안에 자바스크립트 코드를 포함시키고, 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>