Google Adsense를 간편하게 설정할 수 있는 React 컴포넌트
npm install --save react-adsense-google
yarn add react-adsense-google
AdSense 사이트 연결을 진행합니다.
<head> 태그와 </head> 태그 사이에 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" /> 코드를 붙여넣습니다.
import GoogleAdsense from 'react-adsense-google';
// 기본 설정을 통한 광고 게시
<GoogleAdsense
adClient='ca-pub-1234567890'
adSlot='9876543210'
/>
// 커스텀 설정을 통한 광고 게시
<GoogleAdsense
adClient='ca-pub-1234567890'
adSlot='9876543210'
style={{'display': 'block', 'text-align': 'center'}}
adLayout='in-article'
adFormat='fluid'
fullWidthResponsive='true'
/>| 필수 여부 | Google AdSense 옵션 | react-adsense-google 옵션 | 기본값 | 설명 |
|---|---|---|---|---|
| false | - | className | '' | ins 태그의 클래스 이름 |
| false | - | style | {display: 'block'} | ins 태그의 스타일 |
| true | data-ad-client | adClient | - | 고객 고유 코드 |
| true | data-ad-slot | adSlot | - | 광고 고유 코드 |
| false | data-ad-layout | adLayout | '' | 광고 레이아웃 in-article |
| false | data-ad-layout-key | adLayoutKey | '' | 광고 레이아웃 고유 코드 |
| false | data-ad-format | adFormat | 'auto' | 광고 포멧 auto, fluid, rectangle, vertical, horizontal |
| false | data-full-width-responsive | fullWidthResponsive | 'false' | 광고가 휴대 기기에서 전체 폭 차지 true, false |