React Adsense 라이브러리 소개(GatsbyJs에 adsense 광고 붙이는 방법)

etcdev

이 블로그는 GatsbyJS라는 정적 사이트 생성기(Static Site Generator)로 만들어졌습니다. GatsbyJS는 React 기반으로 구현된 프레임워크입니다.

GatsbyJS는 React이기 때문에 자바스크립트와 nodejs를 사용합니다. Adsense에서 광고를 생성하면 html 코드를 제공하는데요. GatsbyJS에서 모든 페이지에 이 html코드를 붙여넣도록 구현해야 합니다.

react-adsense는 이런 작업을 쉽게 해주는 라이브러리입니다. 제공되는 클래스에 client, slot, style 등을 인자로 전달만 하면 html 코드를 생성해 줍니다.

Adsense 광고 달기

먼저 <head> 안에 아래와 같은 스크립트 코드를 넣어주어야 합니다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

그리고 광고를 넣을 자바스크립트 파일에 다음과 같이 구현하면, Adsense html 코드가 자동으로 생성됩니다.

import React from 'react';
import AdSense from 'react-adsense';

<AdSense.Google
  style={{ display: 'block' }}
  client='ca-pub-7292810486004926'
  slot='7806394673'
  format='auto'
  responsive='true'
/>

위의 예제에서 사용된 프로퍼티 외에 아래와 같은 프로퍼티들이 있습니다.

다음 프로퍼티들은 필수로 제공되어야 합니다.

  • client
  • slot

다음 프로퍼티들은 필요한 경우 제공하면 됩니다.

  • className
  • style
  • layout
  • layoutKey
  • format
  • responsive

예제

예를 들어, Adsense에서 "일치하는 콘텐츠"로 신규 광고를 생성하였습니다. 광고를 생성하면 아래와 같은 html 코드를 제공해 줍니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5054040000000000"
     data-ad-slot="3560900000"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위의 코드에서 다음 항목들만 프로퍼티로 전달하면 됩니다. 아래 코드에 해당하는 react-adsense의 프로퍼티가 어떤 것인지 이름을 보면 아실 수 있습니다.

  • style
  • data-ad-format
  • data-ad-client
  • data-ad-slot

결론적으로, 위의 html코드를 javascript에서 입력하려면 아래처럼 구현하면 됩니다.

<AdSense.Google
  style={{ display: 'block' }}
  format='autorelaxed'
  client="ca-pub-5054040000000000"
  slot="3560900000"
/>

react-adsense 코드

아래 코드는 react-adsense의 일부 코드입니다. 인자를 전달하면 구글에서 제공하는 형태의 html 코드를 생성합니다. 프로퍼티와 일치하는 html 코드는 무엇인지 이해할 수 있습니다.

export default class Google extends React.Component {
  componentDidMount() {
    if(window) (window.adsbygoogle = window.adsbygoogle || []).push({});
  };

  render() {
    return (
      <ins className={`${this.props.className} adsbygoogle`}
        style={this.props.style}
        data-ad-client={this.props.client}
        data-ad-slot={this.props.slot}
        data-ad-layout={this.props.layout}
        data-ad-format={this.props.format}
        data-full-width-responsive={this.props.responsive}></ins>
    );
  }
};

Google.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object, // eslint-disable-line
  client: PropTypes.string.isRequired,
  slot: PropTypes.string.isRequired,
  layout: PropTypes.string,
  format: PropTypes.string,
  responsive: PropTypes.string
};

Google.defaultProps = {
  className: '',
  style: {display: 'block'},
  format: 'auto',
  layout: '',
  responsive: 'false'
};

참고

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha