Skip to main content

Native Advanced

warning

이 기능은 현재 사전 협의된 매체에만 제공됩니다.

지속적으로 개발되고 있는 기능으로, API가 예고 없이 변경될 수 있습니다.

Native Advanced 광고는 매체가 직접 광고의 레이아웃을 구성할 수 있는 광고 형식입니다.

Crafting Ad Layout​

NativeAd 네임스페이스를 import하여, 광고 레이아웃을 구성하는 컴포넌트를 사용할 수 있습니다.

NativeAd.Root​

Native Advanced 광고의 최상위 컴포넌트입니다. 모든 광고 요소들은 NativeAd.Root 컴포넌트 내부에 위치해야 합니다.

NativeAd.Root 컴포넌트를 렌더링하면 adSlotElementId를 id로 가지는 div와 AdSlot이 생성되며, 자동으로 광고 요청이 발생하고 광고가 로드됩니다.

로드된 광고의 Clickable한 링크 영역을 표시합니다.

warning

NativeAd.Link 컴포넌트는 다른 NativeAd.Link 컴포넌트 내에 중첩될 수 없습니다.

NativeAd.Image​

로드된 광고의 이미지를 표시합니다.

useNativeData​

로드된 광고의 데이터를 반환하는 Hook입니다.

Example​

import {
  NativeAd,
  useNativeData,
} from '@gfpsdk/display-sdk-react';

const adRequestOptions = {
  adUnitId: 'ad-unit-id',
  adSlotElementId: 'ad-slot-element-id',
};

function Sample() {
  return (
    <NativeAd.Root adSlotOptions={adRequestOptions}>
      <AdContent />
    </NativeAd.Root>
  );
}

const AdContent = () => {
  const nativeData = useNativeData();
  return (
    <NativeAd.Link asset={nativeData?.link}>
      <NativeAd.Image asset={nativeData?.media} />
      <div>{nativeData?.title?.text}</div>
    </NativeAd.Link>
  );
};

Server Side Rendering​

Native Advanced 광고는 Server Side Rendering이 지원됩니다. 서버사이드에서 미리 광고를 로드하고 레이아웃을 구성하여, Layout Shift 없이 광고를 노출할 수 있습니다.

Example​

pages/sample.tsx
import {
  AdHydrationBoundary,
  NativeAd,
  useNativeData,
} from '@gfpsdk/display-sdk-react';
import {
  dehydrate,
  PreloadClient,
} from '@gfpsdk/display-sdk-react/server';

const adRequestOptions = {
  adUnitId: 'ad-unit-id',
  adSlotElementId: 'ad-slot-element-id',
};

export async function getServerSideProps(context) {
  const preloadClient = new PreloadClient({
    headers: context.req.headers,
    serviceCode: SERVICE_CODE,
    clientAddress: getClientAddress(),
  });
  await preloadClient.preloadAd(adRequestOptions);
  return {
    props: {
      dehydratedAdState: dehydrate(preloadClient),
    },
  };
}

function Sample() {
  return (
    <NativeAd.Root adSlotOptions={adRequestOptions}>
      <AdContent />
    </NativeAd.Root>
  );
}

const AdContent = () => {
  const nativeData = useNativeData();
  return (
    <NativeAd.Link asset={nativeData?.link}>
      <NativeAd.Image asset={nativeData?.media} />
      <div>{nativeData?.title?.text}</div>
    </NativeAd.Link>
  );
};

export default async function SampleRoute({ dehydratedAdState }) {  
  return (
    <AdHydrationBoundary state={dehydratedAdState}>
      <Sample />
    </AdHydrationBoundary>
  );
}