RgbitCode 구글 애드센스 승인 / NextJS 에 구글애드센스 컴포넌트화 해서 집어넣는 방법

안녕하세요. NextJs로 직접 개발한 RgbitCode 웹 사이트가 구글 애드센스 승인이 되었다는 소식과 있었던 이야기를 적어보려고 합니다. 현재 이 사이트는 데이터베이스는 postgresql15, 프론트엔드는 NextJS 13.5 App Router 방식으로 개발되었고 백엔드는 Java Spring Boot 로 되어있는데요.

저같은 경우는 ver 0.6 을 배포하고 구글 애드센스 신청을 했는데, 확인해 보니 승인이 되어 있었습니다. 이제 막 달린참이라 조금 테스트를 해보고 있습니다. 티스토리, 워드프레스 등 일반적인 블로그 사이트로 애드센스를 승인받았다는 글들은 굉장히 많이 찾아볼 수 있지만, 직접 코딩으로 개발한 사이트에 달아본 내용에 대한 정보는 거의 찾기 어려운것 같네요. 저 또한 이렇게는 처음이라 그런 의미에서 한번 기록해 봅니다.

구글 애드센스란?

Google 애드센스는 게시자가 온라인 콘텐츠에서 수익을 창출할 수 있는 방법을 제공합니다. 애드센스는 콘텐츠 및 방문자를 기준으로 관련성 높은 광고를 사이트에 게재하는 방식으로 작동합니다. 광고는 제품을 홍보하고자 하는 광고주가 만들고 광고비를 지불합니다. 광고에 따라 광고주가 지불하는 광고비가 다르므로 앱 개발자가 얻는 수입도 다릅니다.

(출처 : 구글애드센스 고객센터)

구글이 광고주로부터 광고들을 받아서 블로그,유튜브 등에 광고를 게시하게끔 만들어주어 해당광고를 통해 유입이 일어날 경우 일정 %의 수수료를 지급 받는 방식입니다. 그런데 구글 애드센스를 게시하기 위해서는 애드센스 승인이라는 선행절차가 필요합니다.

사이트 광고게시를 위한 과정

나의 사이트에 구글 애드센스 광고를 게시하기 까지 어떤 과정이 필요한지 정리해보겠습니다.

1. 구글 애드센스 계정생성

먼저 당연히 구글애드센스 계정이 있어야겠죠. 구글계정으로 이용약관에 동의하고 구글이 시키는대로 하면 가입이 됩니다.

2. 사이트 등록

구글 애드센스에 로그인해서 구글이 시키는대로 관리할 사이트를 등록해줍니다.

3. abs.txt / head 밑에 스크립트

abs.txt 란 ?

승인받은 것으로 확인된 판매자(예: 애드센스)를 통해서만 디지털 광고 인벤토리가 판매될 수 있게 해주는 IAB Tech Lab 솔루션입니다. ads.txt 파일을 직접 만들면 사이트에서 광고를 판매할 수 있는 판매자를 더 효과적으로 관리할 수 있으며, 가짜 인벤토리가 광고주에게 판매되는 것을 방지할 수 있습니다.

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

nextjs 에서는 abs.txt 를 구글이 시키는대로 작성해서 그냥 public 디렉토리 밑에 넣어주면 됩니다.

그리고 스크립트를 하나 추가해 달라고 하는데요.

<script async src="... 어쩌구" crossOrigin="anonymous"></script>

구글이 시키는대로 head 영역안에 넣어주면 됩니다. 구글 애드센스 승인되지 않아도 사이트에 미리 달아놓을 수 있습니다.

4. 애드센스 승인 될 때까지 블로그 포스팅

구글 애드센스 승인 조건은 명확하지 않습니다. 사람마다 승인되는 기간도 천차만별이고 케이스바이 케이스인것 같습니다.

저는 현재 구글 애드센스가 달려있는 워드프레스 사이트가 있는데요. 제가 처음 구글 애드센스 승인되는데까지 거의 3주가 걸렸습니다.다. NextJS 로 개발한 사이트에 구글애드센스를 달아보는 것은 이번이 처음인데요. 거의 신청한지 1~2일 안에 승인된것 같네요. 이번에 글 개수가 약 20개 가량 넘게 되었을때 신청했는데, 보편적으로 글 1000자 이상 글 20개 정도라면 노려볼 만한 것 같습니다.

약간의 팁을 드리면... 글 20개 쓸때까지는 1주일에 한개씩 써도 상관이 없지만.. 애드센스 신청하고 나서부터는 승인될때까지 글을 매일 하루에 하나씩 쓰는게 좋습니다. 이렇게 할 경우 거절 안당하고 승인이 되는것 같네요.

