Kind JM

Why Blog #12. 경축 AdSense 승인과 Gatsby

October 11, 2023

마치 수능을 다시 보거나 군대를 다시 가는 것 같은 애드고시를 재신청 승인되었다.

기존 티스토리 이후 과연 새로운 환경에서 애드고시 승인이 날 수 있을지 걱정이 되기도 했다. 실제로 블로거에서 진행했던 애드고시는 실패…

사실 오랜만에 해서 어떻게 통과 했었는지 감이 안오는 상태였는데 다시 블로그를 정리하면서 과거의 감각이 살아났다.

나만의 도메인, 전략적인 애드고시 콘텐츠 운영을 통해 신청한지 무려 하루 만에 번개같이 승인을 받았다. (스스로 놀람)

애드고시가 어려우신 분들이 있다면 어떻게 접근해야할지 동일한 방법에 대해서 소개해 들리 수 있을 것 같다.

애드고시 합격

애드 고시에 합격하게 되면 아래 이미지와 같은 이메일을 받게 된다.

승인을 올리고 무려 하루만에 받았다.

티스토리에서는 적어도 2주는 걸렸던 것 같은데 이것이 커스텀 가능한 Gatsby 의 장점인 것인지 콘텐츠가 좋은 것인지…

아무래도 SEO 커스텀과 콘텐츠가 모두 적정 수준이 되면 애드센스 승인이 잘 이루어지는 것 같다.

애드센스 승인 준비 사항

그동안 애드센스 승인을 위해 준비했던 사항을 다시 돌아보면 아래 내용들은 필수적으로 잘 되어 있어야 할 것 같다.

Gatsby SEO 구성

Google 검색 등록

콘텐츠 작성 (최소 25개, 전문적인 주제)

ADS.TXT 처리

애드센스 승인 후 광고 슬롯 구성

광고 승인이 되었으니 다음으로 해야할 일은 하루빨리 광고를 노출하는 일이다.

승인이 난 후에 가장 빨리 광고를 노출하는 방법은 다음 2가지 조치이다.

애드센스 자동 광고 설정

애드센스의 사이트 설정에 가면 자동 광고 설정을 활성화할 것인지 체크하는 기능이 있다. 이것을 활성화하자

애드센스 광고 호출 스크립트 삽입

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3629499401438446" crossorigin="anonymous"></script>

해당 스크립트 삽입을 페이지에 넣어도 되지만 Gatsby 에서 지원하는 플러그인을 사용해도 된다.

    {
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-3629499401438446`
      },
    },

위와 같이 gatsby-plugin-google-adsense 를 설치하고 퍼블리셔ID를 본인의 것으로 지정하여 사용할 수 있다.

그러면 한시간 내로 사이트에 광고가 자동으로 기재되는 것을 확인할 수 있다.

사이트에 광고를 더 추가할 수는 없을까? 개인적으로 티스토리에서 최상단 광고, 하단 멀티플렉스 광고가 효율이 좋았다.

이렇게 특정 위치에 광고를 삽입하려면 어떻게 해야할까?

import React, { useEffect } from "react";

const GoogleAdvertise = ({
  className = "adsbygoogle",
  client = "",
  slot = "",
  format = "",
  responsive = ""
}) => {
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
      console.log("Advertise is pushed");
    } catch (e) {
      if (process.env.NODE_ENV !== "production")
        console.error("AdvertiseError", e);
    }
  }, []);
  return (
    <ins
      className={className}
      style={{
        display: "block"
      }}
      data-ad-client={client}
      data-ad-slot={slot}
      data-ad-format={format}
      data-full-width-responsive={responsive}
    />
  );
};

export default GoogleAdvertise

위와 같은 컴포넌트를 하나 구성해서 사이트에 추가하자.

이제 위의 컴포넌트를 광고를 넣기 원하는 페이지에서 임포트하여 호출하자.

본 사이트는 운영 편의를 위해 최상단 리더보드와 본문 첫번째, 그리고 하단 멀티플렉스 광고에 적용했다.

          <GoogleAdvertise
            client="ca-pub-3629499401438446"
            slot="1930227054"
            format="auto"
            responsive="true"
          />

이런식으로 적용하면 원하는 영역에 광고를 삽입할 수 있다.

본문 광고도 구좌를 하나 만들어서 해당 광고를 본문에 HTML로 삽입하면 자연스럽게 광고를 노출할 수 있다.

이제 나만의 브랜드 도메인에 광고를 올릴 수 있으니 본격적으로 심화된 광고 수익화를 진행할 수 있을 것 같다.

Category