google adsense
v3.0.0
참고 : 이 분기는 NUXT 3 호환 모듈 용입니다. NUXT 2 지원에 대한 체크 아웃 legacy-v2 지점.
nuxt.js의 Google 애드 센스 통합 페이지 경로가 변경 될 때마다 광고가 업데이트됩니다
@nuxtjs/google-adsense 종속성을 추가하십시오.nuxt.config.js 의 modules 섹션에 @nuxtjs/google-adsense 추가하십시오 {
modules : [
// Simple usage
[ '@nuxtjs/google-adsense' , {
id : 'ca-pub-###########'
} ]
]
}최상위 옵션 사용 :
{
modules : [
[ '@nuxtjs/google-adsense' ]
] ,
googleAdsense : {
id : 'ca-pub-#########'
}
}런타임 구성 사용 :
{
modules : [
[ '@nuxtjs/google-adsense' ]
] ,
googleAdsense : {
onPageLoad : false ,
pageLevelAds : false ,
} ,
publicRuntimeConfig : {
googleAdsense : {
id : process . env . GOOGLE_ADSENSE_ID ,
test : process . env . GOOGLE_ADSENSE_TEST_MODE === 'true' ,
} ,
} ,
} //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js <head>
| 옵션 | 유형 | 설명 |
|---|---|---|
id | 끈 | Google Adsense Publisher Client ID (예 : ca-pub-######### ). 테스트 모드에 있지 않은 경우 필요합니다 . |
adFormat | 끈 | 글로벌 기본 광고 형식을 설정합니다. 구성 요소 소품으로 재정의 할 수 있습니다. |
analyticsDomainName | 끈 | Google Analytics 계정 도메인 (분석을 Adsense, IE example.com 과 연결하는 경우). |
analyticsUacct | 끈 | Google Analytics 계정 ID (분석을 Adsense와 연결하는 경우, UA-#######-# ). |
hideFilled | 부울 | false 경우 채워지지 않은 광고가 숨겨지지 않으면 true 채워지지 않은 광고가 숨겨 질 때. 기본값은 false 입니다. |
includeQuery | 부울 | false 일 때 $route.path 만 변경 사항을 확인합니다. true $route.query 로 설정된 경우 Query도 고려됩니다. 기본값은 false 입니다. |
onPageLoad | 부울 | 페이지로드 후 애드 센스 스크립트를로드합니다. 기본값은 false 입니다. |
overlayBottom | 부울 | Adsense Anchor Ads가 하단에 표시되도록 활성화하십시오. 기본값은 false 입니다. 자세한 내용은 애드 센스 문서를 참조하십시오. |
pageLevelAds | 부울 | 애드 센스 페이지 레벨 광고를 활성화하십시오. 기본값은 false 입니다. 자세한 내용은 애드 센스 문서를 참조하십시오. |
pauseOnLoad | 부울 | GDPR에 따라 쿠키 또는 기타 로컬 스토리지를 사용하려는 사용자 동의를 얻기위한 광고 요청을 일시 중지합니다. 자세한 내용은 애드 센스 문서를 참조하십시오. false . |
tag | 끈 | 애드 센스 구성 요소 태그 이름. 기본값은 adsbygoogle 로 나타납니다. |
test | 부울 | 애드 센스를 테스트 모드로 강제로합니다 (아래 참조). |
Adsense 모듈은 dev 모드에서 NUXT를 실행할 때 자동으로 test 모드로 전환됩니다. 그러나 구성 옵션 test true 로 설정하여 프로덕션에서 테스트 모드를 유지할 수 있습니다.
테스트 모드는 테스트 게시자 ID를 사용하여 애드 센스 TOS를 위반하지 않도록합니다.
테스트 광고는 일반적으로 빈 공간으로 나타나지 만 올바른 차원을 갖습니다 (즉, 렌더링 된 AD가 필요한 올바른 공간을 차지합니다).
광고를 원하는 곳에 <Adsbygoogle /> 구성 요소를 삽입하십시오.
지정된 (최소 /최대) 너비와 (미디어 쿼리를 기반으로 할 수 있음) 높이 (최소 /최대) 높이가있는 컨테이너 요소 내에 <Adsbygoogle /> 구성 요소를 배치하거나 <Adsbygoogle /> 에서 스타일 또는 클래스를 사용해야합니다. <Adsbygoogle /> 광고를 특정 크기 (또는 크기)로 제한하는 구성 요소.
ad-slot 속성을 사용하여 Google Adsense AD 슬롯 값 (문자열로 지정)을 지정하십시오.
자세한 내용은 애드 센스 문서를 참조하십시오. Google 애드 센스 문서
구성 요소 소품 :
| 소품 | 유형 | 설명 |
|---|---|---|
ad-slot | 끈 | Google Adsense Adslot. 이 소품은 테스트 모드에 있지 않을 때 필요합니다 . 광고 슬롯 값은 Adsense 계정을 참조하십시오. |
ad-format | 끈 | 선택 과목. 다른 옵션은 Adsense 문서를 참조하십시오 |
ad-style | 물체 | 렌더링 된 <ins> 요소에 적용 할 스타일. 기본값 : { display: 'block' } . 객체 형식은 vuejs 스타일 바인딩 문서를 참조하십시오. |
ad-layout | 끈 | 선택 과목. 애드 센스 문서를 참조하십시오 |
ad-layout-key | 끈 | 선택 과목. 애드 센스 문서를 참조하십시오 |
hide-unfilled | 부울 | 선택 과목. 사실이라면 채워지지 않은 광고를 숨 깁니다. |
page-url | 끈 | 선택 과목. 인증이 필요한 페이지에 광고가있는 경우 참조 페이지 URL (유사한 내용)을 설정하십시오. 설정하면이 소품은 완전히 자격을 갖춘 URL (프로토콜 및 호스트 이름 포함)이어야합니다. |
include-query | 부울 | 글로벌 옵션을 광고별로 includeQuery . 페이지의 모든 광고에 동일한 설정이 있는지 확인하십시오. |
analytics-uacct | 끈 | Google Analytics 계정 ID (분석을 Adsense와 연결하는 경우, UA-#######-# ). 플러그인 옵션 analyticsUacct 에 지정된 값에 대한 기본값. |
analytics-domain-name | 끈 | Google Analytics 계정 도메인 (분석을 Adsense, IE example.com 과 연결하는 경우). 플러그인 옵션 analyticsDomainName 에 지정된 값에 대한 기본값. |
구성 요소 노출 내부 데이터 | 이름 | 유형 | 설명 | ____ | ____ | ___________ | showAd | 방법 | 광고를 표시하기 위해 Show AD 메소드를 트리거하십시오. | updateAd | 방법 | 광고를 새로 고치기 위해 업데이트 AD 메소드를 트리거하십시오. | isUnfilled | 계산 된 참조 | 광고 요소에서 채워지지 않은 속성을 추적합니다. data-ad-state = 'fulliled'인 경우 true 반환합니다.
경로가 변경되거나 선택적으로 경로 쿼리 매개 변수가 변경되면 일반 페이지로드에서와 같이 표시된 모든 광고가 업데이트됩니다.
<Adsbygoogle /> 구성 요소에서 page-url 공개적으로 액세스 할 수있는 사이트의 페이지 URL로 설정하여 유사 /관련 콘텐츠가 있습니다. 이 모듈은 Angular Team (Google Adsense의 도움말 포함)이 개발 한 기술을 사용하여 프로그레시브 웹 응용 프로그램에서 광고 업데이트를 처리합니다.
새 광고가 요청 될 때마다 Adsense 매개 변수 data-ad-region 무작위 값으로 업데이트됩니다. 이러한 이유로 <Adsbygoogle /> 구성 요소에서 data-ad-region 속성을 설정할 수 없습니다.
MIT 라이센스
