React Native 스플래시 광고

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

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

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

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

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

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

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

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

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

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

Ad type	Ad unit ID
Splash	PUBLIC_TEST_UNIT_ID_SPLASH

Android

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

1. Add your logo image (288x288) to drawable and replace windowSplashScreenAnimatedIcon

2. 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

1. Replace your logo path and background color.

2. Do not remove adrop_splash_ad_image ImageView for splash ad

915B

activity_adrop_splash_ad.xml

Open

Step 4. run android (debug)

react-native run-android --main-activity io.adrop.ads.splash.AdropSplashAdActivity

iOS

적용 확인하기

console에서 발급받은 unitId가 한 번이라도 광고요청을 할 경우 성공적으로 연결됩니다.

광고 유닛에 연결된 광고가 없다면, 스플래시 광고가 랜더링 되지 않습니다. 따라서 스플래시 광고가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST_UNIT_ID 를 사용해 주세요.

TEST_UNIT_ID 를 사용하면 스플래시 광고 랜더링 확인은 할 수 있지만, console과 연결되지는 않습니다. 따라서 성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.