본문으로 건너뛰기

SPA 광고 적용 (React)

1. SDK 라이브러리 로드 및 SDK 네임스페이스 정의​

React 번들이 script로 추가되는 인덱스 페이지에 NAM SDK를 로드합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
    <script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
    <script>
      window.gladsdk = window.gladsdk || { cmd: [] };
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2. 컴포넌트 정의​

import React, { Component } from 'react';

interface Props {
  adSlotInfo: any;
  onAdLoaded(adEvent: any): void;
  onAdClicked(adEvent: any): void;
  onAdImpressed(adEvent: any): void;
  onError(adErrorEvent: any): void;
  onAdMuteCompleted(adEvent: any): void;
}

class BannerAd extends Component<Props> {
  constructor(props: Props) {
    super(props);
    const { onAdLoaded, onAdClicked, onAdImpressed, onError } = props;

    window.gladsdk.cmd.push(function () {
      window.gladsdk.removeAllEventListener();

      window.gladsdk.addEventListener(window.gladsdk.event.AD_LOADED, function (ad: any) {
        onAdLoaded(ad);
      });
      window.gladsdk.addEventListener(window.gladsdk.event.AD_CLICKED, function (ad: any) {
        onAdClicked(ad);
      });
      window.gladsdk.addEventListener(window.gladsdk.event.AD_IMPRESSED, function (ad: any) {
        onAdImpressed(ad);
      });
      window.gladsdk.addEventListener(window.gladsdk.event.ERROR, function (ad: any, error: any) {
        onError(ad, error);
      });
      window.gladsdk.addEventListener(window.gladsdk.event.AD_MUTE_COMPLETED, function (ad: any) {
        onAdMuteCompleted(ad);
      });
    });
  }

  render() {
    const { adSlotInfo } = this.props;

    if (adSlotInfo) {
      window.gladsdk.cmd.push(function () {
        const prevAdSlot = window.gladsdk.findAdSlot('bannerAdWrapper');
        if (prevAdSlot) {
          window.gladsdk.destroyAdSlots([prevAdSlot]);
        }

        const adSlot = window.gladsdk.defineAdSlot(Object.assign({ adSlotElementId: 'bannerAdWrapper' }, adSlotInfo));
        window.gladsdk.displayAd('bannerAdWrapper');
      });
    }

    return (
      <React.Fragment>
        <div id={adSlotInfo?.adSlotElementId} />
      </React.Fragment>
    );
  }
}
export default BannerAd;

3. 배너 광고 컴포넌트 초기화​

class BannerAdContainer extends Component<Props> {
  constructor(props: Props) {
    super(props);
  }

  onAdLoaded(adEvent: any) {
    // @TODO implements code
  }

  onAdClicked(adEvent: any) {
    // @TODO implements code
  }

  onAdImpressed(adEvent: any) {
    // @TODO implements code
  }

  onError(adErrorEvent: any) {
    // @TODO implements code
  }

  onAdMuteCompleted(adEvent: any) {
    // @TODO implements code
  }

  render() {
    const { onAdLoaded, onAdClicked, onAdImpressed, onError } = this;

    const adSlotInfo = {
      adUnitId: 'ad_unit_id',
      adSlotElementId: 'division_id',
      uct: 'KR',
      customParam: {
        category: 'entertainment',
        hobby: ['music', 'sports'],
      },
    };

    return (
      <BannerAd
        adSlotInfo={adSlotInfo}
        onAdLoaded={onAdLoaded}
        onAdClicked={onAdClicked}
        onAdImpressed={onAdImpressed}
        onError={onError}
        onAdMuteCompleted={onAdMuteCompleted}
      />
    );
  }
}