스마트 배너 v2
개요
앱스플라이어는 광고주가 웹사이트에 삽입할 수 있는 스마트 배너 SDK를 제공합니다. SDK는 필요한 데이터를 가져와 스마트 배너에 데이터를 동적으로 표시합니다. 스마트 배너 SDK는 또, 적절한 어트리뷰션 링크를 자동으로 생성해, 링크를 따로 만들 필요가 없습니다.
따라서 스마트 배너 SDK는 모바일 배너가 게재되는 모든 페이지에서 접근할 수 있어야 합니다.
스마트 배너 SDK는 고유한 웹 키를 이용하여 인증합니다. 웹 키는 웹사이트 작업 공간에서 얻을 수 있습니다.
인스톨
Smart banners only
You can either copy the smart banner script from the AppsFlyer dashboard or from below.
-
Copy the script code snippet in one of the following ways:
- Copy the script from the Smart Banner’s Website workplace in the AppsFlyer dashboard. Your web key is already included in the script.
- Copy the script from the the code snippet below and replace YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
<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');
</script>
- Paste the code snippet in the
head
태그에 붙여 넣습니다. 반드시head
태그의 맨 위 가까이에 붙여넣도록 하십시오.
참고
The
showBanner
메소드는 설치 코드 끝에 있으며 더 많은 파라미터를 사용할 수 있습니다. 더 알아보기
Smart banners and People-Based Attribution
- Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
- 스크립트 내 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>
스마트 배너 글꼴 제어
웹 사이트의 나머지 부분과 동일한 글꼴을 스마트 배너에 사용하면 브랜드의 일관성 있고 응집력 있는 시각적 정체성을 만들 수 있습니다.
스마트 배너에서 기본 글꼴을 변경하려면 다음의 규칙을 CSS에 추가해야 합니다
[data-af-custom-fonts="af-creatives-text"] {
font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}
예시:
[data-af-custom-fonts="af-creatives-text"] {
font-family: museo-sans !important;
}
- The
!important
필수- 글꼴이 웹 사이트에 이미 로드되어 있는지 확인하십시오.
- 맞춤형 글꼴은 웹사이트의 모든 배너에 적용됩니다.
- 글꼴이 제대로 표시되지 않으면 광고소재 편집기에서 배너를 다시 저장하세요.
SDK 함수(function)
showBanner
Method signature
AF('banners', 'showBanner', { bannerContainerQuery: String,
bannerZIndex: Integer,
additionalParams: <Key, Value Dictionary>);
설명
스니펫으로 제공된 배너 키에 따라 스마트 배너를 보여주기 시작합니다.
참고
(브라우저가 아닌) 앱에서 배너 페이지를 로드하기 위해 래퍼/하이브리드 앱에서 스마트 배너를 구현할 때는 이 기능을 사용하지 마십시오.
showBanner
를 사용하면 앱 내에 배너가 표시됩니다. 래퍼/하이브리드 앱에showBanner
를 사용하는 경우 모바일 앱 로드에hideBanner
를 사용하십시오.
입력 인수
유형 | 이름 | 설명 |
---|---|---|
String | bannerContainerQuery | 이 메서드가 전달되면, SDK가 이 쿼리로 페이지 내 요소(element)를 찾으려고 시도하고, 이 요소를 배너 배치를 위한 엔트리 포인트(entry point)로 사용합니다. 그렇지 않은 경우 document.body 가 사용됩니다. |
Integer | bannerZIndex | 스마트 배너는 기본적으로 최대 z-지수 값으로 설정되어 있으므로 웹사이트 요소에 의해 숨겨지지 않습니다. 일부 웹 사이트 구성 요소를 배너 상단에 표시하려는 경우 변경할 수 있습니다. |
<Key, Value Dictionary> | additionalParams | 전달되면 이러한 키와 값(예를 들어, deep_link_value: apples )이 원링크 URL에 쿼리 파라미터로 추가됩니다. |
사용법 예시
- 파라미터를 원링크 URL에 추가
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
- 이 배너의 Z 인덱스와 해당 배치에 대한 컨테이너 ID를 설정합니다
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
bannerZIndex: 999});
updateParams
Method signature
AF('banners', 'updateParams', { <Key, Value Dictionary> });
설명
배너가 표시된 후 CTA(콜투액션) 버튼에 할당된 원링크 URL에 최대 10개의 파라미터(예를 들어, deep_link_value
)를 프로그래밍 방식으로 추가합니다.
입력은 파라미터 키와 값이 있는 객체입니다.
키는 빈 값을 가질 수 없습니다.
키의 이름을 null, NaN, 또는 arg로 지정할 수 없습니다
잘못된 문자:
키: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
값 = \, ;, $, >, <, ^, #, ``
- 파라미터는 원링크 URL에 쿼리 파라미터로 추가됩니다.
- updateParams를 사용하여 파라미터를 추가하는 경우, 노출 URL은 클릭 URL과 다릅니다.
- 추가된 파라미터는 원래의 원링크 URL의 파라미터를 대체하지 않습니다. 추가하는 파라미터가 이미 원링크 URL에 있다면, 변경되지 않습니다.
- updateParams를 두 번 이상 호출하면 마지막 호출의 파라미터만이 URL에 추가됩니다.
입력 인수
유형 | 이름 | 설명 |
---|---|---|
<Key, Value Dictionary> | N/A | 이러한 키와 값(예를 들어, deep_link_value: apples )이 원링크 URL에 쿼리 파라미터로 추가됩니다. |
사용법 예시
- 파라미터를 원링크 URL에 추가
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});
hideBanner
Method signature
AF('banners', 'hideBanner');
설명
)은 페이지에서 표시된 배너(예: 특정 사용자 입력 후)를 프로그래밍 방식으로 제거합니다.
입력 인수
N/A
사용법 예시
- 배너 숨기기
AF('banners', 'hideBanner');
Traits and Limitations
항목 | 설명 |
---|---|
Single page application (SPA) | Smart Banners are by default only displayed once, even if users navigate between pages. To display banners when users navigate between pages, you need to manually call hideBanner and showBanner for every navigation that doesn't reload the page and trigger the Smart Banners default logic. |
최신 데이터 9개월 전