앱 빌더 알아보기앱 빌더는 웹사이트를 웹뷰(WebView)로 감싸 앱의 형태로 만들어 줍니다. 이렇게 만든 앱을 ‘웹뷰 앱’이라고 부릅니다. 앱 빌더를 사용하면 앱을 직접 개발하지 않아도 앱을 출시할 수 있습니다. 카페24 브랜드앱은 카페24로 만든 웹사이트를 앱으로 만들고, 나쵸코드는 아임웹, 식스샵 등 여러 자사몰 솔루션으로 만든 웹사이트를 앱으로 만듭니다.
- 앱 빌더는 웹사이트를 웹뷰로 감싼 앱을 만들면서 앱 SDK를 설치하고 딥링크를 설정합니다.
- 웹 개발자는 웹사이트에 웹 SDK를 설치하고 이벤트 전송을 설정합니다.
- 마케터는 에어브릿지 대시보드와 앱 빌더 대시보드에 연동 정보를 입력하고 웹 개발자에게 작업을 요청합니다.
에어브릿지 설정하기
에어브릿지 설정은 마케터가 가장 먼저 마쳐야 하는 사전 준비입니다. 이 단계에서 등록한 앱 정보와 토큰을 웹 개발자와 앱 빌더에게 전달합니다.에어브릿지에 앱 등록하기
- 에어브릿지 계정을 생성하세요.
- 앱을 등록하세요. 자세한 방법은 새로운 앱 등록하기를 참고하세요.
- 에어브릿지 대시보드 [설정]>[에어브릿지 앱 설정]>[앱 정보]에서 [서비스]를 모두 등록하세요.
- 웹 개발자 등 함께 작업할 사용자를 에어브릿지에 초대하세요. 자세한 방법은 조직에서 사용자 관리하기를 참고하세요.
광고 채널 연동 확인하기
- 운영 중인 광고 채널이 에어브릿지 대시보드 [연동]>[광고 채널 연동] 목록에 있는지 확인하세요.
- 목록에 없는 광고 채널은 광고 채널 연동 신청서로 연동을 신청하세요.
웹 개발하기
웹뷰 앱은 형태만 앱일 뿐 화면과 동작은 웹사이트를 기반으로 하므로, 상품 조회나 구매 같은 이벤트는 웹사이트에 웹 SDK가 설치돼 있어야 수집됩니다. 이렇게 수집한 이벤트는 이후 광고 채널에 포스트백으로 전송돼 리타겟팅 캠페인을 운영하는 바탕이 되므로, 이벤트 전송을 정확히 설정해야 합니다. 아래 내용을 웹 개발자에게 전달해 작업을 요청하세요.웹 SDK 설치하기
에어브릿지 웹 SDK를 설치하세요. 설치에 필요한 앱 이름과 웹 SDK 토큰은 에어브릿지 대시보드 [설정]>[토큰 관리]에서 확인하세요. 설치 방법은 Web SDK 설치하기를 참고하세요.이벤트 전송하기
이벤트 택소노미 설계하기
이벤트 택소노미는 수집할 이벤트와 프로퍼티를 정의한 구조입니다. 회원가입, 구매 완료 같은 유저 행동 중 무엇을 이벤트로 수집할지, 각 이벤트에서 어떤 정보를 프로퍼티로 함께 수집할지 정합니다. 아래 가이드를 참고해 광고 성과 확인에 필요한 이벤트 택소노미를 설계하세요. 리타겟팅 캠페인을 운영하려면 최소한 아래 이벤트를 수집하세요. 각 이벤트의 이름과 어트리뷰트는 권장하는 에어브릿지 이벤트 - 커머스를 참고하세요.- 상품 리스트 조회
- 상품 상세 조회
- 장바구니 담기
- 구매 완료
이벤트 전송 설정하기
‘이벤트 택소노미 설계하기’에서 정한 이벤트 택소노미에 따라 웹사이트에서 이벤트를 전송하도록 설정하세요. 웹 개발자에게 아래 내용을 함께 전달하세요.- 이벤트 이름: 스탠다드 이벤트는 에어브릿지가 정한 이름을, 커스텀 이벤트는 이벤트 택소노미에서 정한 이름을 그대로 사용합니다. 스탠다드 이벤트 이름은 에어브릿지 이벤트 종류에서 확인하세요.
- 어트리뷰트: 상품 ID, 상품 이름, 결제 금액처럼 리포트 조회와 리타겟팅에 필요한 정보는 시맨틱 어트리뷰트로 함께 전송합니다. 에어브릿지 이벤트 구성요소에서 확인하세요.
- 예시 코드: 회원가입, 상품 조회, 장바구니, 구매 등 주요 이벤트의 예시 코드는 이벤트 예시 코드를 참고하세요.
주의하세요간편 로그인이나 간편 결제 서비스를 지원하는 경우, 앱의 로그인 완료 또는 결제 완료 페이지가 로드된 후에 이벤트를 전송하세요. 유저가 서비스 간 이동하는 중에 전송된 이벤트는 정상적으로 수집되지 않을 수 있습니다.
유저 ID 전송하기
이벤트를 전송할 때 유저 ID를 포함하세요. 유저 ID는 쿠키 ID, 디바이스 ID와 달리 웹과 앱에 흩어져 있는 유저 여정을 하나로 묶는 식별자입니다. 자세한 방법은 유저 ID 설정하기를 참고하세요.웹투앱 설정하기
웹사이트에서 앱으로 유저를 매끄럽게 연결하려면 웹사이트와 앱 양쪽에 웹투앱 설정을 완료해야 합니다.- 웹사이트 쪽에서는 유저를 앱으로 보내는 CTA 버튼과 배너를 설정합니다. 설정 방법은 아래를 참고하세요.
- 앱 쪽에서는 딥링크를 받아 앱을 여는 설정이 필요하며, 이 설정은 에어브릿지와 연동된 앱 빌더가 적용합니다. 자세한 방법은 앱 빌더 연동하기를 참고하세요.
CTA 버튼과 스마트 배너에 딥링킹 적용하기
웹사이트의 버튼에는 에어브릿지 웹 SDK의openDeeplink 함수를, 스마트 배너에는 openBanner 함수를 적용하세요. 두 함수 모두 유저를 보낼 딥링킹 경로와 딥링킹이 실패했을 때 유저를 보낼 폴백 경로를 반드시 입력해야 합니다. 적용 방법은 웹투앱 설정과 스마트 배너 만들기를 참고하세요.
웹 개발자가 두 함수를 적용하려면 아래 3가지 값이 필요합니다. 값을 정해 웹 개발자에게 전달하세요.
앱 빌더별 URL 스킴 딥링크 형식은 아래에서 확인하세요.
카페24 웹투앱 딥링크 구조
카페24 웹투앱 딥링크 구조
openDeeplink 함수와 openBanner 함수의 딥링킹 경로에는 카페24 앱의 URL 스킴 딥링크를 입력하세요. 카페24는 아래 형식을 사용합니다.APP_SCHEME://web?url=PAGE_URLpath는web으로 고정되며 안드로이드와 iOS가 동일합니다.- 특정 웹 페이지를 열려면
PAGE_URL에 그 페이지의 전체 URL을 넣으세요. APP_SCHEME은plus몰아이디입니다. 예를 들어 몰아이디가testmall이면APP_SCHEME은plustestmall이고, 전체 형식은plustestmall://web?url=https://www.example.com입니다.
주의하세요카페24가 제공하는 배너에는
openDeeplink 함수를 적용할 수 없습니다. 웹투앱 배너가 필요하면 에어브릿지 스마트 배너를 사용하세요.웹투앱 어트리뷰션 기여 기간 설정하기
유저를 웹사이트로 보낸 광고 채널에 앱에서 발생한 성과를 기여하려면 프로텍티드 어트리뷰션 윈도우(Protected Attribution Window, PAW)를 확인하세요. PAW는 기본으로 적용되며 기여 기간은 30분입니다. 기여 기간을 바꾸려면 웹 SDK에서 설정하세요. PAW를 적용하지 않으면 앱에서 발생한 성과가 광고 채널이 아닌 웹사이트에 기여될 수 있습니다. 자세한 방법은 아래 가이드를 참고하세요.앱 빌더 연동하기
앱에서 광고 성과를 측정하려면 앱 SDK가 설치되고 딥링크가 설정돼 있어야 합니다. 웹뷰 앱에서는 이 작업을 앱 빌더가 대신 처리하므로, 마케터는 연동 정보만 입력하면 앱을 직접 개발하지 않아도 측정을 시작할 수 있습니다. 사용하는 앱 빌더를 아래에서 선택하세요.웹뷰 앱에서 발생한 이벤트도 앱 이벤트로 수집됩니다웹뷰 앱은 웹사이트를 웹뷰로 감싸 앱의 형태로 만든 것이므로 웹뷰 앱에서 발생한 이벤트는 기본적으로 웹 이벤트입니다. 다만 에어브릿지와 연동된 앱 빌더는 이러한 이벤트를 앱 이벤트로 수집하는 설정을 포함해 앱을 만들기 때문에, 따로 설정하지 않아도 앱 이벤트로 수집됩니다.
나쵸코드
나쵸코드
나쵸코드로 만든 앱에서 에어브릿지를 사용하려면 앱 푸시 알림 설정, 연동 정보 입력, 딥링크 활성화를 순서대로 마치세요. 필수 설정을 마치면 나쵸코드가 에어브릿지 사용에 필요한 설정을 포함해 앱을 개발합니다. 커스텀 도메인, 앱 삭제 이벤트 트래킹, 메타 인스톨 리퍼러는 필요할 때 선택 설정으로 추가하세요.나쵸코드 대시보드 [앱]>[앱 구성]>[연동]>[Airbridge]에서 [커스텀 도메인] 토글을 켜고 커스텀 도메인을 입력하세요. 커스텀 도메인은 에어브릿지 대시보드 [트래킹 링크]>[커스텀 도메인]에서 확인할 수 있습니다.
필수 설정 완료하기
앱 푸시 알림 설정하기
나쵸코드와 에어브릿지를 연동하려면 앱 푸시 알림을 설정하세요. 자세한 방법은 나쵸코드 가이드를 참고하세요.나쵸코드 대시보드에 연동 정보 등록하기
- 나쵸코드 대시보드 [앱]>[앱 구성]>[연동]에서 [Airbridge] 카드의 ‘연동하기’를 클릭하세요.
- [Airbridge] 페이지에서 ‘연동하기’를 클릭한 후 ‘문의하기’를 클릭해 나쵸코드 담당자에게 에어브릿지 연동을 요청하세요.
- 연동이 활성화되면 아래 정보를 에어브릿지 대시보드에서 복사해 나쵸코드의 [Airbridge] 페이지에 붙여넣으세요.
에어브릿지 대시보드에 연동 정보 등록하기
에어브릿지 대시보드 [트래킹 링크]>[딥링크]에서 아래 정보를 순서대로 입력하세요.- [안드로이드 URL 스킴]을 입력하세요. 나쵸코드 대시보드 [앱]>[앱 구성]>[개발자 설정]>[앱 스킴 설정]에서 확인할 수 있습니다.
- [안드로이드 패키지 이름]을 입력하세요. 나쵸코드 대시보드 [앱 빌드]>[안드로이드 앱 빌드]>[빌드 설정]>[앱 식별자(패키지 이름)]에서 확인할 수 있습니다.
- [sha256_cert_fingerprints]를 입력하세요. 아래 2개의 SHA-256 키를 쉼표(
,)로 구분해 입력하세요.- 나쵸코드 지문키: 나쵸코드 대시보드 [앱 구성]>[개발자 설정]>[안드로이드 네이티브 설정]>[지문키(SHA Fingerprint)]에서 확인할 수 있습니다.
- 구글 플레이 콘솔 지문키: 구글 플레이 콘솔 [Play 앱 서명 관리]>[SHA-256 인증서 지문]에서 확인할 수 있습니다.
- [iOS URL 스킴]을 입력하세요. 나쵸코드 대시보드 [앱]>[앱 구성]>[개발자 설정]>[앱 스킴 설정]에서 확인할 수 있습니다.
- [iOS 앱 ID]를 입력하세요. 애플 디벨로퍼의 앱 [Identifier]에서 App ID Prefix와 Bundle ID를 확인해
App ID Prefix.Bundle ID형식으로 입력하세요.
나쵸코드에서 딥링크 활성화하기
나쵸코드 대시보드 [앱]>[앱 구성]>[연동]>[Airbridge]에서 [딥링크 활성화] 토글을 켜세요. 활성화하면 아래 에어브릿지 기본 도메인을 사용할 수 있습니다.https://YOUR_APP_NAME.airbridge.iohttps://YOUR_APP_NAME.abr.ge
필수 설정을 완료했습니다여기까지 마치면 나쵸코드 연동에 필요한 필수 설정이 모두 끝납니다. 필요에 따라 아래 설정을 추가하세요.
선택 설정 추가하기
커스텀 도메인 사용하기
주의하세요커스텀 도메인을 설정하지 않은 앱을 이미 출시한 상태에서 커스텀 도메인을 추가하면, 반드시 앱을 새로 빌드해 출시해야 커스텀 도메인이 적용됩니다.
앱 삭제 이벤트 트래킹 사용하기
주의하세요앱 삭제 이벤트를 트래킹하려면 먼저 푸시 알림을 설정해야 합니다. 푸시 알림을 설정하지 않은 앱을 이미 출시한 상태에서 푸시 알림 설정을 추가하면, 반드시 앱을 새로 빌드해 출시해야 푸시 알림 설정이 적용됩니다.
- 나쵸코드 대시보드 [메시지]>[푸시 알림]>[설정]에서 푸시 알림이 활성화돼 있는지 확인하세요.
- 나쵸코드 대시보드에 설정한 키와 값을 에어브릿지 대시보드 [설정]>[앱 삭제 이벤트 트래킹]>[안드로이드]에 입력하세요.
- 나쵸코드 대시보드에 설정한 키와 값을 에어브릿지 대시보드 [설정]>[앱 삭제 이벤트 트래킹]>[iOS]에 입력하세요.
메타 인스톨 리퍼러 사용하기
메타 인스톨 리퍼러(Meta Install Referrer)를 사용하면 구글 플레이 스토어에서 발생한 앱 설치 이벤트 중 메타 애즈에 기여된 이벤트의 데이터를 리포트와 원본 데이터로 확인할 수 있습니다. 먼저 에어브릿지 대시보드에서 메타 애즈를 연동한 뒤 아래 순서로 설정하세요. 연동 방법은 메타 애즈를, 메타 인스톨 리퍼러에 대한 자세한 내용은 인스톨 리퍼러 활용하기 - 메타 애즈를 참고하세요.주의하세요페이스북 연동을 설정하지 않은 앱을 이미 출시한 상태에서 페이스북 연동을 추가하면, 반드시 앱을 새로 빌드해 출시해야 메타 인스톨 리퍼러 수집이 적용됩니다.
- 나쵸코드 대시보드 [앱]>[앱 구성]>[연동]>[Facebook]에서 [페이스북 네이티브 활성화] 토글을 켜고 메타 앱 ID와 클라이언트 토큰을 입력하세요. 두 값은 Meta for Developers에서 확인할 수 있습니다. 에어브릿지 연동과 페이스북 연동을 모두 활성화하면 나쵸코드가 메타 인스톨 리퍼러 수집 설정을 함께 적용합니다. 자세한 방법은 나쵸코드 가이드를 참고하세요.
- Meta for Developers의 [대시보드]>[앱 설정]>[기본 설정]의 [Android]에서 [설치 리퍼러 암호 해독 키]를 확인하세요.
- 확인한 암호 해독 키를 에어브릿지 대시보드 [연동]>[광고 채널 연동]의 [메타 애즈]>[채널 연동]에 있는 [암호 해독 키]에 입력하세요.
카페24
카페24
카페24 브랜드앱에서 에어브릿지를 사용하려면 에어브릿지 대시보드와 카페24 대시보드에 연동 정보를 입력하세요. 연동 정보 입력이 끝나면 카페24가 에어브릿지 사용에 필요한 설정을 포함해 앱을 개발합니다.
카페24 대시보드에 연동 정보 등록하기
아래 연동 정보는 에어브릿지 앱 SDK를 설치하고 초기화하는 데 필요합니다. 에어브릿지 대시보드에서 복사해 카페24 대시보드에 붙여넣으세요.SDK 시그니처 ID와 SDK 시그니처 시크릿은 SDK 시그니처 기능을 사용할 때만 입력하세요. SDK 시그니처(SDK Signature)는 SDK 스푸핑(SDK Spoofing)을 방지해 검증된 이벤트만 광고 성과 측정에 사용하는 기능입니다. 사용하려면 에어브릿지 대시보드 [규칙 관리]>[광고사기 검증 규칙]>[SDK 시그니처]에서 SDK 시그니처 보안 정보를 먼저 생성하세요. 자세한 내용은 SDK 시그니처를 참고하세요.
에어브릿지 대시보드에 연동 정보 등록하기
아래는 운영체제별 딥링킹에 필요한 연동 정보입니다. 카페24 대시보드에서 복사해 에어브릿지 대시보드에 붙여넣으세요.https://YOUR_APP_NAME.airbridge.iohttps://YOUR_APP_NAME.abr.ge
테스트하기
웹 개발과 앱 빌더 연동은 담당자가 다르므로, 광고를 시작하기 전에 두 작업이 함께 작동하는지 확인해야 합니다. 에어브릿지 설정, 웹 개발, 앱 빌더 연동을 모두 마쳤다면 아래를 테스트하세요.- SDK 연동 테스트: 마케터를 위한 에어브릿지 SDK 테스트를 참고하세요.
- 앱 이벤트 수집 확인: 앱에서 발생한 이벤트가 [앱 이벤트 실시간 로그]에 기록되는지 확인하세요. 자세한 방법은 실시간 로그로 이벤트 확인하기를 참고하세요.
- 웹 이벤트 수집 확인: 웹에서 발생한 이벤트가 [웹 이벤트 실시간 로그]에 기록되는지 확인하세요. 자세한 방법은 실시간 로그로 이벤트 확인하기를 참고하세요.
- 웹투앱 딥링킹 확인: 웹사이트의 버튼이나 배너를 선택했을 때 앱으로 딥링킹되는지 확인하세요. 자세한 방법은 마케터를 위한 에어브릿지 딥링킹 테스트를 참고하세요.
성과 측정 시작하기
광고 채널을 연동하고 포스트백을 활성화해야 에어브릿지가 수집한 이벤트가 광고 채널로 전송되고, 광고 채널이 그 데이터로 리타겟팅 캠페인을 최적화합니다. 모든 테스트가 완료됐다면 아래 순서로 광고 성과 측정을 시작하세요.- 광고 채널을 연동하세요. 자세한 방법은 에어브릿지와 연동하기를 참고하세요.
- 연동한 광고 채널에 이벤트를 전송하려면 포스트백을 활성화하세요. 자세한 방법은 포스트백 설정하기를 참고하세요.
- 트래킹 링크를 생성해 광고에 사용하세요. 자세한 방법은 에어브릿지에서 트래킹 링크 생성하기를 참고하세요.
- 리포트에서 광고 성과를 조회하세요. 자세한 내용은 에어브릿지 리포트 알아보기를 참고하세요.