스마트 배너(모바일 웹-앱 전환 링크)

요약: 스마트 배너를 사용하여 웹 사이트 방문자를 모바일 앱 사용자로 전환합니다.

Smart Banners

스마트 배너:

하이 인텐트 사용자의 전환율을 높이려면 브랜드의 모바일 웹 사이트에 표시하십시오.
모바일 웹 사이트 방문자에서 제공하는 앱 설치 품질을 측정합니다.
SRN을 포함하여 모든 미디어소스에 대해 정확한 웹 캠페인-투-앱 모바일 어트리뷰션을 가능하게 합니다.
스마트 배너로 클릭률(click-through, 클릭 수/노출 수)과 노출 수를 기록할 수 있습니다.
- 클릭: 사용자가 스마트 배너를 클릭하여 앱을 설치한 스마트 배너 클릭 수가 기록됩니다.
- 노출: 배너가 (사용자에게) 노출되었을 때, 노출 카운트 이벤트가 앱스플라이어에 전송됩니다.

동작 방식은 다음과 같습니다.

사용자가 광고를 클릭하면 광고주의 모바일 웹사이트로 이동하게 됩니다.
스마트 배너는 광고주의 모바일 웹사이트에 표시합니다.
사용자는 스마트 배너를 클릭하고 다음을 수행합니다.
- 앱을 인스톨하지 않은 경우 앱을 설치하도록 앱 스토어로 안내합니다.
- 앱이 인스톨되고 유니버설 링크, 앱 링크, URI 링크 등이 구성되면 앱이 바로 실행됩니다.
사용자는 프로모션의 맥락에서 인앱 콘텐츠에 이릅니다.
사용자는 원래 광고를 보여 주는 미디어소스로 어트리뷰트됩니다.

작업 범위

직무별 작업

마케터 및 웹사이트 개발자

웹사이트 개발자는 웹사이트 HTML에 코드 스니펫을 입력하기만 하면 됩니다.
그 외 다른 설정은 모두 마케팅 담당자가 할 수 있습니다.

선행 조건

최소 한 개 이상의 앱이 등록된 앱스플라이어 계정
스마트 배너로 광고할 앱이 등록된 원링크 템플릿
원링크 템플릿은 모바일 웹 방문자를 사용 기기에 따라 알맞은 앱스토어 페이지로 이동시키기 위해 스마트 배너에서 꼭 필요합니다.

소요 시간

약 20 분

작업 결과

웹사이트에서 CTA를 클릭하면 사용 기기에 따라 알맞은 앱스토어나 지정된 웹페이지로 이동합니다.
CTA 버튼을 클릭하는 모바일 앱 유저는 앱 내 콘텐츠로 딥링킹 됩니다.
사용자 클릭 및 앱 설치 가 온드 미디어 소스에 어트리뷰션 됩니다.

예시

철수는 'Feed Me'라는 성공한 식품 배달 서비스의 마케터입니다. 철수는 Feed Me 모바일 웹사이트를 방문한 사람들을 앱 유저로 전환시키고자 합니다.

이 목적을 달성하기 위해 철수는 시각 자료와 텍스트로 스마트 배너를 만들어 활용합니다.

스마트 배너는 원링크로 작동됩니다. 모바일 웹사이트에서 CTA 버튼을 클릭하면, 자동으로 사용 기기에 따라 적절한 앱스토어나 랜딩 페이지로 이동시켜, 앱을 쉽게 다운로드 받을 수 있도록 합니다. 앱이 이미 설치된 사람이 CTA 버튼을 클릭하면, 앱이 실행됩니다.

그러면 앱스플라이어는 철수가 지정한 미디어 소스와 캠페인을 클릭/인스톨에 대해 어트리뷰션한 것으로 기록합니다.

중요!

앱스플라이어 스마트 배너 또는 iOS Safari 스마트 앱 배너를 둘 중 하나만 사용하고, 두 개를 동시에 사용하지 마십시오. 둘을 동시에 사용하면 모바일 웹사이트 표시 문제가 발생할 수 있고 어트리뷰션 불일치가 일어날 수 있습니다.

절차

다음 절차를 따라 스마트 배너 설정을 완료하십시오.

스마트 배너를 통해 모바일 사이트에 방문한 사람을 사용 기기에 맞춰 적절한 앱스토어나 앱 페이지로 이동시킵니다.
원링크를 이용해 클릭/인스톨에 대한 어트리뷰션을 온드 미디어로 기록합니다.

1. 웹사이트 설정

스마트 배너를 게재할 모바일 사이트 준비하기:

앱스플라이어 대시보드에서인게이지먼트 및 딥링킹 > 스마트 배너를 클릭합니다.
웹사이트 작업 공간 생성을 클릭합니다.
웹사이트 작업 공간 이름을 입력합니다.
생성을 클릭합니다.
웹사이트 작업 공간이 열립니다.
배너 코드 스니펫을 복사합니다.
코드 스니펫을 프론트 엔드 개발자에게 전달하여 웹사이트에 구현하도록 합니다.
프론트 엔드 개발 작업은 간단하고 한 번 뿐이며 이 단계 이후는 웹사이트 코딩 작업이 없습니다.
[선택 사항] 웹 키를 복사합니다. (이 키는 이미 코드 스니펫에 있습니다.)
계속을 클릭합니다.

