React Native 네이티브 광고

1. 네이티브 광고 레이아웃 만들기

네이티브 광고 에서는 다음과 같은 view 의 종류들이 포함 될 수 있습니다.

• 프로필 로고

• 프로필 이름

• 제목

• 내용

• 소재 이미지

예를 들어, 소셜 피드 형식의 네이티브 광고를 구성한다면 다음과 같은 레이아웃을 만들 수 있습니다.

• AdropNativeAdView - parent view

  • AdropProfileLogoView - 프로필 로고

  • AdropProfileNameView - 프로필 이름

  • AdropHeadLineView - 제목

  • AdropBodyView - 내용

  • AdropMediaView - 소재

    • 제목, 내용, 소재 컴포넌트를 제공하지만 자유롭게 사용하실 수 있도록 필드 데이터를 제공합니다.

  

<AdropNativeAdView
    nativeAd={nativeAd}
    style={{
        ...styles.adContainer,
        width: Dimensions.get('window').width,
    }}
>
    <View style={styles.rowContainer}>
        // 아래의 컴포넌트로 광고주 프로필을 표시하실 수 있지만, 필드 데이터로 자유롭게 구현하셔도 됩니다.
        <AdropProfileLogoView style={styles.icon} />
        <AdropProfileNameView style={styles.name} />
    </View>

    <AdropHeadLineView style={styles.headline} />
    <AdropBodyView style={styles.body} />
    
    // 아래의 컴포넌트로 소재 이미지를 랜더링 하실 수 있습니다.
    // 콘솔에서 정의하신 사이즈와 동일하게 소재 사이즈를 스타일링 해주세요.
    <AdropMediaView
        style={{
            ...styles.adStyle,
        }}
    />
</AdropNativeAdView>

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

2. 네이티브 광고 불러오기

Native	PUBLIC_TEST_UNIT_ID_NATIVE
Native Video (16:9)	PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9
Native Video (9:16)	PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { View, Button, Dimensions } from 'react-native'
import { WebView } from 'react-native-webview'
import {
  AdropNativeAd,
  AdropNativeAdListener,
  AdropNativeAdView,
  AdropProfileLogoView,
  AdropProfileNameView,
  AdropHeadLineView,
  AdropBodyView,
} from '@adrop/react-native-ads'

const YourComponent: React.FC = () => {
  const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
  const [isLoaded, setIsLoaded] = useState(false)

  const initialize = useCallback(
      (unitId: string) => {
          // 비디오 광고 컨트롤 활성화를 위해 useCustomClick을 true로 설정
          let adropNativeAd = new AdropNativeAd(unitId, true)
          adropNativeAd.listener = listener
          setNativeAd((prev) => {
              prev?.destroy()
              return adropNativeAd
          })
      },
      [listener]
  )

  const listener = useMemo(
      (): AdropNativeAdListener => ({
          onAdReceived: (ad: AdropNativeAd) => {
              console.log(`nativeAd received ${ad.unitId}`, ad.properties)
              // 커스텀 필드를 추가하셨다면, ad.properties.extra 에서 추가된 값들을 받으실 수 있습니다.
              setIsLoaded(true)
          },
          onAdFailedToReceive: (_, error) => {
              console.log('nativeAd onAdFailedToReceive', error)
          },
          onAdClicked: (ad) => console.log(`nativeAd clicked ${ad.unitId}`),
      }),
      []
  )

  useEffect(() => {
      initialize(testUnitId_native)
  }, [initialize])

  const load = () => nativeAd?.load()

  // WebView로 비디오/이미지 광고 렌더링
  const renderMediaContent = () => {
      if (!nativeAd?.properties?.creative) return null

      return (
          <WebView
              source={{ html: nativeAd.properties.creative }}
              style={styles.adStyle}
              javaScriptEnabled={true}
              domStorageEnabled={true}
              allowsInlineMediaPlayback={true}
              mediaPlaybackRequiresUserAction={false}
              // 비디오 광고를 위한 설정
              allowsFullscreenVideo={true}
              bounces={false}
              scrollEnabled={false}
              onShouldStartLoadWithRequest={() => true}
          />
      )
  }

  const adView = useMemo(() => {
      if (!isLoaded) return null

      return (
          <AdropNativeAdView
              nativeAd={nativeAd}
              style={{
                  ...styles.adContainer,
                  width: Dimensions.get('window').width,
              }}
          >
              <View style={styles.rowContainer}>
                  <AdropProfileLogoView style={styles.icon} />
                  <AdropProfileNameView style={styles.name} />
              </View>

              <AdropHeadLineView style={styles.headline} />
              <AdropBodyView style={styles.body} />

              {/* AdropMediaView 대신 WebView 사용 */}
              {renderMediaContent()}
          </AdropNativeAdView>
      )
  }, [isLoaded, nativeAd])

  return (
      <View>
          <View>
              <Button title={'nativeAd load'} onPress={load} />
          </View>
          <View>{adView}</View>
      </View>
  )
}

3. 커스텀 필드 데이터 추가 및 자유로운 이미지 소재 사용하기

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

const YourComponent: React.FC = () => {
    const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
    const [isLoaded, setIsLoaded] = useState(false)
    const [customContents, setCustomContents] = useState<Record<string, string>>()
    const [adAsset, setAdAsset] = useState<string>('');
    
    const initialize = useCallback(
        (unitId: string) => {
            let adropNativeAd = new AdropNativeAd(unitId)
            adropNativeAd.listener = listener
            setNativeAd((prev) => {
                prev?.destroy()
                return adropNativeAd
            })
        },
        [listener]
    )
    
    const listener = useMemo(
        (): AdropNativeAdListener => ({
            onAdReceived: (ad: AdropNativeAd) => {
                console.log(`nativeAd received ${ad.unitId}`, ad.properties) 
                // 커스텀 필드를 추가하셨다면, ad.properties.extra 에서 추가된 값들을 받으실 수 있습니다.
                // 이미지 소재를 커스텀하게 사용하시려면, ad.properties.asset 데이터를 사용하시면 됩니다.
                ...
                setCustomContents(ad.properties.extra)
                setAdAsset(ad.properties.asset)
            },
            onAdFailedToReceive: (_, error) => {
                console.log('nativeAd onAdFailedToReceive', error)
            },
            onAdClicked: (ad) => console.log(`nativeAd clicked ${ad.unitId}`),
        }),
        []
    )
    
    useEffect(() => {
        initialize(testUnitId_native)
    }, [initialize])
    
    const load = () => nativeAd?.load()
    
    const adView = useMemo(() => {
        if (!isLoaded) return null

        return (
            <AdropNativeAdView
                nativeAd={nativeAd}
                style={{
                    ...styles.adContainer,
                    width: Dimensions.get('window').width,
                }}
            >
                <View style={styles.rowContainer}>
                    <Text>{customContents['t1']}</Text>
                    <Text>{customContents['t2']}</Text>
                    <Text>{customContents['t3']}</Text>
                </View>
            </AdropNativeAdView>
        )
    }, [isLoaded, nativeAd])
        
    return (
        <View>
            <View>
                <Button title={'nativeAd load'} onPress={load} />
            </View>
            <View>{adView}</View>
        </View>
    )
}
    

​비디오 광고 설정

비디오 광고의 재생 컨트롤(play, pause 등)을 활성화하려면 useCustomClick을 true로 설정해야 합니다.

적용 확인하기​

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

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

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