Airpage Full Customizing

개요

이 가이드는 트래킹링크에서 Scheme Deeplink 를 시도할 때 보이는 경유 목적의 중계페이지(이하 Airpage) 를 커스터마이징 하는 방법에 대해 안내합니다.

(기본 에어페이지 예시)

기본 작동 방식

Airpage 접속 시, Static Page의 URL을 Iframe으로 로딩합니다.
만약 Iframe 로딩이 실패하더라도 scheme deeplink 및 fallback을 자동으로 시도하는 로직은 그대로 수행됩니다.

준비사항

아래 조건을 모두 충족하는 Static Page를 서빙하도록 준비한 후, 담당 CSM에게 URL을 전달해주세요.

1. Static Page를 서빙하는 서버에서 모든 도메인을 허용하도록 Iframe Cross Origin 설정이 필요합니다.
   • 관련 문서
     • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
     • https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/X-Frame-Options
2. Static Page가 https 접속이 가능하도록 서빙해야 합니다.
3. 딥링크 버튼(기본 에어페이지 예시의 지금 바로 경험하기 버튼)을 클릭했을 때 postMessage를 수행하도록 구현해야 합니다.
   기본적으로 Airpage 접속 시 scheme deeplink 및 fallback을 자동으로 시도합니다. 만약 유저가 다시 브라우저로 돌아와서 이 버튼을 클릭하면 scheme deeplink 및 fallback을 수동으로 실행할 수 있습니다. 딥링크 버튼을 클릭 시, 아래 코드를 실행하도록 구현합니다.

JavaScript

parent.postMessage('airbridge.deeplink_page.deeplink_button.clicked', '*')

주의사항

고객사마다 Static Page의 코드 및 이를 서빙하는 서버 환경이 다르기 때문에, 트래킹링크 라이브 전 기대하는 환경에 대한 테스트를 필수적으로 수행해주세요.

📘

먼저 에어브릿지에 등록한 개발용 앱에 대해서 적용하고, 테스트가 끝난 후 프로덕션 앱에 적용하는 방식을 권장합니다.

Troubleshooting

Q. 페이지가 표시되지 않고, 브라우저 콘솔에 Refused to display '{URL}' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 에러 메시지가 출력됩니다.
A. https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/X-Frame-Options 문서를 참고하여 모든 도메인에 대해 허용하도록 서버 설정 변경이 필요합니다.