2. 배너 그룹 설정

배너 그룹에는 하나 이상의 배너가 들어 있습니다. 배너 그룹에서 다음을 수행할 수 있습니다.

배너 그룹에 사용할 원링크 템플릿을 선택할 수 있습니다. 이 원링크 템플릿은 웹사이트 방문자를 이동시킬 모바일 앱이 설정되어 있습니다.
특정 딥링킹 스킴을 설정할 수 있습니다.
배너 그룹의 모든 배너에서 사용할 타겟팅 로직, 스케쥴, 동작, 어트리뷰션 세부 정보를 정의할 수 있습니다.
사용자가 방문시, 배너 그룹의 배너를 활성화시키는 페이지를 설정할 수 있습니다.

새 배너 그룹 설정하기

앱스플라이어 대시보드에서인게이지먼트 및 딥링킹 > 스마트 배너를 클릭합니다.
왼쪽에 배너 그룹 추가를 클릭합니다.
고유한 배너 그룹 이름을 입력합니다.
배너 그룹 이름은 배너 간 공동 주제를 반영하고 배너 그룹을 대표할 수 있어야 합니다. (예: 광고를 집행한 앱 이름)
배너 그룹에 사용할 원링크 템플릿을 선택합니다.
[선택사항] 배너 그룹에 대한 URI 스킴을 유니버설 링크와 안드로이드 앱 링크 사용자에 대한 폴백으로 설정할 수 있습니다. 기본적으로 이 값은 원링크 템플릿에서 가져오기 때문에 이 설정이 필요한 경우는 드뭅니다. 템플릿에 있는 값과 다른 값이 필요할 경우에만 이 설정을 배너 그룹에 설정하십시오.

어트리뷰션 소스 가 이 배너 그룹에서 발생한 신규 인스톨에 대해 어트리뷰션되도록 설정합니다. 다음 표에서 사용자정의 링크에 가장 적합한 옵션을 선택하십시오.

옵션	사용하기 적합한 경우	댓글
UTM 파라미터 사용	논오가닉 방문자 대부분이 UTM 파라미터로 확인할 수 있는 소스로부터 모바일 웹사이트에 유입된 경우	미디어 소스 이름 (pid) = UTM_Source 캠페인 (c) = UTM_campaign UTM_source 또는 UTM_campaign이 누락된 경우 정적(static) 이름이 대신 사용됩니다.
유입되는 어트리뷰션 링크 파라미터 사용	논오가닉 방문자 대다수가 앱스플라이어 어트리뷰션 링크를 사용하는 애드 네트워크를 클릭하여 모바일 웹사이트로 유입되는 경우.	앱스플라이어 어트리뷰션 링크의 모든 파라미터가 스마트 배너 링크에 추가됩니다. 파라미터가 앱스플라이어 어트리뷰션 링크와 스마트 배너에 모두 있으면, 최종 커스텀 링크에는 어트리뷰션 링크가 우선순위를 갖습니다.
다른 어트리뷰션 파라미터를 추가하기	원하는 경우 웹사이트 관련 어트리뷰션 데이터를 추가합니다. 이렇게 하면, 각 인스톨을 더욱 상세히 분석할 수 있습니다.	예를 들어, 이커머스 사이트에서는 모든 상품 카테고리에 대해 동일한 커스텀 링크를 생성하고 af_adset 값만 다르게 설정합니다. (예: "af_adset=fruit")
기본 어트리뷰션 파라미터 사용	모바일 웹사이트 방문자 대부분이 오가닉인 경우 논오가닉 방문자가 애드 네트워크 클릭이나 UTM 파라미터 소스를 통해서 웹사이트에 도달하지 않는 경우	중요: 모범 사례는 미디어소스, 캠페인 또는 채널 이름을 사용할 수 없는 경우 기본 스마트 배너 어트리뷰션이 사용자정의 링크에서 대체로 사용되므로 UTM 또는 수신한 어트리뷰션 링크 파라미터를 선택하는 것입니다.

[권장 사항] 기본 어트리뷰션 파라미터, 채널명을 설정하여 스마트 배너로 발생하는 모든 인스톨에 대해 설정된 채널명으로 어트리뷰션되도록 합니다. 이렇게 하여 다양한 미디어소스 정보를 동일한 채널명 하에 집약하여 코호트 리포트, 개요 대시보드, 리텐션 리포트 등에서 나타낼 수 있습니다.
[선택 사항] 동일한 배너가 사용자에게 다시 표시될 수 있을 때까지 그룹에 있는 한 배너의 사용자 해고 사이에 허용되는 최소 시간인 거부 동작을 설정하십시오. 다음 중 하나를 선택하십시오.
- 시간별: 1시간, 1일 또는 1주
- 다음 세션: 사용자가 배너를 닫은 후 다른 탭 또는 창에서 발생하는 세션을 의미합니다.
- 안 함: 배너를 다시 보이지 않습니다.
  일러두기:
  - 브라우저 캐시를 지우거나 비공개 브라우징 모드에서 사이트를 방문할 경우, 해제 동작 설정이 적용되지 않습니다.
  - 사용자가 종료하는 배너에는 해제 동작이 적용되며 배너 그룹의 다른 배너는 계속 표시할 수 있습니다.
