워드프레스에 애드센스 인피드 광고 넣기

애드센스에서 자동 광고를 설정하면 간단하게 광고를 노출 시킬 수 있지만 세세한 관리는 어렵습니다. 때로는 원하지 않는 위치에 광고가 노출되기도 하고, 빈도수가 너무 많아지기도 하죠.

이런 이유로 애드센스 광고를 수동 관리할 경우, 워드프레스에서는 내가 원하는 위치에만 광고를 노출할 수 있는 플러그인 “Ad Inserter” 를 사용합니다.

이번 가이드에서는 워드프레스 애드센스 플러그인, Ad Inserter를 이용해 인피드 in-feed 광고를 넣는 방법을 알아 보겠습니다. 특히 in-feed 광고는 반응형 디스플레이를 지원하지 않기 때문에 스크립트를 사용해 반응형으로 구문을 만드는 방법도 함께 알아 보겠습니다.


1. 인피드 in-feed 광고란?

인피드 광고는 페이지 목록에 노출하기 적합한 디스플레이 광고입니다. 대부분의 애드센스 광고가 반응형인데 비해 인피드 광고는 데스크탑과 모바일이 각각 나누어져 있다는 특징이 있습니다.

데스크탑 인피드 광고
모바일 인피드 광고

데스크탑과 모바일의 코드가 별도로 구분되어 있기에, 하나의 코드로 관리할 경우 기기 화면 넓이에 따라 형태가 부적절하게 보일 수 있습니다.


2. 인피드 광고 제작 – 애드센스

인피드 광고를 애드센스에서 제작합니다. 데스크탑과 모바일을 구분하여 각각 만들어 보겠습니다.

경로 : 애드센스 > 광고 > 광고 단위 기준 > 인피드 광고

아래 표시한 영역과 같이 데스크탑과 모바일을 구분하여 제작하게 되어 있습니다.

이번 단계에서 데스크탑과 모바일 2개 코드를 생성해 주세요.


3. Ad inserter에 인피드 코드 세팅

2번 단계에서 인피드 광고 코드 2개를 생성했다면 이번에는 워드프레스 플러그인 Ad inserter에 반응형으로 동작하는 스크립트를 세팅해 보겠습니다.

워드프레스 관리자에서 Ad inserter 플러그인을 설치한 후 설정 > Ad inserter 세팅으로 들어갑니다.

1) 코드 삽입

위와 같은 형태로 Ad inserter의 빈 블록에 코드를 넣어 줍니다. 위 캡처 화면과 아래 코드를 참고하여 본인에게 맞는 코드를 삽입해 주세요. 각 계정마다 변경되는 영역을 주의 깊게 확인해 주세요.

<!-- 애드센스 in_feed 광고 (반응형) -->
<script>
    if (window.innerWidth >= 768) {
        // 768px 이상인 경우
        document.write('<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-클라이언트 번호를 넣는 영역" crossorigin="anonymous"><\/script>');
        document.write('데스크탑 ins 영역을 넣는 부분');
        document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
    } else {
        // 768px 미만인 경우
        document.write('<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-클라이언트 번호를 넣는 영역" crossorigin="anonymous"><\/script>');
        document.write('모바일 ins 영역을 넣는 부분');
        document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
    }
</script>

2) Ad inserter 추가 세팅

아래 캡처를 참고하여 나머지 세팅을 추가합니다.

🙂

이와 같이 세팅할 경우 목록에서 5개 항목마다 광고가 노출됩니다. %5 부분 숫자를 조정할 경우 얼마나 자주 광고가 노출될지 정할 수 있습니다.


4. 마무리

이번 가이드에서는 워드프레스에서 인피드 광고를 넣는 방법을 알아 보았습니다.

궁금하거나 어려운 점이 있으셨다면 댓글을 통해 질문 남겨 주세요. 감사합니다. 🙂

Leave a Comment