# React Native 스플래시 광고

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

<figure><img src="https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FVPYlv3y2ewY8LvtqR88u%2F%E1%84%89%E1%85%B3%E1%84%91%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B5%20%E1%84%80%E1%85%A9%E1%86%BC%E1%84%90%E1%85%A9%E1%86%BC%20%E1%84%91%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%84%8B%E1%85%AE.png?alt=media&#x26;token=027f504e-9823-428d-a3cd-720b3935cc22" alt=""><figcaption></figcaption></figure>

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

[Android 스플래시 규격](https://help.adrop.io/adcontrol/~/revisions/8eSMgfbHgvVNVzbiHgnc/developer-guide/adrop-sdk/android-sdk/splash) 확인하기 / [iOS 스플래시 규격](https://help.adrop.io/adcontrol/~/revisions/8eSMgfbHgvVNVzbiHgnc/developer-guide/adrop-sdk/ios-sdk/splash-ad) 확인하기

## 0 단계: 콘솔에서 광고 유닛 등록하기 <a href="#add-a-d-unit" id="add-a-d-unit"></a>

{% hint style="info" %}
자세한 가이드는, [광고 유닛 생성 가이드](https://help.adrop.io/adcontrol/~/revisions/8eSMgfbHgvVNVzbiHgnc/appdeveloper-guide/ad-unit)를 참고해 주세요.
{% endhint %}

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

<figure><img src="https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FPf1BjInWzFDKeMHYKtN6%2Fimage.png?alt=media&#x26;token=203cadbf-a084-48d3-b465-f91054b06469" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FKVYfd42cVq5U75dZdNOf%2Fimage.png?alt=media&#x26;token=d14376cd-5b7a-49b7-ac86-daaa4e7a34de" alt=""><figcaption></figcaption></figure>

## 1 단계 : 스플래시 광고 노출하기 <a href="#live-splash" id="live-splash"></a>

{% hint style="info" %}
로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST\_UNIT\_ID를 사용해주세요.

자세한 예시는 [Github](https://github.com/OpenRhapsody/adrop-ads-react-native/tree/master)에서 확인하실 수 있습니다.'
{% endhint %}

| Ad type | Ad unit ID                     |
| ------- | ------------------------------ |
| Splash  | PUBLIC\_TEST\_UNIT\_ID\_SPLASH |

{% tabs %}
{% tab title="Android" %}

### Step 1. Add resources

Replace your init activity, unit id

```xml
<?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

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

### - values-v31/theme.xml

1. Add your [logo image (288x288)](https://developer.android.com/develop/ui/views/launch/splash-screen#dimensions) to `drawable` and replace `windowSplashScreenAnimatedIcon`
2. Replace `windowSplashScreenBackground` to your splash background color

```xml
<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`

```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.&#x20;
2. **Do not remove `adrop_splash_ad_image` ImageView for splash ad**

{% file src="<https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FUMPJC1ESC76Saiw1TPwH%2Factivity_adrop_splash_ad.xml?alt=media&token=d34ac4b8-0e5b-48ad-bde6-6d9bfd3b3232>" %}

### Step 4. run android (debug)

<pre class="language-bash"><code class="lang-bash"><strong>react-native run-android --main-activity io.adrop.ads.splash.AdropSplashAdActivity
</strong></code></pre>

{% endtab %}

{% tab title="iOS" %}

### Step 1. Change `LaunchScreen.storyboard`

Add your logo image

{% file src="<https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FMspiJxQZSVCYno5SCumq%2FLaunchScreen.storyboard?alt=media&token=87e8251c-fad7-4f43-8664-5ce6006e4a13>" %}

### Step 2. Update `AppDelegate.mm`

```swift
...
- (UISceneConfiguration *)application:(UIApplication *)application configurationForConnectingSceneSession:(UISceneSession *)connectingSceneSession options:(UISceneConnectionOptions *)options {
    return [[UISceneConfiguration alloc] initWithName:@"Default Configuration" sessionRole:connectingSceneSession.role];
}

- (void)application:(UIApplication *)application didDiscardSceneSessions:(NSSet<UISceneSession *> *)sceneSessions {}
...
```

### Step 3. Create `SceneDelegate`

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

```swift
import UIKit
import AdropAds

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let windowScene = (scene as? UIWindowScene) else { return }

        self.window = UIWindow(windowScene: windowScene)

       // 스플래시 광고 요청 전에, Adrop instance를 초기화 해주세요.
       // production 배포 시, 'true'를 사용하세요.
       // 특정 국가에서 이 SDK를 사용하고 있다면,
       // ISO 3166 alpha-2 국가 코드 array를 전달하세요.
       // 타겟 링크가 열리는 브라우저 설정이 필요하다면, useInAppBrowser 값을 바꿔주세요.

       Adrop.initialize(production: false, targetCountries: [], useInAppBrowser: false);

        let splashViewController = AdropSplashAdViewController(unitId: "PUBLIC_TEST_UNIT_ID_SPLASH")
        splashViewController.backgroundColor = splashViewController.traitCollection.userInterfaceStyle == .dark ? .black : .white
        splashViewController.logoImage = UIImage(named: "splashLogo")
        splashViewController.mainViewController = UIStoryboard(name: "Main", bundle: nil).instantiateInitialViewController()
        splashViewController.delegate = self

        self.window?.rootViewController = splashViewController
        self.window?.makeKeyAndVisible()
    }
...
}
```

### Step 4. Update `Info.plist`

```
...
<key>UIApplicationSceneManifest</key>
<dict>
    <key>UIApplicationSupportsMultipleScenes</key>
    <true/>
    <key>UISceneConfigurations</key>
    <dict>
        <key>UIWindowSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneConfigurationName</key>
                <string>Default Configuration</string>
                <key>UISceneDelegateClassName</key>
                <string>SceneDelegate</string>
            </dict>
        </array>
    </dict>
</dict>
...
```

{% endtab %}
{% endtabs %}

## 적용 확인하기 <a href="#check-splash-activity" id="check-splash-activity"></a>

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

{% hint style="info" %}
광고 유닛에 연결된 광고가 없다면, 스플래시 광고가 랜더링 되지 않습니다.\
따라서 스플래시 광고가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST\_UNIT\_ID 를 사용해 주세요.

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

<figure><img src="https://114331753-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F80r9IosbRVD44m7nPdej%2Fuploads%2FsC5yCTttkmG4oj60sPXX%2Fimage%20(2).png?alt=media&#x26;token=b9ce7b40-1cdc-427f-9d2b-568aee287594" alt=""><figcaption></figcaption></figure>