[선택사항] 최대 빈도 제한을 설정합니다.
최대 빈도 제한은 한 사용자에게 배너를 노출시키는 최대 횟수를 정의합니다. 예를 들어, 최대 빈도 제한이 3으로 설정되면, 사용자가 해당 사이트를 네 번 방문했을 때, 세 번째 방문까지만 배너를 볼 수 있고 네 번 째 방문 시에는 볼 수 없습니다. 최대 빈도 제한 옵션에는 무제한도 있습니다. 최대 빈도 제한 옵션에서 무제한이나 제한을 선택합니다.
[선택 사항] 배너 그룹 가동을 예약합니다. 즉시 시작(기본 설정)하며 시간 제한 캠페인을 설정할 수 있습니다.
[선택 사항] 배너 그룹을 활성화할 위치를 설정합니다.
1. 전 세계 모든 사용자에게 이 배너 그룹을 보이려면 전 세계를 선택하십시오. 필요한 경우 특정 지역이나 국가에서 유입되는 방문자를 제외하도록 설정할 수 있습니다.
2. 특정 위치 선택 옵션을 선택하면 이 배너 그룹이 특정 지역의 사용자에게만 노출됩니다.
[선택 사항] 방문자에게 배너 그룹을 표시할 수 있는 페이지를 의미하는 페이지에 표시를 설정합니다.
- [기본 설정] 웹사이트의 모든 페이지에 표시를 참조하십시오.
  일러두기: 폴백으로 모든 페이지에 대해 하나 이상의 배너 그룹을 정의하는 것을 권장합니다.
- 특정 페이지에 표시: 배너를 표시하기 위해 페이지 또는 URL이 포함하거나 포함하지 않아야 하는 조건을 지정합니다.
  - 다음 중 하나를 선택할 수 있습니다.
    - 특정 페이지: 배너를 표시할 페이지의 호스트 및/또는 경로를 지정합니다. 입력한 모든 쿼리는 무시됩니다. 예: http://www.example.com/path?query
    - URL: 경로 및/또는 쿼리를 지정하거나 배너를 표시할 페이지의 경로/쿼리에 키워드를 지정합니다. 예: http://www.example.com/path?query
  - "및/또는"을 사용하여 5개까지의 조건을 추가할 수 있습니다.
  - 조건 사이에 충돌이 있는 경우 배너가 표시되지 않습니다.
배너 그룹 생성을 클릭합니다.
[선택 사항] 배너 그룹을 다시 수정하려면 타겟팅 및 동작 위에 커서를 가져가 편집을 클릭합니다.

예시

마크(Mark)는 "Feed Me"라는 음식 배달 서비스의 마케터입니다. 그는 앱의 매실 판매 캠페인을 만들기로 결정했습니다. 마크는 캠페인에 SMS뿐만 아니라 광고 네트워크와 구글을 사용하기로 결정했습니다.

SMS를 통한 캠페인에 대비하여, 마크는 다음을 수행합니다.

Feed Me 모바일 사이트의 매실 판매 페이지로 사용자를 유도하기 위해 캠페인 링크에 사용할 고유한 어트리뷰션 파라미터를 추가합니다. 링크에는 매실 판매 페이지의 URL이 있는 pid 파라미터가 포함됩니다. http://feedme.com/plums_link?pid=sms&c=plums.
어트리뷰트 소스가 "plums_link"를 포함한 모바일 웹에서 페이지를 방문하는 사용자에게 활성화되는 들어오는 어트리뷰션 링크 파라미터 사용으로 설정된 스마트 배너(배너 그룹 및 배너)를 생성합니다.

광고 네트워크를 통한 캠페인에 대비하여, 마크는 다음을 수행합니다.

