Android

안드로이드 하이브리드 환경에서 AdFit Web SDK 연동을 위한 가이드입니다.

0. AdFit SDK 연동

AdFit 광고 송출을 위해서는 우선 AdFit Android SDK v3.16.0 연동이 필요합니다.

먼저 최상위 build.gradle 파일에 Maven repository를 추가합니다.

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }
    }
}

App 모듈 build.gradle 파일에 최신 버전의 AdFit SDK를 추가합니다.

dependencies {
    implementation "com.google.android.gms:play-services-ads-identifier:$play_service_version"
    implementation 'org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.4.10'
    implementation 'com.kakao.adfit:ads-base:3.16.0'
}

설정 후, 툴바의 Sync Project with Gradle Files를 눌러 변경사항을 반영합니다.

1. WebPage 환경 설정

1.1 스크립트 설치

스크립트 설치는 페이지 내에 다른 리소스에 영향을 주지 않도록 페이지 맨 하단에 </body> 부분 바로 위에 설치하는 것이 좋습니다.

이때, 설치하고자 하는 페이지에 따라 설정 방법이 달라질 수 있습니다.

<script async type="text/javascript" charset="utf-8" src="https://t1.daumcdn.net/kas/static/ba.min.js">

1.2 기본적인 광고 스크립트 설정

광고를 노출할 페이지에 다음과 같은 광고 설정 스크립트를 삽입합니다.

광고 스크립트 안에 담긴 광고단위 정보는 변경해서 설치해서는 안됩니다.

코드를 수정해서 설치할 경우 광고 요청에 실패하거나 잘못된 광고 요청으로 처리될 수 있습니다.

<ins class="kakao_ad_area" style="display:none;width:100%;"
 data-ad-unit    = "광고단위ID"
 data-ad-width   = "광고단위 가로 사이즈"
 data-ad-height  = "광고단위 세로 사이즈"></ins>
<script async type="text/javascript" charset="utf-8" src="https://t1.daumcdn.net/kas/static/ba.min.js"></script>

1.3 No-Ad 콜백 설정하기

광고 요청이 실패하거나 노출할 광고가 없는 경우에 이를 제어하도록 NO-AD 콜백 함수를 설정할 수 있습니다. 애드팝콘 SSP 사업팀을 통해 발급받은 AdFit 코드를 아래와 같이 Callback 함수 요소를 추가하여 설정할 수 있습니다.

<ins ...
 data-ad-onfail   = "callBackFunc" // NO-AD시 실행될 Callback 함수명
 ... ></ins>

<script type="text/javascript">
 function callBackFunc(arg1) {
   /*
    * TODO: 기능 구현
    */
 }
</script>

Callback 함수 실행시 ins 태그 객체를 첫 번째 인자(arg1)로 전달 받습니다. 또한 한 페이지 내 2개 이상의 광고단위 설치 시 Callback 메서드 명을 달리 해야 합니다.

1.4 예시 (외부 광고 스크립트를 삽입하는 경우)

외부 광고 스크립트를 삽입하는 경우 동일한 사이즈의 외부 광고를 사용하여야 합니다.

(예시. Google AdSense 코드. 외부 광고 코드 유형은 반드시 “비동기” 방식을 사용하여야 합니다.)

<html>
<head>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   
<script type="text/javascript">
function callBackFunc(elm) {  
    text = [];  
    text.push('<ins class="adsbygoogle"');  
    text.push('style="display:inline-block;width:250px;height:250px"');  
    text.push('data-ad-client="ca-pub-7893835816116192"');  
    text.push('data-ad-slot="5918517081"></ins>');  
   
    elm.innerHTML = text.join(' ');  
    (adsbygoogle = window.adsbygoogle || []).push({});  
}  
</script>
</head>
<body>
    <ins class="kakao_ad_area" style="display:none;"  
            data-ad-unit="ADUNIT_ID"  //AdFit에서 발급 받은 광고단위코드 값  
            data-ad-width="250"  // 광고단위 가로 사이즈
            data-ad-height="250"  // 광고단위 세로 사이즈
            data-ad-onfail="callBackFunc"</ins>
   
    <script async type="text/javascript" charset="utf-8" src="https://t1.daumcdn.net/kas/static/ba.min.js">
    </script>
</body>
</html>

2. Native Side(Android) 환경 설정

2.1 WebView 초기화

광고를 송출을 위해 WebView를 AdFit SDK에 등록하는 과정이 필요합니다. 광고를 송출하려는 WebView를 Main Thread 상에서 아래와 같은 설정과 함께 AdFitSdk.register(webView: WebView)를 호출하여 광고 송출에 필요한 설정을 합니다.

import android.webkit.CookieManager
import android.webkit.WebView
import com.kakao.adfit.AdFitSdk

class MainActivity : AppCompatActivity() {

    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webview)
        initializeWebView(webView)
    }

    @MainThread
    private fun initializeWebView(webView: WebView) {
        // 3자 쿠키 사용 설정 허용
        CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true)

        // JavaScript 사용 설정
        webView.getSettings().javaScriptEnabled = true

        // Local Storage 사용 설정
        webView.getSettings().domStorageEnabled = true

        // 비디오 자동 재생 허용 설정
        webView.getSettings().mediaPlaybackRequiresUserGesture = false

        // AdFit SDK에 WebView 등록
        AdFitSdk.register(webView)
    }
}

2.2 비디오 광고 자동 재생 설정하기

앱의 설정에 따라 AdFit을 통해 송출되는 비디오 광고의 자동 재생 여부를 아래와 같이 설정할 수 있습니다. 설정하지 않을 경우, 기본 값은 AdFitVideoAutoPlayPolicy.WIFI_ONLY (WiFi 연결 상태에서만 자동 재생)입니다.

// 자동 재생하지 않음
AdFitSdk.mediaAutoPlayPolicy = AdFitVideoAutoPlayPolicy.NONE

// WiFi 연결 상태에서만 자동 재생
AdFitSdk.mediaAutoPlayPolicy = AdFitVideoAutoPlayPolicy.WIFI_ONLY

// 항상 자동 재생
AdFitSdk.mediaAutoPlayPolicy = AdFitVideoAutoPlayPolicy.ALWAYS

Previous하이브리드 앱- Web(Adfit)NextiOS2

Last updated 11 days ago

hashtag0. AdFit SDK 연동

hashtag1. WebPage 환경 설정

hashtag2. Native Side(Android) 환경 설정

hashtag2.1 WebView 초기화

hashtag2.2 비디오 광고 자동 재생 설정하기

0. AdFit SDK 연동

1. WebPage 환경 설정

2. Native Side(Android) 환경 설정

2.1 WebView 초기화

2.2 비디오 광고 자동 재생 설정하기