5. 광고게시

구글 이메일로 애드센스가 승인되었다고 날라옵니다. 그동안 힘들게 애드센스 승인을 위해서 글을 써왔던 것이 떠오르며 뿌듯함이 올라옵니다.. 그런데 그것도 잠시... 운영을 해보시면 알겠지만... 정말 기대 자체를 안하는게 좋습니다.

이 사이트에 광고게시

애초부터 애드센스 수익이 목적이라면 직접 코딩해서 블로그를 운영하는 것은 정말 좋지 못한 선택이라고 생각합니다. 저도 그냥 직접 개발한 사이트에 애드센스를 달아보는 것에 의미를 두고 있습니다. 그리고 코딩관련 글로는... 아무리 몇년씩 글을 써봐야 구글 애드센스로 돈을 벌기 힘든게 사실입니다. 그냥 달아놓는 것에 의의를 두고 그것보다 진정한 개발자라면 세상을 널리 이롭게 하는 서비스를 개발해야...ㅠㅠ

자동광고 게시 후

워드프레스 사이트랑 다르게 구글애드센스 자동광고를 해봤더니... 사이트 레이아웃을 무시하고 제멋대로 달려있었습니다 ㅋㅋ

워드프레스의 경우 자동광고 설정을 하면 아무것도 만지지 않아도 광고가 적절한 위치에 잘 달렸었는데요. 직접 개발한 사이트는 레이아웃이 보편적인 블로그와는 좀 다르다 보니 이런 현상이 생긴것 같습니다.

처음 개발 할 때부터 광고게시에 유리하도록 레이아웃을 구성해 만들지 않았다면, 소스코드를 직접 넣어서 수동광고를 하는 방법 말고는 어찌할 방법이 없다는 것이였습니다.

NextJs 에서 애드센스 수동광고 게시하는 방법

구글에서 제시하는 수동 게시방법은 일반적인 자바스크립트인데, NextJs는 React 기반으로 만들어진 프레임워크인데요.

그에 맞게 변환해서 작성을 해줘야 합니다. 저는 아래처럼 작성을 했습니다.

React 컴포넌트화

"use client"
import React, { useEffect } from 'react';

declare global {
    interface Window {
        adsbygoogle: any;
    }
}
type Props = {
    adType : string
}

const GoogleAd = ({adType} : Props) => {
    useEffect(() => {
        if(window){
            (window.adsbygoogle = window.adsbygoogle || [])?.push({})
        }
    }, []);

    return (
            <div className="googleAd-container" style={{border : "1px solid #eee"}}>
                <ins className="adsbygoogle"
                     style={{display :"block"}}
                     data-ad-format="auto" // autorelaxed
                     data-ad-client="[당신의 ca-pub-코드 넣으세요]"
                     data-ad-slot={adType}></ins>
            </div>
    );
};

export default React.memo(GoogleAd);

NextJS 13 App router 방식을 사용하게 된다면.. 클라이언트 컴포넌트로 동작되도록 "use client" 를 최상단에 넣어주어야 합니다.

수동으로 광고단위를 하나씩 만들고

export const GOOGLE_ADE_TYPE ={
    GRID_MULTI_FLEX : '7135311411',
    SIDE_LONG : '4869855129',
    (... 중략...)
}

적절한 네이밍과 함께 상수로 사용할 수 있도록 정의해줬습니다.

그리고 집어 넣어보고 싶은 곳에 아래처럼 넣어주었습니다.

출력 결과.

악의적인 의도를 가지고 반복 클릭은 하지 말아주세요. 정말 하드코딩으로 어렵게 만든 사이트이고

현재 발견된 문제점

테스트로 광고를 게시해보면서 문제점을 발견했는데요. 사이드 광고를 게시한 페이지에서만 데스크탑 환경에서는 문제가 없지만 이상하게 모바일 환경에서만 오류가 나면서 사이트 이용이 불가능해지는 버그가 발생했습니다. 그래서 사이드 영역에 게시되는 광고는 넣지 못하고 있네요. 구글 애드센스는 로컬개발 환경에서 테스트가 어렵다보니.. 원인을 찾는데까지 조금 걸릴것 같습니다.

혹시 저와 같은 현상을 겪어보시고 해결해보신 분이 계신다면 댓글을 남겨주시면 감사하겠습니다. 그외 궁금하신 점이 있으시면 자유롭게 질문해주세요.