Feed Me 모바일 사이트의 매실 판매 페이지로 사용자를 유도하기 위해 캠페인에서 사용할 고유 어트리뷰션 링크를 광고 네트워크에 제공합니다. 링크에는 매실 판매 페이지의 URL(http://feedme.com/plums_link)이 있는 리디렉션 URL(af_r) 파라미터가 포함되어 있습니다. 필요한 추가 파라미터는 없습니다.
이미 생성한 스마트 배너를 SMS 캠페인에 사용합니다.

구글 애즈를 통한 캠페인에 대비하여, 마크는 다음을 수행합니다.

어트리뷰트 소스가 UTM 파라미터 사용으로 설정된 스마트 배너(배너 그룹 및 배너)의 복제본을 만듭니다. 이 복제는 "plums_utm"이 포함된 모바일 웹의 페이지를 방문하는 사용자에 대해 활성화됩니다.

캠페인이 실행되기 시작합니다.

사용자는 다음을 수행합니다.

매실 판매에 대한 광고를 보고 Feed Me 모바일 사이트를 클릭합니다.
구글 애즈 클릭 및 기타 모든 클릭이 들어오는 링크 랜딩 페이지에 도착하고 일치하는 스마트 배너가 페이지별로 활성화됩니다.
모바일 사이트에서 스마트 배너를 확인하고 이를 클릭합니다.
Feed Me 앱을 다운로드하여 설치합니다.
매실 판매 앱 출시에 관한 정보를 얻을 수 있습니다.
Feed Me 모바일 사이트로 사용자를 유도한 올바른 미디어소스로 어트리뷰트됩니다.

3. 배너 설정

배너 그룹에서 배너를 작성하는 방법:

배너 생성을 클릭하고 배너 편집 페이지로 들어갑니다.
배너의 이름을 설정합니다.
광고 소재 디자인을 생성합니다.
1. 광고 소재 디자인을 클릭하여 배너의 광고 소재를 설정합니다.
  배너 템플릿을 선택할 창이 열립니다.
2. 광고 소재 템플릿 위에 마우스를 가져가 생성을 클릭하여 광고 소재 구축 설정 페이지로 들어갑니다.
3. 스마트 배너 광고 소재의 모든 요소를 맞춤 설정합니다. 그렇게 하려면, 이름으로 구성 요소를 선택하거나 미리보기 이미지에서 구성 요소를 클릭합니다.
  - 직함
  - 내용
  - 별점 등급
  - 종료 버튼
  - Call To Action
  - 앱 로고
  - 배경
  - 배너 패딩(배너 크기 조정)
  - 이미지의 경우 jpeg, jpg, png 파일 유형 중 하나를 사용합니다.
    일러두기: webp 형식은 지원되지 않습니다.
    이미지 권장 사항은 다음과 같습니다.
    
    템플릿 유형 이미지 파일 최대 크기 DPI 이미지 비율
    
    Standard 300 KB 72 9:4(가로형)
    
    Enhanced
    9:4(가로형)
    
    Promotional 1:1
    
    Interstitial 9:16 (세로형)
4. 검토를 클릭하여 배너 광고 소재의 모양을 검토하고 다른 기기에서 해당 모양을 테스트합니다.
  일러두기: 배너는 미리보기 이미지와 비교할 때 활성 캠페인에서 약간 다를 수 있습니다.
5. 변경이 필요한 경우, 편집으로 돌아가기를 클릭합니다.
6. 완료를 클릭하여 배너 설정 페이지로 돌아갑니다.
[선택 사항] 사용자정의 어트리뷰션 파라미터를 추가합니다. 예를 들어, ad_adset 및 af_ad.
일러두기: 파라미터 pid, c 및 channel은 배너 그룹 수준에 속하므로 배너 수준에서 추가할 수 없습니다.
새 광고 소재를 설정하고 저장하면, 배너 상태가 활성화됩니다. 상태 토글을 사용하여 활성 및 일시 정지 상태를 전환합니다.
[선택 사항] 사용자 인입 유형 URL의 어트리뷰션 링크를 리타게팅 URL로 전환하려면 사용자정의 파라미터 is_retargeting=true를 추가합니다.
모두 저장을 클릭하여 작업을 저장하거나 모두 저장하고 닫기를 클릭하여 작업을 저장하고 배너 설정 페이지를 닫습니다.

4. 테스트하기

광고 소재가 준비되면 실제 운영 서버에 게시하여 사용자들이 사용하도록 하기 전에 테스트를 합니다.

스마트 배너 광고 소재 테스트 방법:

전제 조건: 스마트 배너 코드 스니펫이 웹사이트에 들어가 있는지 확인하십시오.

광고 소재 테스트 페이지에서, 스마트 배너 SDK가 연동될 웹페이지 링크를 입력합니다(다음 탭 참조).
생성을 클릭합니다.
생성된 링크를 복사하여 테스트 기기에 보내거나 테스트 기기로 QR 코드를 스캔합니다. 이 링크나 QR은 광고 소재로 만든 배너가 게시되는 웹페이지로 이동합니다.
광고 소재 편집을 클릭하여 광고 소재 설정 화면으로 돌아가거나 완료를 클릭하여 광고소재를 저장합니다.

추가 정보

배너 그룹 표시 논리

앱스플라이어는 스마트 배너를 표시해야 할 지 또는 어느 스마트 배너를 표시할지 결정할 때 다음을 고려해야 합니다.

배너 그룹에 설정된 규칙(해제 동작, 노출 횟수 제한, 위치, 페이지 표시 등)이 있습니까?
최종 사용자가 규칙 조건을 충족하고 배너를 볼 자격이 있습니까?

두 질문에 대한 답변이 모두 "예"이면, 규칙이 있음을 의미하고 사용자가 배너를 볼 자격이 있으며, 앱스플라이어는 다음 표에 설명된 대로 표시할 배너를 선택합니다.

배너 그룹 설정	표시할 배너	예
단일 배너 그룹	앱스플라이어는 모든 사용 가능한 사용자 간의 모든 배너 그룹에 있는 모든 활성 배너의 표시를 균등하게 분할합니다.	예 1: 1개의 활성 배너가 있습니다. 이것은 모든 사용자에게 표시됩니다. 예 2: 2개의 배너가 있습니다. 사용자의 50%는 배너 1을 보고 나머지 50% 는 배너 2를 볼 수 있습니다. 예 3: 3개의 배너가 있으며 자격이 있는 사용자의 1/3은 각 배너를 볼 수 있습니다. 예 4: 활성 배너가 없습니다. 아무것도 표시되지 않습니다.
규칙이 동일한 여러 배너 그룹	앱스플라이어는 모든 사용 가능한 사용자 간의 모든 배너 그룹에 있는 모든 활성 배너의 표시를 균등하게 분할합니다.	2개의 배너 그룹(A및 B)이 있으며, 각각에는 3개의 배너가 있습니다(총 6개의 배너가 있는 경우). 자격 있는 사용자의 1/6은 각 배너를 볼 수 있습니다.
다중 규칙이 있는 다중 배너 그룹	앱스플라이어는 가장 구체적으로 설명하고 사용자와 일치하는 규칙이 있는 배너 그룹에서 모든 활성 배너의 표시를 균등하게 분할합니다. 배너 그룹이 다른 방법으로 동일하게 특정한 경우, 이 모든 배너 그룹의 배너가 표시됩니다.	예 1: 2개의 배너 그룹, A및 B가 있습니다. 배너 그룹 A는 전 세계적으로 표시되도록 설정되었으며 배너 그룹 B는 일본에 표시되도록 설정되어 있습니다. 배너 그룹 B는 보다 구체적이므로 해당 그룹의 배너만이 일본의 사용자에게 표시됩니다. 예제 2: 2개의 배너 그룹 A및 B가 있습니다. 배너 그룹 A는 전 세계적으로 표시되도록 설정되어 있으며 배너 그룹 B는 우크라이나를 제외한 모든 곳에서 표시되도록 설정되어 있습니다. 배너 그룹 B는 보다 구체적이므로 해당 그룹의 배너만이 전 세계 사용자(우크라이나 사용자 제외)에게 표시됩니다. 예제 3: 2개의 배너 그룹, A및 B가 있습니다. 배너 그룹 A는 일본에 표시되도록 설정되어 있으며 배너 그룹 B는 4월에 표시되도록 설정되어 있습니다. 두 배너 그룹은 모두 동일하게 특정하지만 다른 방식으로 사용됩니다. 따라서 일본에서는 4월에 두 개의 배너 그룹이 다른 배너 그룹보다 우선순위를 두지 않기 때문에 두 배너 그룹의 배너가 표시됩니다.

배너 성능에 대한 A/B 테스트

개별 배너의 성능에 대한 A/B 테스트를 수행할 수 있습니다. 이를 위해서는 사용자정의 어트리뷰션 파라미터를 배너 작성(배너 설정의 4단계)에 추가한 후 해당 파라미터를 사용하여 각 배너의 성능을 비교합니다.

pid, c 및 channel은 배너 그룹 수준에 속하므로 이를 제외한 모든 파라미터가 추가될 수 있습니다.

권고 사항: 각 배너 광고 소재의 고유한 값으로 af_adset 파라미터를 설정하십시오. 이제 다음 이미지에 표시된 대로 앱스플라이어 개요 대시보드에서 집계된 성과 리포트를 사용하여 성과를 쉽게 비교할 수 있습니다.

자주 하는 질문

자주 하는 질문
내 배너가 표시되지 않는 이유는 무엇입니까? 이는 배너 그룹에 설정된 최대 빈도 제한 때문입니다. 최대 빈도 제한은 한 사용자에게 배너를 노출시키는 최대 횟수를 정의합니다. 예를 들어, 최대 빈도 제한이 3으로 설정되면, 사용자가 해당 사이트를 네 번 방문했을 때, 세 번째 방문까지만 배너를 볼 수 있고 네 번째 방문 시에는 볼 수 없습니다. 최대 빈도 제한 옵션에는 무제한도 있습니다. 최대 빈도 제한 옵션에서 무제한이나 제한을 선택합니다.

제한 사항

제약 사항	설명
태블릿	스마트 배너는 모바일 기기용으로 설계되었으며 분해능이 대형 화면을 사용하는 태블릿에 최적화되지 않을 수도 있습니다. 태블릿의 브라우저는 모바일 기기로 인식되지 않을 수 있습니다.
커스텀 파라미터	다음 특수 문자들은 사용자정의 파라미터로 허용되지 않습니다. ;, *, !, @, #, ?, $, ^, :, &, ~, `, =, +, ’, >, <, / 이러한 특수 문자 중 하나를 사용하여 파라미터를 정의하면 파라미터가 저장되지 않습니다.
배너 표시 분할	앱스플라이어는 활성 배너의 표시를 사용자에게 균등하게 분할합니다. 표시할 특정 배너의 선택은 불가합니다. 예를 들어, 그룹에 2개의 배너가 있는 경우 각 사용자가 50%의 사용자에게 표시됩니다. 70%-30% 분할로 변경할 수 없습니다.
특정 페이지	특정 페이지에 배너를 표시하도록 배너 그룹을 설정할 때 배너 규칙은 사용자가 입력하는 호스트/경로에만 적용됩니다. 완벽하게 일치되지 않으면 (예를 들어, 사이트 페이지에 규칙 설정에 포함되지 않은 추가 문자열이 있는 경우) 규칙이 적용되지 않습니다.

앱스플라이어는 광고주가 웹사이트에 삽입할 수 있는 스마트 배너 SDK를 제공합니다. SDK는 필요한 데이터를 가져와 스마트 배너에 데이터를 동적으로 표시합니다. 스마트 배너 SDK는 또, 적절한 어트리뷰션 링크를 자동으로 생성해, 링크를 따로 만들 필요가 없습니다.

스마트 배너 SDK는 모바일 배너가 게재되는 모든 페이지에서 접근할 수 있어야 합니다.

스마트 배너 SDK는 고유한 웹 키를 이용하여 인증합니다. 웹 키는 웹사이트 작업 공간에서 얻을 수 있습니다.

코드 스니펫

참고

2020년 1월 1일에 스마트 배너를 위한 새로운 SDK가 나왔습니다.

이 새 앱스플라이어 웹 SDK로 웹사이트에서 스마트 배너와 유저 중심 어트리뷰션(People-based Attribution)을 둘 다 사용할 수 있습니다. 아래 SDK 스니펫은 두 가지 예시를 보여줍니다.

모바일 배너를 게재하는 모든 페이지의 <head> 태그에 코드 스니펫을 삽입합니다.

스마트 배너만을 사용하는 용도의 앱스플라이어 앱 SDK

스크립트 내 YOUR_WEB_KEY 자리 표시자를 웹 키로 바꿉니다. 웹 키는 웹사이트 작업 공간을 새로 만들 때 생성됩니다.
이 코드 스니펫을 귀사의 웹사이트 head 태그에 붙여넣습니다. 헤드 태그의 맨 위 가까이에 붙여넣도록 하십시오.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: "YOUR_WEB_KEY"}});

// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

스마트 배너와 유저 중심 어트리뷰션(PBA)용 앱스플라이어 웹 SDK

스크립트 내 YOUR_WEB_KEY 자리 표시자를 웹 키로 바꿉니다. 웹 키는 웹사이트 작업 공간을 새로 만들 때 생성됩니다.
스크립트 내 YOUR_PBA_KEY 플레이스 홀더를 귀하의 web dev key로 바꿉니다. web dev key는 브랜드 번들을 생성할 때 만들어집니다.
이 코드 스니펫을 귀사의 웹사이트 head 태그에 붙여넣습니다. 헤드 태그의 맨 위 가까이에 붙여넣도록 하십시오.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});

// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

        <script>
          !function(e,n,t){!function(e,n,t,r,a){
          var s=(e[n]=e[n]||{})[t]=function(){(s._q=s._q||[]).push(Array.prototype.slice.call(arguments))};
          s.webkey=a;
          for(var i=0;i<r.length;i++)
          s[r[i]]=function(n)
          {return function()
          {var e=Array.prototype.slice.call(arguments);
          return e.unshift(n),(s._q=s._q||[]).push(e),s}}
          (r[i])}(e,"AF","Banner",["showBanner","hideBanner","disableBanners","disableTracking","setAdditionalParams"],t),
          function(e,n,t){var r=e.createElement("script");
          r.type="text/javascript",r.async=!0,r.src=n+(t?"?webkey="+t:"");
          var a=e.getElementsByTagName("script")[0];
          a.parentNode.insertBefore(r,a)}(n,"https://cdn.appsflyer.com/web-sdk/banner/latest/sdk.min.js",t)}(window,document,"YOUR-BANNER-KEY");
          // Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
          
          showBanner({ bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"...}});

          </script>

태그 매니저를 사용하여 SDK 추가하기

태그 매니저를 사용하여 스마트 배너 SDK를 귀하의 웹사이트에 추가합니다.

GTM에서 새 태그를 작성합니다.
태그 이름을 지정하고 태그 설정을 클릭하고 사용자정의 HTML을 선택합니다.
HTML 상자에 SDK 스니펫을 붙입니다. 스니펫에 있는 YOUR-BANNER-KEY를 실제 배너 키로 교체합니다. 일러두기: PBA 웹 SDK를 스마트 배너와 연동하는 방법도 참조하십시오.
Triggering을 클릭하고 화면 상단 우측의 플러스(+) 아이콘을 클릭해서 새로운 트리거를 만듭니다.
트리거 이름을 정하고, 트리거 설정을 클릭하고 페이지 뷰를 선택합니다.
배너를 모든 페이지에서 표시하려면, 모든 페이지 표시를 선택합니다. 배너를 특정 페이지에서만 표시하려면,일부 페이지 표시를 선택하고 위에서 만든 태그를 트리거하는 조건을 정의합니다. 트리거에 대한 상세 내용은 GTM 문서를 읽어보십시오.
상단 우측 코너에 있는 저장 버튼을 클릭합니다.
태그 구성 화면으로 돌아가십시오. 모두 설정되었는지 점검하고 상단 우측 코너에 있는 저장을 클릭합니다.
GTM 컨테이너를 퍼블리시하십시오.

1단계: Adobe Experience Cloud에 property를 생성합니다.

스마트 배너 SDK를 호스트하는 property(태그)를 작성합니다.

Adobe Experience Cloud > Launch로 가십시오.
Adobe Experience Cloud Launch 아래 Go to Launch를 클릭합니다.
New Property를 클릭합니다.
property 이름을 정합니다.
플랫폼 아래 웹을 선택합니다.
귀하의 웹사이트 도메인을 입력합니다.
저장을 클릭합니다.

2단계: 스마트 배너 SDK를 Adobe Launch property에 추가합니다.

스마트 배너 SDK를 태그에 추가합니다.

My web property 페이지에서 규칙 탭을 선택합니다.
규칙의 이름을 지정한다. Load Smart Banners를 사용하기를 권고합니다.
IF 섹션에서 이벤트 아래 +추가를 클릭합니다.
- 이벤트 유형에서 코어 - DOM 준비를 선택하십시오.
- 변경 유지를 클릭합니다.
THEN 섹션에서 조치 아래, +추가를 클릭합니다.
- 조치 유형 > 사용자정의 코드를 클릭하십시오.
- JavaScript > Open Editor를 클릭하고 스마트 배너 SDK 스니펫을 <script> 태그 없이 붙입니다.
- 변경 유지를 클릭하여 코드 편집기를 닫습니다.
저장을 클릭합니다.

3단계: Adobe Launch 태그를 귀하의 웹사이트에 추가합니다.

Adobe Launch 태그를 귀하의 웹사이트에 추가합니다. 이 태그는 스마트 배너 웹 SDK를 로드합니다.

My web property 페이지에서 환경 탭을 선택합니다.
퍼블리시할 환경(개발 환경 혹은 실 운영 환경)이 있는 행을 찾으십시오.
- 인스톨 헤더 아래 관련있는 행 위의 박스 아이콘을 클릭합니다. 이는 보통 프로덕션 운영 환경입니다.
- Adobe Launch 환경을 퍼블리시하는 방법에 대한 섹션을 참조하십시오.
웹 인스톨 지침 대화 상자에서:
- 스크립트 코드 스니펫을 복사합니다.
- 대화 상자를 닫습니다.
코드 스니펫을 귀하의 웹사이트 <head> 태그에 붙여넣습니다.

4단계: Adobe Launch 환경을 퍼블리시합니다.

Adobe Launch 환경을 퍼블리시하여 Adobe Launch 태그를 활성화합니다.

My web property 페이지에서 퍼블리싱 탭을 선택합니다.
Development 섹션에서 새 라이브러리 추가를 클릭합니다.
1. 라이브러리 이름을 정하고 환경을 선택합니다.
2. 리소스 변경 아래에서 리소스 추가를 클릭합니다.
3. 규칙 > 스마트 배너 로드 > 최신 > 새 개정 버전 선택 및 작성을 클릭합니다.
4. 저장을 클릭합니다.
Development 섹션 아래에서:
1. 새로 생성된 라이브러리 옆에 조치 메뉴(점 3개)를 클릭해서 Build for Development를 선택합니다.
2. 다시 조치 메뉴를 클릭하고 승인을 위한 제출을 선택합니다.
제출됨 섹션 아래에서:
1. 조치 메뉴를 클릭하고 Build for Staging을 선택합니다.
2. 조치 메뉴를 클릭하고 퍼블리싱 승인을 선택합니다.
승인됨 섹션 아래 조치 메뉴를 클릭하고 Build & Publish to Production을 선택합니다.
이제 설정이 완료되었습니다.

웹사이트가 모바일에 로딩될 때, 배너의 활성화된 광고 소재가 노출됩니다. 배너를 특정 페이지나 특정 유저 액션에 따라서만 노출시키려면, Adobe Launch 규칙을 참조하십시오.

SDK 함수(function)

showBanner

목적:

스니펫으로 제공된 배너 키에 따라 스마트 배너를 보여주기 시작합니다.

파라미터 (선택 사항):

bannerContainerQuery
이 함수가 전달되면, SDK가 이 쿼리로 페이지 내 요소(element)를 찾으려고 시도하고, 이 요소를 배너 배치를 위한 엔트리 포인트(entry point)로 사용합니다. 혹은 document.body 가 사용됩니다.
bannerZIndex
스마트 배너는 기본적으로 최대 z 색인 값으로 설정되므로 웹 사이트 요소가 숨길 수 없습니다. 이는 일부 웹 사이트 구성요소가 배너의 맨 위에 있도록 하려는 경우에 변경할 수 있습니다.
additionalParams
전달되면, 이 파라미터는 쿼리 파라미터로 원링크 URL에 추가됩니다.

예:

AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,              
              additionalParams: { p1: "v1", p2: "v2"...}});

showBanner({ bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,
              additionalParams: { p1: "v1", p2: "v2"...}});

updateParams

목적

배너가 표시된 후에 CTA(call-to-action) 버튼에 지정된 원링크 URL에 프로그램 방식으로 최대 10개의 파라미터를 추가합니다.

입력은 파라미터 키와 값이 있는 객체입니다.

키는 빈 값을 가질 수 없습니다.
키는 undefined, null, NaN, 또는 arg라는 이름을 가질 수 없습니다.
유효하지 않은 문자:
- Key: /, \, *, !, @, #, ?, $, %, ^, &, ~, `, =, +, ', ", ;, :, >, <
- Value = \, ;, $, >, <, ^, #, `

예

AF ("banners", "updateParams", {p1: "v1", p2: "v2"...})

고려 사항

파라미터는 원링크 URL에 쿼리 파라미터로 추가됩니다.
updateParams를 사용하여 파라미터를 추가하는 경우, 노출 URL은 클릭 URL과 다릅니다.
추가된 파라미터는 원래의 원링크 URL의 파라미터를 대체하지 않습니다. 추가하는 파라미터가 이미 원링크 URL에 있다면, 변경되지 않습니다.
updateParams를 두 번 이상 호출하면 마지막 호출의 파라미터만이 URL에 추가됩니다.
이 방법은 더 이상 사용되지 않는 스마트 배너 웹 SDK에서는 작동하지 않습니다.

