팝업 배너 광고

아래 가이드에서는 팝업 배너 광고를 로드하고, 표시하는 방법을 설명합니다.

기본 요건

시작 가이드에 따라 필요한 과정을 완료합니다.


테스트 광고 게재위치

Placement Code(게재위치 코드)는 어드민의 인벤토리 > 게재위치 메뉴에서 게재위치를 등록 시 시스템을 통해 자동으로 생성됩니다.

테스트 게재위치 목록

placementCode
설명

SAMPLE_POPUP_BANNER_APP

  • 320x320 이미지 + 애드뱃지

  • 모서리 스타일: 직각

  • 버튼 스타일: 버튼형

  • 버튼 위치: 이미지 하단

  • 좌측 버튼 문구: 오늘 그만보기

  • 우측 버튼 문구: 닫기

어드민의 인벤토리 > 광고상품 > 광고상품 등록 메뉴에서 팝업 배너 광고의 소재 스펙 및 기본 레이아웃을 설정할 수 있습니다.


광고 표시하기

  1. 팝업 광고가 표시되기 원하는 화면에서 NestAdsPopupAdView 를 설정하고 로드합니다.

val popupAdView = NestAdsPopupAdView(this)

// 게재위치 설정
popupAdView.placementCode = "SAMPLE_POPUP_BANNER_APP"
//(선택) 팝업 배너 영역의 사이즈를 설정할 수 있습니다. 설정하지 않으면 기본 여백값 기준으로 표기됩니다.
popupAdView.setAdSize(NestAdsAdSize(320, 320))

// 광고 리스너를 설정
popupAdView.adListener = object : NestAdsAdListener() {
   override fun onAdLoaded() {
      //광고 로드가 완료되면 할 행동
   }

  ...
}
popupAdView.popupAdListener = object : NestAdsPopupAdListener() {
    override fun onLeftButtonClicked() {
       // 왼쪽 버튼을 누르면 할 행동
    }

    override fun onRightButtonClicked() {
       // 오른쪽 버튼을 누르면 할 행동
    }
   ...
}

// 팝업의 스타일 관련 옵션 설정
popupAdView.setOptions(NestAdsPopupAdViewOptions.Builder().build())

// 광고를 요청합니다.
popupAdView.loadAd(NestAdsAdRequest.Builder().build())
  1. 광고 상품별로 왼쪽, 오른쪽 버튼에 들어가는 텍스트가 달라질 수 있기 때문에 왼쪽, 오른쪽 버튼에 기본 동작이 따로 정의되어있지 않습니다. NestAdsPopupAdListener 에 원하는 동작을 꼭 구현해야 합니다.

popupAdView.popupAdListener = object : NestAdsPopupAdListener() {
    override fun onLeftButtonClicked() {
       // 왼쪽 버튼을 누르면 할 행동
       handleDoNotShowToday() // "오늘 그만보기" 구현
       popupAdView.dismiss()
    }

    override fun onRightButtonClicked() {
       // 오른쪽 버튼을 누르면 할 행동
       // "닫기" 구현
       popupAdView.dismiss()
    }
}
  1. 광고 로드 후 원하는 시점에 .show() 를 호출해 광고를 표시합니다.

// 광고 리스너를 설정
popupAdView.adListener = object : NestAdsAdListener() {
   override fun onAdLoaded() {
      popupAdView.show()
   }

  ...
}
  1. 원하는 시점에 .dismiss() 를 호출해 팝업을 닫습니다.

popupAdView.popupAdListener = object : NestAdsPopupAdListener() {
   ...
    override fun onRightButtonClicked() {
       // 오른쪽 버튼을 누르면 할 행동
       // "닫기" 구현
       popupAdView.dismiss()
    }
    ...
}

오늘 그만보기 구현 예시

Room Database를 활용한 구현 예시입니다.

  1. StopPopupAdViewToday.kt - 데이터 엔티티 정의

@Entity(tableName = "stop_popup_ad_view_today")
data class StopPopupAdViewToday(
    @PrimaryKey(autoGenerate = true)
    @ColumnInfo(name = "id")
    val id: Long = 0,

    @ColumnInfo(name = "expired")
    var expired: LocalDate? // 만료 날짜
)
  1. StopPopupAdViewTodayDatabase.kt - Room Database 설정


@Database(entities = [StopPopupAdViewToday::class], version = 1, exportSchema = false)
@TypeConverters(LocalDateConverter::class)
abstract class StopPopupAdViewDatabase : RoomDatabase() {

    abstract fun stopPopupAdViewTodayDao(): StopPopupAdViewTodayDao

    companion object {
        @Volatile
        private var INSTANCE: StopPopupAdViewDatabase? = null

        fun getDatabase(context: Context): StopPopupAdViewDatabase {
            return INSTANCE ?: synchronized(this) {
                val instance = Room.databaseBuilder(
                    context.applicationContext,
                    StopPopupAdViewDatabase::class.java,
                    "stop_popup_ad_view_database"
                ).build()
                INSTANCE = instance
                instance
            }
        }
    }
}

3. LocalDateConverter.kt - LocalDate 타입 변환기

class LocalDateConverter {

    @TypeConverter
    fun fromLocalDate(date: LocalDate?): String? {
        return date?.toString()
    }

    @TypeConverter
    fun toLocalDate(dateString: String?): LocalDate? {
        return dateString?.let { LocalDate.parse(it) }
    }
}

4. StopPopupAdViewTodayDao.kt - DAO 인터페이스 정의

@Dao
interface StopPopupAdViewTodayDao {
    @Query("SELECT * FROM stop_popup_ad_view_today ORDER BY id DESC LIMIT 1")
    suspend fun getLatestPopup(): StopPopupAdViewToday?

    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun upsert(stopPopupAdViewToday: StopPopupAdViewToday)
}

5. StopPopupAdViewTodayRepository.kt - Repository 클래스 정의

class StopPopupAdViewTodayRepository(private val stopPopupAdViewTodayDao: StopPopupAdViewTodayDao) {

    suspend fun getLatestPopup(): StopPopupAdViewToday? {
        return stopPopupAdViewTodayDao.getLatestPopup()
    }

    suspend fun saveStopPopup() {
        stopPopupAdViewTodayDao.upsert(StopPopupAdViewToday(expired = LocalDate.now()))
    }
}

6. 팝업 표시 조건 함수 및 "오늘 그만 보기" 함수

//오늘 그만보기 버튼을 누르면 호출할 함수
suspend fun handleDoNotShowToday() {
    val database = StopPopupAdViewDatabase.getDatabase(context)
    val repository = StopPopupAdViewTodayRepository(database.stopPopupAdViewTodayDao())

    //DB에 저장
    repository.saveStopPopup()
    //팝업 닫기
    popupAdView.dismiss()
}

// 팝업 표시 함수
suspend fun show() {
    val database = StopPopupAdViewDatabase.getDatabase(context)
    val repository = StopPopupAdViewTodayRepository(database.stopPopupAdViewTodayDao())
    val latestPopup = withContext(Dispatchers.IO) { repository.getLatestPopup() }
    val today = LocalDate.now()

    val stopPopup = database.stopPopupDao().getLastOne()

    // 오늘은 그만보기가 저장되어 있지 않거나, 날짜가 다르면 팝업 표시
    if (latestPopup?.expired != today) {
        popupAdView.show()  // 팝업 표시
    } else {
     ...
    }
}

돌아가기, 닫기 구현 예시

popupAdView.dismiss()

앱 종료 구현 예시

finishAffinity()

광고 리스너

NestAdsPopupAdView 에서 지원하는 광고 리스너는 다음을 참고하세요.

Last updated