[Vue.js] Vue에 Google Adsense 넣기

일반적으로 HTML 페이지에 구글 스크립트를 삽입하는 방법으로는 Vue에서 정상적인 구동이 되지 않는다.

Component 형태로 설치 후 사용이 가능하다.

*구글 자동광고 사용시에는 <div id="app"></div> 범위 밖에 상단에 구글 공통스크립트 한줄만 추가 해주면 알아서 페이지 내에 불러와진다.

아래 설명은 수동으로 광고를 삽입할 때의 설명임

 

1. 구글 광고 생성

구글 애드센스 홈페이지에 가입을 하고, 광고가 표시될 도메인을 등록하고, 수동으로 삽입할 광고를 만든다.

Google 애드센스 - 웹사이트에서 수익 창출하기

그리고 만약 등록한 도메인의 서브도메인을 사용 중이라면, 광고를 표시할 서브도메인들도 추가적으로 등록 해야 한다.

아래의 내용대로 따라하면 된다.

사이트 목록에 하위 도메인 추가 또는 삭제 - AdSense 고객센터

 

2. Vue에서 사용할 Adsense Component 설치

npm install vue-script2 vue-google-adsense --save

작업할 프로젝트 폴더에 가서 위 명령어로 설치

 

3. JS 코드 설정

main.js 또는 app.js (설정에 따라 다름) 에 가서 아래 코드를 삽입 (전역 컴포넌트 설정의 방법임)

import Ads from 'vue-google-adsense'

Vue.use(require('vue-script2'))
Vue.use(Ads.Adsense) //디스플레이 광고
Vue.use(Ads.InArticleAdsense) //콘텐츠 내 자동 삽입 광고
Vue.use(Ads.InFeedAdsense) //인피드 광고

보통 수동으로 사용할 경우, 디스플레이 광고를 주로 사용한다.

자신의 광고 스타일에 맞게 세팅하면 된다.

 

4. DOM코드 설정

<template>
  <div class="ad-container">
    <Adsense
      data-ad-client="ca-pub-1234567891234567" // 자신의 광고 client 번호 삽입
      data-ad-slot="1234567890" // 자신의 광고 slot 삽입
      data-ad-format="auto"
      :data-full-width-responsive="true"
    >
    </Adsense>
  </div>
</template>

위 형태로 넣으면 광고가 출력될 것이다.

 

 

만약 광고가 출력되지 않을 때에는 ads.txt 파일을 광고를 사용할 모든 도메인(서브도메인 포함)의 root 디렉터리 최상단에 넣어준다.

Ads.txt 가이드 - AdSense 고객센터

 

5. 광고 사이즈등 옵션 설정

애드센스 광고 크기를 수동으로 설정하게 되면

<ins style="width:930; height:150px"></ins>

위 형태로 ins 태그 안에 스타일 옵션을 넣게 된다.

그러나 Vue Component 형태로 광고를 삽입하게 되면 <ins> 태그 안에 설정을 할 수가 없기 때문에 옵션을 사용해서 style 작업을 해줘야 한다.

<Adsense 
	data-ad-client="ca-pub-123412341234" 
    data-ad-slot="232342341" 
    ins-style="display:inline-block;width:935px;height:130px">
</Adsense>

그럼 광고 수동 사이즈 설정이 가능하다.

 

 

광고가 뜨지 않을 때 console창을 확인해서 아래와 같은 에러 시 : 

message: "adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=130"
name: "TagError"
pbr: true
stack: "TagError: adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=130
    at Mk (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:156:278)
    at fl (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:167:381)
    at el (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:166:221)
    at pm (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:211:501)
    at Fm (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:215:106)
    at Em (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:214:688)
    at Nm (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:229:109)
    at https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:223:47
    at qe.n.ja (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:67:804)
    at ze (https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js:75:107)"

 

 

 

컴포넌트에 아래 옵션을 추가 (기본설정이 data-ad-format="fluid" 로 되어있는 듯 하다)

data-ad-format="auto"

<Adsense 
	data-ad-client="ca-pub-123412341234" 
    data-ad-slot="232342341"
    data-ad-format="auto"
    ins-style="display:inline-block;width:935px;height:130px">
</Adsense>

  

 

 

 

옵션표

 

 

vue-google-adsense 컴포넌트

mazipan/vue-google-adsense