hideBanner

목적

페이지에서 노출된 배너를 프로그램으로 제거합니다. (예: X초 동안 노출 후 배너 제거)

AF('banners', 'hideBanner')

disableBanners - 더 이상 사용하지 않음

목적

이 함수는 구 스마트 배너 SDK에서만 사용 가능하며 곧 폐기될 예정입니다.

웹 SDK가 배너를 게재하지 않고 앱스플라이어 서버와 통신하지 않도록 설정합니다.

disableTracking - 더 이상 사용하지 않음

목적

이 함수는 구 스마트 배너 SDK에서만 사용 가능하며 곧 폐기될 예정입니다.

웹 SDK를 끄고, 브라우저로부터 수집한 정보(예: 쿠키, 로컬 스토리지 등)의 흔적을 지웁니다.

setAdditionalParams -더 이상 사용하지 않음

목적

이 함수는 구 스마트 배너 SDK에서만 사용 가능하며 곧 폐기될 예정입니다.

showBanner를 호출하기 전에 additionalParams를 원링크에 설정합니다. 이 파라미터들은 배너 뒤 원링크 URL에 추가됩니다.

파라미터

파라미터
기존 어트리뷰션 링크 파라미터(pid 값 제외)를 덮어쓸 수 있는 키/값 파라미터 맵입니다.

