수익형 사이트를 위해 구글 애드센스를 달아보겠다.
나는 도메인에 미리 구글 애드센스 승인을 받아놓은 상태이기 때문에, 승인 과정 없이 광고를 사이트에 게재하는 과정만 담아볼 예정이다.
먼저 구글 애드센스 사이트에 접속한다.
Google 애드센스 - 웹사이트에서 수익 창출하기
Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다.
adsense.google.com
만약 구글 애드센스에 광고를 게시하고자 하는 사이트를 등록해 두지 않았다면, 사이트 탭으로 가서 사이트부터 등록해야 한다. 나는 이미 사이트가 등록되어 있는 상태이기 때문에 바로 광고 게시 관련 내용부터 살펴보겠다.
광고 스크립트 가져오기
광고 탭으로 들어가 살펴보면, 사이트 기준 탭에 코드 가져오기가 존재한다.
코드 가져오기를 누르면 아래와 같이 광고 코드가 뜬다.
위 광고 코드를 그대로 복사해서 프로젝트로 가져간다.
광고 스크립트는 프로젝트 전체에서 사용될 예정이므로 _document.js에 넣어주었다.
_document.js
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="ko">
<Head>
<script
async
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.GOOGLE_ADS_KEY}`}
crossOrigin="anonymous"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
광고 생성
이제 내 웹사이트에 뜰 광고를 생성한다.
광고 > 광고 단위 기준을 클릭하면 아래와 같이 여러 개의 광고 유형이 뜬다.
원하는 광고 단위를 선택해 새로운 광고를 생성해 주면 된다.
나의 경우 인피드 광고를 생성했다.
광고를 생성하면 아래와 같이 광고 코드를 준다.
위 코드를 이용해 AdSense.js 파일을 생성한다.
나는 components 폴더 아래 AdSense.js를 만들고 코드를 작성했다.
AdSense.js
import { useEffect } from "react";
const AdSense = ({ adSlot }) => {
useEffect(() => {
if (window) {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
}, []);
return (
<ins
className="adsbygoogle"
style={{ display: "block" }}
data-ad-layout-key={process.env.GOOGLE_ADS_LAYOUT_KEY}
data-ad-client={process.env.GOOGLE_ADS_KEY}
data-ad-slot={adSlot}
data-ad-format="fluid"
data-full-width-responsive="true"
></ins>
);
};
export default AdSense;
<ins/> 태그 내부에 구글 애드센스에서 제공하는 본인의 광고 코드를 그대로 삽입해 주면 된다.
광고 컴포넌트 배치
이제 위 컴포넌트를 광고를 삽입하고 싶은 곳에 배치해 준다.
index.js
import AdSense from "@/components/AdSense";
import Roulette from "../components/Main";
import Head from "next/head";
const Home = () => {
return (
<div>
<Head>
...
</Head>
<AdSense adSlot={"8185832302"} />
<Main />
<AdSense adSlot={"8185832302"} />
</div>
);
};
export default Home;나는 메인 컴포넌트 상단과 하단에 광고를 삽입해 주었다.
꼭 index.js에 컴포넌트를 사용할 필요는 없고, 필요한 곳에 컴포넌트를 불러와 사용해 주면 된다.
ads.txt
`ads.txt`는 광고 판매자들이 자신의 인벤토리를 공개하는 데 사용되는 텍스트 파일로, Google AdSense와 같은 광고 서비스에서는 이 파일을 사용하여 광고 판매자의 신뢰성을 확인하고 광고 수익을 할당해 준다.
ads.txt에 대한 자세한 가이드 사이트는 👇
Ads.txt 가이드 - Google 애드센스 고객센터
도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요
support.google.com
ads.txt를 사이트에 적용하기 위해서는, 우선 public 폴더 아래 ads.txt를 만들고 구글 애드센스에서 개인별 ads.txt 텍스트를 확인해 복사 붙여 넣기 한다.
ads.txt 파일은 아래와 같은 형식을 지닌다.
google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0- google.com: 광고 판매자의 도메인.
- pub-0000000000000000: 광고 판매자의 AdSense 고유 ID.
- DIRECT: 직접 거래를 나타냅니다.
- f08c47fec0942fa0: 추가적인 식별자 또는 보안 코드.
`도메인주소/ads.txt`로 이동했을 때 ads.txt에 입력한 정보가 브라우저에 뜨면 ads.txt 파일을 정상적인 경로에 잘 생성했다는 뜻이다.
이제 구글 애드센스 > 사이트 > 내 사이트 관리에서 내 도메인 클릭.
나는 승인 확인 클릭을 해서 이렇게 뜨는데, 승인이 되어 있지 않은 도메인이라면 ads.txt가 도메인에 등록되어 있는지 확인해 달라는 요청 버튼이 있다. 그걸 클릭해 주면 승인이 완료된다.
+ 하위도메인에 ads.txt 등록하기?
나의 경우 메인 도메인 사이트는 없고, 하위도메인 사이트만 있는데 ads.txt는 메인 도메인에만 연결할 수 있다고 한다.
결국 메인 도메인을 임시로 사이트에 붙여서 ads.txt 승인을 받은 뒤 다시 원래 서브 도메인으로 바꾸는 작업을 통해 ads.txt 승인을 받았다.
이때 그냥 githup 레파지토리 > pages > custom domain 섹션에서 도메인명만 바꾸는 게 아니라 호스팅 서비스 사이트에 들어가 메인 도메인을 등록해 줘야 한다. 관련한 부분은 아래 포스팅에서 자세히 설명해 두었다.
GitHub Pages로 배포한 Next.js 프로젝트에 커스텀 도메인 등록(+배포 후 커스텀 도메인 초기화 현상
이전 포스팅에서 GitHub Pages를 이용해 프로젝트 배포까지 마쳤다. Next.js 프로젝트 Github Pages 배포 이전에 React로 이력서 페이지를 만들어 github에 배포한 적이 있다. github을 이용한 배포는 처음이었
florescene.tistory.com
호스팅 사이트에 들어가서 아래와 같이 레코드를 등록해 주었다.
이후에 custom domain 섹션으로 가 메인 도메인으로 도메인명을 바꾸었다.
ads.txt 승인 받은 후에 프로젝트와 연결된 도메인은 다시 하위 도메인으로 돌려놓았다.
추가) 위와 같이 진행했더니, 이후에 자동으로 내 사이트 정보를 긁어가면서 메인도메인에 ads.txt.가 등록되어 있지 않다며 다시 등록하라고 뜬다. 어쩔 수 없이 메인도메인 사이트를 생성해서 ads.txt를 적용해주는 수밖에 없는 것 같다.
나는 ads.txt 적용 때문에 추후 하위 도메인을 사용하는 대신 메인 도메인 아래 룰렛 페이지를 생성해 주는 방식으로 배포했다.
+ 광고는 로컬 환경에서 보이지 않기 때문에, 빌드와 배포까지 꼭 완료해 주어야 한다.
광고 게재까지 완료된 사이트
https://timeqlife.com/roulette
심플 룰렛
1. 옵션 개수를 선택해 주세요. 2개 ~ 10개까지의 옵션을 설정할 수 있습니다. 2. 룰렛 하단의 입력창에 옵션명을 입력해 주세요. 모든 옵션을 입력한 뒤 완료 버튼을 눌러주세요. 3. 룰렛 돌리기 버
timeqlife.com
ads.txt 적용 때문에 하위도메인 대신 메인 도메인의 roulette 페이지로 만들어 재배포한 사이트이다.
참고
https://www.chanstory.dev/blog/post/33
Next.js 프로젝트에 Google Adsense 적용하기 | chanstory
www.chanstory.dev
https://www.ceos3c.com/web-development/google-adsense-nextjs/?ref=dailydev
Add Google AdSense to Nextjs 13 - Quick & Easy
In this blog post, we’ll walk you through the process of integrating Google AdSense with your Next.js 13 application and creating an ads.txt file to ensure proper ad revenue attribution. By following this step-by-step guide, you’ll have your Next.js ap
www.ceos3c.com
https://elfinlas.github.io/next-js/230404_nextjs_in_adsense/
Next.Js에 구글 애드센스(Adsense) 등록하기
구글 애드센스를 달아보려… 흑우집합소에 애드센스를 달려고 했다. 근데 ads.txt 파일만 넣었는데 뭔가 안되는거 같아서 찾아보니 대부분 Script 추가 방식을 사용했다.. 그래서 나도 이 방식도 같
elfinlas.github.io
'웹 프로그래밍 > 웹 프로젝트' 카테고리의 다른 글
| Next.js 웹사이트 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 웹마스터 도구에 등록 (+sitemap.xml, robots.txt 생성 및 등록) (0) | 2024.01.21 |
|---|---|
| 웹 사이트 Favicon 등록 및 SEO 최적화 (0) | 2024.01.20 |
| GitHub Pages로 배포한 Next.js 프로젝트에 커스텀 도메인 등록(+배포 후 커스텀 도메인 초기화 현상 방지) (0) | 2024.01.20 |
| Next.js 프로젝트 Github Pages 배포 (0) | 2024.01.19 |
| 스톱워치 프로젝트: localStorage에 스톱워치 시간 저장 및 불러오기 (1) | 2024.01.10 |
| [React/Spring boot/MySQL/AWS] 블로그 제작 프로젝트 강의 내용정리 14. Back end 메인화면 기능 구현2 (게시물 검색, 유저 정보 수정) (0) | 2023.06.17 |
