[ML][React] 카카오 애드핏 - 나는 솔로 테스트 를 통한 수익화 (Kakao Adfit 연동)

글 머리

진행 과정:

1. 카카오 배너 생성

2. 컴포넌트 생성

3. 컴포넌트 배치

4. 스크립트 삽입

 

진행 과정 1. 카카오 배너 생성

생성 방법:

 

https://adfit.kakao.com 에서 생성

- 유형: 320x50 : 모바일용 얇은 띠배너형

 

진행 과정 2. 컴포넌트 생성

예제 코드:

import React, { useEffect } from 'react';

function AdfitAd({ adUnit, width, height }) {
  const adRef = React.createRef();

  useEffect(() => {
    if (window.kakao_ad_area) {
      window.kakao_ad_area.queue.push({
        container: adRef.current,
        width,
        height,
      });
    }
  }, [adRef]);

  return (
    <ins 
      className="kakao_ad_area" 
      ref={adRef}
      style={{ display: 'none' }}
      data-ad-unit={adUnit} 
      data-ad-width={width} 
      data-ad-height={height}
    />
  );
}

export default AdfitAd;

- 광고 유형에 따라 광고를 다르게 보여주고자 하면, 틀은 같고 adUnit, width, height 값만 다르게 해주면 됨

 

관련 코드:

const MyKakaoAd = (props) => {
  const adRef = useRef();

  useEffect(() => {
    if (window.kakao_ad_area) {
      window.kakao_ad_area.queue.push({
        container: adRef.current,
        width,
        height,
      });
    }
  }, [adRef]);

  return (
    <ins 
      className="kakao_ad_area" 
      ref={adRef}
      style={{ display: 'none' }}
      data-ad-unit={props.adUnit} 
      data-ad-width={props.width} 
      data-ad-height={props.height}
    /> 
  );
};

진행 과정 3. 컴포넌트 배치

관련 코드:

              {
                loading && (
                  <Stack m={1} sx={{ alignItems: 'center'}}>
                    <CircularProgress />
                  </Stack>
                )
              }
              <MyKakaoAd adUnit={"DAN-8ZkcSUeYMhcaRn9Q"} width={"250"} height={"250"} />
              {!hidden && !loading && 
                (
                  <MyExplanation />
                )
              }

진행 과정 4. 스크립트 삽입

관련 코드:

const MyKakaoAd = (props) => {
  const adRef = useRef();
  const width = props.width;
  const height = props.height;

  useEffect(() => {

    const script = document.createElement('script');

    script.src = "https://t1.daumcdn.net/kas/static/ba.min.js";
    script.async = true;

    document.body.appendChild(script);

    if (window.kakao_ad_area) {
      window.kakao_ad_area.queue.push({
        container: adRef.current, width, height,
      });
    }

    return () => {
      document.body.removeChild(script);      
    }

  }, [adRef, width, height]);

  return (
    <ins 
      className="kakao_ad_area" 
      ref={adRef}
      style={{ display: 'none' }}
      data-ad-unit={props.adUnit} 
      data-ad-width={props.width} 
      data-ad-height={props.height}
    /> 
  );
};

결과:

위치 수정:

              <Box textAlign={'center'}>
                <MyKakaoAd adUnit={"DAN-8ZkcSUeYMhcaRn9Q"} width={"250"} height={"250"} />
              </Box>

결과: