PromleeBlog
sitemap
aboutMe

posting thumbnail
AdSense 광고 코드 삽입하기 (Next.js)
Applying Ads with Code Instead of Auto Ads

📅
🚀 들어가기 전에
🚀 자동 광고의 한계
🚀 수동 광고 삽입의 장점
🚀 대표 광고 유형별 예제
✅ 1. 디스플레이 광고
✅ 2. 네이티브 인피드 광고
✅ 3. 네이티브 인아티클 광고
✅ 4. 네이티브 멀티플렉스 광고
🚀 Next.js에서 스크립트 삽입하기
🚀 Next.js에서 광고 컴포넌트 구성하기
✅ 사용 예시
✅ 📁 추천 파일 구조 예시
🚀 결론
✅ 참고
🚀

들어가기 전에 🔗

약 2달 동안 Google AdSense 승인 작업, 흔히 말하는
애드고시
를 마쳤습니다. 광고를 적용하던 중, 자동 광고(Auto Ads)는 설정은 간편하지만 광고가 예기치 못한 위치에 들어가거나 사용자가 의도한 흐름을 방해하는 경우가 많았습니다.
두 달의 기다림..
두 달의 기다림..
그래서 결국 직접 광고를 원하는 위치에 삽입하는 방법으로 전환하게 되었고, 이번 글에서는 그 과정을 자세히 공유드리려 합니다.
제가 직접 삽입한 광고 코드를 예시로 보여드리며, 각 광고 유형에 대한 설명과 함께 Next.js에서의 구현 방법도 안내해 드리겠습니다.
🚀

자동 광고의 한계 🔗

자동 광고는 Google AdSense에서 제공하는 기능으로, 사용자가 별도로 위치를 지정하지 않아도 페이지 내 적절한 위치를 찾아 광고를 삽입해줍니다. 하지만 아래와 같은 단점이 있습니다.
실제로 블로그에서 콘텐츠와 관련 없는 광고가 중간에 두세 개씩 나오는 것을 보면 사용자의 이탈률이 증가할 수도 있겠다는 생각이 들었습니다.
🚀

수동 광고 삽입의 장점 🔗

직접 광고를 삽입하는 방식은 다음과 같은 장점을 가집니다.
예를 들어, 글의 1/3 지점에 배너 광고, 마지막 문단 하단에 링크 광고 등으로 전략적으로 배치할 수 있습니다.
🚀

대표 광고 유형별 예제 🔗

Google AdSense에서는 여러 광고 유형을 제공합니다. 여기서는 대표적인 4가지 권장 광고 유형을 하나씩 살펴보겠습니다.
✅

1. 디스플레이 광고 🔗

용도와 위치에 구애받지 않고 전반적으로 사용하기 좋은 광고입니다. 크기가 유연하고 반응형 디자인에 적합하여 기본 광고 단위로 자주 사용됩니다.
여러분들이 가장 많이 보셨을 기본 광고 형태입니다. 인수로는 data-ad-client, data-ad-slot을 사용합니다.
디스플레이 광고
디스플레이 광고
<ins
  className="adsbygoogle"
  style={{ display: 'block' }}
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="1234567890"
  data-ad-format="auto"
  data-full-width-responsive="true"
></ins>
✅

2. 네이티브 인피드 광고 🔗

리스트 형태의 콘텐츠(예: 블로그 글 목록, 카드 목록 등)에 적합한 광고입니다. 사이트 디자인과 자연스럽게 어울리도록 설정할 수 있습니다.
인수로는 data-ad-format, data-ad-layout을 사용합니다.
이 광고의 가장 큰 특징은 배경색, 글꼴, 테두리 등을 사이트 디자인에 맞게 조정할 수 있다는 점입니다. 이를 통해 광고가 콘텐츠와 자연스럽게 어우러지도록 할 수 있습니다.
네이티브 인피드 광고
네이티브 인피드 광고
<ins
  className="adsbygoogle"
  style={{ display: 'block' }}
  data-ad-format="fluid"
  data-ad-layout="in-feed"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="1234567890"
  data-ad-layout-key="-2n+2w+3e+4d"
></ins>
✅

3. 네이티브 인아티클 광고 🔗

본문 내용과 본문 사이에 자연스럽게 삽입할 수 있는 광고입니다. 긴 텍스트 콘텐츠 내 삽입 시 광고 효율이 높은 편입니다.
본문과 광고의 경계가 모호해 클릭률이 높아지는 경우도 있습니다.
이 광고 또한 디자인을 조정할 수 있는 장점이 있습니다. 예를 들어, 글꼴, 배경색, 테두리 등을 사이트 디자인에 맞게 조정할 수 있습니다.
인수로는 data-ad-format, data-ad-layout을 사용합니다.
네이티브 인아티클 광고
네이티브 인아티클 광고
<ins
  className="adsbygoogle"
  style={{ display: 'block', textAlign: 'center' }}
  data-ad-format="fluid"
  data-ad-layout="in-article"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="1234567890"
></ins>
✅

4. 네이티브 멀티플렉스 광고 🔗

그리드 형태로 여러 광고를 보여주는 방식으로, 뉴스 사이트나 추천 콘텐츠 영역과 잘 어울립니다. 콘텐츠 추천처럼 보이게 하여 클릭률이 높은 경우도 많습니다.
이 광고는 data-ad-format, data-ad-layout을 사용합니다.
네이티브 멀티플렉스 광고
네이티브 멀티플렉스 광고
<ins
  className="adsbygoogle"
  style={{ display: 'block' }}
  data-ad-format="autorelaxed"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="1234567890"
></ins>
🚀

Next.js에서 스크립트 삽입하기 🔗

Next.js에서는 광고 스크립트를 페이지에 삽입하기 위해 next/script 모듈을 사용합니다. 이 모듈은 페이지 로딩 성능을 최적화하는 데 도움을 줍니다.
/components/adsense.tsx
import Script from "next/script";
import { FunctionComponent } from "react";
 
export const GoogleAdSense: FunctionComponent = () => {
  if (process.env.NEXT_PUBLIC_NODE_ENV !== "production") {
    return null;
  }
  return (
    <Script
      async
      src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-${process.env.NEXT_PUBLIC_GAPID}`}
      crossOrigin="anonymous"
      strategy="afterInteractive"
    />
  );
};
이제 이걸 루트 레이아웃에 추가하면 됩니다.
/app/layout.tsx
// ...
import { GoogleAdSense } from "@/components/adsense";
// ...
      <head>
        <GoogleAdSense />
      </head>
      <body>
        {/* ... other content ... */}
      </body>
// ...
🚀

Next.js에서 광고 컴포넌트 구성하기 🔗

Next.js 프로젝트에서 광고를 효율적으로 삽입하려면 공통 광고 컴포넌트를 만들어 사용하는 것이 좋습니다. 아래는 Next.js (App Router 환경)에서 사용할 수 있는 광고 컴포넌트 예시입니다.
AdComponent.tsx
"use client";
 
import React, { useEffect } from "react";
import { usePathname } from "next/navigation";
interface AdComponentProps {
  adSlot: string;
  adFormat?: string;
  adLayout?: string;
  layoutKey?: string;
  style?: React.CSSProperties;
}
const AdComponent: React.FC<AdComponentProps> = ({
  adSlot,
  adFormat = "auto",
  adLayout = "",
  layoutKey = "",
  style,
}) => {
  const pathname = usePathname();
    useEffect(() => {
    try {
      (window as any).adsbygoogle = (window as any).adsbygoogle || [];
      (window as any).adsbygoogle.push({});
    } catch (e) {
      console.error("Error loading ads:", e);
    }
  }, []);
    return pathname.startsWith("/test") || pathname.startsWith("/aboutme") ? null : (
    <ins
      className="adsbygoogle"
      style={{ display: "block", ...style }}
      data-ad-client={"ca-pub-" + process.env.NEXT_PUBLIC_GAPID}
      data-ad-slot={adSlot}
      data-ad-format={adFormat}
      data-ad-layout={adLayout}
      data-ad-layout-key={layoutKey}
    ></ins>
  );
};
export default AdComponent;
✅

사용 예시 🔗

광고를 생성한 후, 본인의 키, 슬롯 ID, 광고 형식 등을 설정하여 사용합니다. 아래는 블로그 글 페이지에서 광고를 삽입하는 예시입니다.
page.tsx
import React from "react";
import AdComponent from "@/components/AdComponent";
 
const BlogPage = () => {
  return (
    <div>
      <h1>블로그 글 제목</h1>
      <p>블로그 글 내용...</p>
      <AdComponent adSlot="1234567890" adFormat="auto" /> {/* 디스플레이 광고 */}
      <AdComponent
        adSlot="0987654321"
        adFormat="fluid"
        adLayout="in-article"
        style={{ textAlign: "center" }}
      /> {/* 네이티브 인아티클 광고 */}
      <AdComponent
        adSlot="1122334455"
        adFormat="fluid"
        layoutKey="-2n+2w+3e+4d"
      /> {/* 네이티브 인피드 광고 */}
      <AdComponent
        adSlot="5566778899"
        adFormat="autorelaxed"
      /> {/* 네이티브 멀티플렉스 광고 */}
      <p>블로그 글 내용...</p>
    </div>
  );
};
 
export default BlogPage;
✅

📁 추천 파일 구조 예시 🔗

/app
  /blog
    page.tsx
/components
  AdComponent.tsx
.env
🚀

결론 🔗

자동 광고는 초심자에게 좋은 출발점이 될 수 있으나, 광고 위치와 콘텐츠 흐름을 중요하게 생각한다면 직접 삽입 방식을 추천드립니다.
직접 광고 코드를 삽입하면 유연하게 다양한 전략을 시험할 수 있고, 사용자 경험을 해치지 않으면서 수익을 최적화할 수 있습니다.
여러분의 블로그나 웹사이트에 맞는 광고 전략을 찾아 나가시길 바랍니다.
✅

참고 🔗