사용법 예시

특정 파라미터를 이용해 랜딩 페이지를 구분할 수 있습니다. 배너 뒤의 원링크에서 추가 파라미터를 추가합니다. 그리고나서 사용자가 배너를 클릭한 후 앱을 설치하면, 원링크의 파라미터가 앱스플라이어 로데이터에 나타납니다. 아래는 af_sub1 parameter를 활용한 코드 예시입니다.

// showBanner()를 호출하기 전에 이 메서드를 호출합니다.
setAdditionalParameters('af_sub': 'custom_paramter_value')

원링크 최종 형식은 다음과 같습니다. subdomain.onelink.me/onelink-id?pid=af_banner&c=campaign&af_sub1=custom_paramter_value

서브 도메인과 원링크 ID는 원링크 템플릿에서 가져옵니다.

예: ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page

유용한 파라미터는 모두 사용할 수 있습니다. 어트리뷰션 링크 파라미터에 대한 더 상세한 내용은 여기를 확인하십시오. pid와 c 파라미터를 덮어쓰지 않도록 주의하십시오. 이 파라미터들은 배너 뒤 어트리뷰션 링크에 이미 존재하고 있습니다.

getAdditionalParams- 더 이상 사용하지 않음

목적

이 함수는 구 스마트 배너 SDK에서만 사용 가능하며 곧 폐기될 예정입니다.

현재 additionalParams 객체를 가져옵니다.

템플릿 유형	이미지 파일 최대 크기	DPI	이미지 비율
Standard	300 KB	72	9:4(가로형)
Enhanced			9:4(가로형)
Promotional			1:1
Interstitial			9:16 (세로형)

Smart Banners

작업 범위

예시

중요!

절차

1. 웹사이트 설정

2. 배너 그룹 설정

예시

3. 배너 설정

4. 테스트하기

추가 정보

배너 그룹 표시 논리

배너 성능에 대한 A/B 테스트

자주 하는 질문

제한 사항

코드 스니펫

참고

스마트 배너만을 사용하는 용도의 앱스플라이어 앱 SDK

스마트 배너와 유저 중심 어트리뷰션(PBA)용 앱스플라이어 웹 SDK

태그 매니저를 사용하여 SDK 추가하기

1단계: Adobe Experience Cloud에 property를 생성합니다.

2단계: 스마트 배너 SDK를 Adobe Launch property에 추가합니다.

4단계: Adobe Launch 환경을 퍼블리시합니다.

SDK 함수(function)

showBanner

목적:

파라미터 (선택 사항):

예:

updateParams

목적

예

고려 사항

hideBanner

목적

disableBanners - 더 이상 사용하지 않음

목적

disableTracking - 더 이상 사용하지 않음

목적

setAdditionalParams -더 이상 사용하지 않음

목적

파라미터

사용법 예시

getAdditionalParams- 더 이상 사용하지 않음

목적

이 섹션의 문서

관련 문서

페이지 내용 :