Flutter 스플래시 광고

스플래시 광고는 앱이 최초 실행될 때, 앱의 로고와 함께 화면 하단에 1초 내외의 짧은 시간동안 보여지는 광고를 말합니다. 앱 기동 시 Adrop SDK의 스플래시 광고 스크린이 가장 먼저 표시되도록 구현하여 자연스럽게 광고를 노출한 후 앱의 메인 화면으로 넘어갑니다.

디바이스별 자세한 사항은 아래 링크를 참고해주세요.

Android 스플래시 규격 확인하기 / iOS 스플래시 규격 확인하기

0 단계: 콘솔에서 광고 유닛 등록하기

자세한 가이드는, 광고 유닛 생성 가이드를 참고해 주세요.

Adrop 콘솔에서 팝업 광고 유닛을 생성합니다.

광고 유닛 리스트에서 생성된 유닛 아이디를 복사합니다.

1 단계 : 스플래시 광고 노출하기

로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST_UNIT_ID를 사용해주세요.

자세한 예시는 Github에서 확인하실 수 있습니다.

Ad type

Ad unit ID

Splash

PUBLIC_TEST_UNIT_ID_SPLASH

Step 1. Add resources

Replace your init activity, unit id

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="adrop_splash_ad_next_activity" translatable="false">{your_init_activity}</string> <!-- com.company.app.MainActivity -->
    <string name="adrop_splash_ad_unit_id" translatable="false">{your_splash_unit_id}</string> <!-- PUBLIC_TEST_UNIT_ID_SPLASH for test -->
    <integer name="adrop_splash_ad_max_timeout">1000</integer> <!-- (optional) default 1s -->
</resources>

- values/theme.xml

replace parent to your application theme

<style 
    name="Theme.App.SplashTheme"
    parent="Theme.AppCompat.NoActionBar"/>

- values-v31/theme.xml

Add your logo image (288x288) to drawable and replace windowSplashScreenAnimatedIcon
Replace windowSplashScreenBackground to your splash background color

<style "Theme.App.SplashTheme" parent="Theme.SplashScreen"> 
    <item name="windowSplashScreenAnimatedIcon">@drawable/your_logo</item>
    <item name="windowSplashScreenBackground">#ffffff</item>
    <item name="windowSplashScreenAnimationDuration">200</item>
    <item name="postSplashScreenTheme">@style/Theme.App.SplashTheme.TranslucentStatus</item>
</style>

<style name="Theme.App.SplashTheme.TranslucentStatus" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
</style>

Step 2. Update `Androidmanifest.xml`

<application>
	...
	<activity
	    android:name="io.adrop.ads.splash.AdropSplashAdActivity"
	    android:exported="true"
	    android:theme="@style/Theme.App.SplashTheme"
            tools:replace="android:theme">
	    <intent-filter>
	        <action android:name="android.intent.action.MAIN"/>
	        <category android:name="android.intent.category.LAUNCHER"/>
	    </intent-filter>
	</activity>
	...
</application>

Step 3. Add `layout/activity_adrop_splash_ad.xml`

Replace your logo path and background color.
Do not remove adrop_splash_ad_image ImageView for splash ad

915B

activity_adrop_splash_ad.xml

Step 1. Change `LaunchScreen.storyboard`

Add your logo image

4KB

LaunchScreen.storyboard

Step 2. Update `AppDelegate.swift`

Replace your logo name, unit id. Customize background color, timeout if you want.

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        // production 배포 시, 'true'를 사용하세요.
        // 특정 국가에서 이 SDK를 사용하고 있다면, 
        // ISO 3166 alpha-2 국가 코드 array를 전달하세요.
        // 타겟 링크가 열리는 브라우저 설정이 필요하다면, useInAppBrowser 값을 바꿔주세요.
        Adrop.initialize(production: false, targetCountries: [], useInAppBrowser: false)
        
        let splashViewController = AdropSplashAdViewController(unitId: "YOUR_UNIT_ID")
        splashViewController.backgroundColor = UIColor(white: 1, alpha: 1)
        splashViewController.logoImage = UIImage(named: "YOUR_LOGO_NAME")
        splashViewController.mainViewController = controller
        splashViewController.delegate = self

        self.window?.rootViewController = splashViewController
        self.window?.makeKeyAndVisible()
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

적용 확인하기

여기서 광고 유닛이 제대로 적용 되었는지 확인하는 방법을 알아보세요.

PreviousFlutter 팝업 광고 NextFlutter 네이티브 광고

Last updated 2 months ago