미넴 스킨 (Mynem Skin) 광고 설정 기능 소개

미넴 스킨 광고 설정 기능입니다.

 

목차

 

애드센스 광고 설정 방법

광고 설정 방법에 대해 문의가 많아서 정리해 보았습니다.

 

미넴 스킨에 애드센스 광고 코드 적용하는 방법 (data-ad-client, data-ad-slot)

미넴 스킨에 애드센스 광고 코드 적용하는 방법 (data-ad-client, data-ad-slot)

 

사이드바 광고 따라다니기 기능

사이드바에 설정한 광고가 애드센스 및 애드핏 중 하나라도 있으면 따라 다니도록 만들었습니다. 우선순위는 일치하는 광고 > 그 외 애드센스 광고 > 카카오 애드핏 광고 순입니다.

 

스킨편집에서 일치하는 광고를 설정하였다면 사이드바에 일치하는 광고가 고정되어 따라 다니게 됩니다.

 

일치하는 광고 기능을 OFF해 보겠습니다.

 

다음과 같이 구글 애드센스 광고가 따라 다닙니다.

 

사이드바 애드센스 광고도 한 번 OFF 해 보겠습니다.

 

예상대로 애드핏 광고가 잘 따라 다닙니다.

 

광고 고정 기능 옵션

구글 핵심 웹 지표(CLS)에서 좋은 점수를 받으려면 광고 영역의 크기를 지정하는 것이 좋습니다.

 

만약에 광고 크기에 맞지 않는 스타일로 크기고정 영역을 사용하시면  다음과 같이 광고에 스크롤이 생기게 됩니다.

 

광고영역 크기고정 옵션을 끄게 되면 레이아웃이 좀 흔들리기는 하지만 다음과 같이 광고가 잘 보이게 됩니다.

 

이 기능을 이용하고 싶으신 분들은 스킨 편집 html 편집기의 HTML 탭에서 다음 부분을 수정하시면 됩니다.

 

애드센스 설정 편의 기능

구글 광고를 좀 더 편하게 적용하도록 만들어 보았습니다. 스킨 편집 화면에서 광고를 켜고 끌 수 있게 하였고 광고 코드도 쉽게 적용할 수 있도록 기능을 제공합니다.

 

메인 구글 일치하는 광고

먼저 홈 화면에 일치하는 광고 적용하는 방법입니다. 다음과 같이 사용 여부를 ON 으로 변경하고 광고 코드 값을 넣기만 하면 바로 적용이 됩니다. 구글 애드센드 적용에 대한 기본적인 이해가 있으신 분들만 사용할 것이라 예상되므로 광고 코드에 대한 설명은 따로 하지 않겠습니다.

 

다음과 같이 추천 글에 일치하는 광고가 보이면 정상적으로 적용된 것입니다.

 

사이드바 구글 일치하는 광고

사이드바에도 일치하는 광고가 있으면 유용하므로 쉽게 적용할 수 있는 방법을 제공합니다.

 

다음과 같이 보이면 잘 적용된 것입니다. 마찬가지로 내 블로그 글이 무작위로 리스팅되므로 추천 글이라는 타이틀을 이용하였습니다.

 

본문 구글 일치하는 광고

본문 영역에는 하단 관련 글 대신 일치하는 광고로 대체하였습니다. 일치하는 광고를 사용하지 않는 분들도 '카테고리 글 더보기' 플러그인을 관련 글 대신 사용하시면 됩니다. 물론 둘 다 사용해도 문제는 없습니다.

 

다음과 같이 글 하단에 추천 글이 보이면 정상적으로 적용이 된 것입니다.

 

본문 상단 구글 광고 2개

본문에는 2개의 광고를 넣어야 하므로 data-ad-slot도 2개가 필요합니다. 구글 애드센스 사이트에 방문하여 디스플레이 광고 단위를 2개 생성하여 얻으시면 됩니다.

 

잘 이해가 되지 않는 분은 다음 글을 참고해 보세요.

 

티스토리 상단에 애드센스 광고 2개 띄우기

티스토리 상단에 애드센스 광고 2개 띄우기

 

다음과 같이 글 상단에 광고 2개가 보이면 적용이 정상적으로 된 것입니다.

 

인피드 광고 설정 방법

다음 값들을 채워 넣으면 됩니다. 하나씩 살펴 보겠습니다.

 

사용 여부를 설정합니다.

 

인피드 광고의 빈도를 설정합니다. 2를 입력 시 게시물 2개당 광고 1개를 배치 합니다.

 

애드센스 광고 구조를 이미 안다는 가정 하에 설명하겠습니다.

 

먼저 큰 화면(PC 용)의 설정 값입니다.

패딩을 모두 5px로 줍니다.

 

이미지는 왼쪽 정렬이 기본이고 가로 세로 비율은 1:1 이며 너비는 180px로 설정합니다. 패딩은 오른쪽만 15px를 줍니다.

 

가려 놓은 3개의 값을 잘 적어 놓습니다.

 

다음은 작은 화면(모바일용) 설정 값입니다.

패딩을 전부 3px으로 줍니다.

 

이미지는 마찬가지로 왼쪽 정렬, 가로 세로 비율 1:1으로 하고 너비는 120px로 입력합니다. 패딩은 오른쪽만 5px를 주겠습니다.

 

마찬가지로 3가지 가려 놓은 값을 잘 적어 놓습니다.

 

data-ad-client는 모든 광고의 공통 값입니다. ca-pub-으로 시작하는 값을 넣습니다.

 

적어 놓은 10자리 숫자 코드를 넣습니다.

 

마찬가지로 위에서 설정으로부터 얻은 -rm+o-33-8o+rh 와 같은 레이아웃 키 값을 넣습니다.

 

(내용 추가)

추가적으로 인피드 광고를 사이드바 최근 글, 인기 글에도 적용하였습니다.

간단히 설명하면 애드센스 사이트에서 인피드 광고 설정 시 전체 옵션의 패딩 4군데 값을 모두 5px로 주고 이미지에서 왼쪽 정렬, 가로 세로 비율 1:1, 너비 70px, 오른쪽 패딩 값만 10px로 주면 됩니다. 나머지는 디자인은 적당히 설정해 주세요.

 

큰 화면에서의 광고 배치입니다.

 

다크 모드에서도 잘 보이네요.

 

모바일 화면에서도 적절하게 잘 표시되고 있습니다.

 

따로 적용하고 싶으신 분은 아래 링크 참고 바랍니다.

애드센스 인피드 광고 티스토리에 적용하기

애드센스 인피드 광고 티스토리에 적용하기

 

좁은 화면 광고 게재 방법

좁은 화면에서 광고를 빼는 것이 나을 지 어떻게든 유지하는게 나을 지 고민하다가 일단은 유지하는 쪽으로 방향을 잡고 고정 크기의 광고 사이즈가 화면보다 클 경우 스크롤을 이용하여 다 담았습니다. 크게 이질감이 없이 배치가 무난하여 당분간은 이대로 유지하고 추후 안 좋은 의견이 많을 경우에 방법을 다시 연구해 보겠습니다.

 

CLS 관점에서 애드핏, 애드센스 광고 종류에 따라 높이는 고정 시켜주는 것이 좋습니다. CSS에서 다음 부분을 사용할 광고 크기에 맞게 바꿔주세요. 참고로 저는 상하단 광고는 애드핏을 본문 상단 2개 광고는 애드센스를 이용하기 위해 다음과 같이 고정하였습니다.

#upper .revenue_unit_wrap {
	height: 105px !important;
}
.tt_article_useless_p_margin .revenue_unit_wrap {
	height: 280px !important;
}
#lower .revenue_unit_wrap {
	height: 105px !important;
}

 

그리고 사이드바의 광고는 애드센스와 애드핏을 둘 다 적용할 경우 revenue_unit_wrap 클래스에서는 구분을 할 수가 없어서 하위 클래스를 지정하여 너비와 높이 값을 주었습니다. revenue_unit_wrap 클래스에 직접 고정 값을 주는 것보다 흔들림이 있긴 하지만 딱히 다른 방법이 떠오르지 않아서 일단 이렇게 조치하였습니다.

.sidebar .revenue_unit_wrap .adsense {
    width: 300px !important;
    height: 600px !important;
    margin-left: auto;
    margin-right: auto;
}
.sidebar .revenue_unit_wrap .adfit {
    width: 300px !important;
    height: 255px !important;
    margin-left: auto;
    margin-right: auto;
}

 

따로 설정을 안 해도 큰 문제는 없지만 DOM이 동적으로 변하는 것이 웹 지표에 좋지 않은 영향을 주기 때문에 웬만하면 고정 값을 이용하시는 것이 좋습니다.

 

애드센스 광고 자동 새로고침 기능

사이드바에 있는 애드센스 일치하는 광고, 기본 광고를 자동으로 새로고침 하여 좀 더 다양한 광고를 보여줄 수 있습니다. 다음 기능을 켜기만 하면 됩니다.

 

적용 결과 및 별도 적용 방법은 다음 글을 참고해 보세요.

애드센스 광고 자동 리프레시(새로고침)를 통해 광고 수익 개선하기

애드센스 광고 자동 리프레시(새로고침)를 통해 광고 수익 개선하기

 

글 중간 애드센스 광고 자동 삽입

사용 여부 및 광고 빈도를 설정할 수 있습니다. 기본 값은 30라인 마다 삽입입니다. 애드센스 기준으로 기존 삽입 광고가 있으면 무시되도록 하는 기능도 있는데 광고를 어떻게 적용시켰는지에 따라서 적용이 되지 않을 수도 있으니 참고 바랍니다.

광고 종류는 콘텐츠 내 삽입 광고 및 디스플레이 사각 광고가 기본이고 이 둘을 랜덤으로 출력시키는 기능까지 구현해 놓았습니다. 다른 종류의 광고 slot 값을 넣으면 정상적으로 표시되지 않을 수 있으니 주의 바랍니다.

 

개별적으로 적용하고 싶으신 분은 다음 게시물 참고 바랍니다.

 

광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전

광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전

 

애드센스 검색바 광고 추가

cx 파라미터에 들어가는 코드만 입력하면 자동으로 셋팅될 수 있도록 구현해 놓았습니다.

 

검색 광고 설정 시 레이아웃을 꼭 두 열로 설정해 주셔야 정상적으로 동작합니다. 나머지 설정은 적절히 해주시면 됩니다.

 

저장 및 코드 생성 버튼을 누르면 나오는 코드에서 아래 초록색 부분 값만 가져와서 입력하시면 됩니다.

 

플로팅 광고 설정

플로팅 광고 사용 여부를 설정할 수 있고 종류까지 설정할 수 있도록 옵션을 추가하였습니다. 더불어 사이드바의 일치하는 광고 높이도 설정할 수 있도록 변경하였습니다. 현재 기본 값은 960입니다.

 

애드센스 일치하는 광고 자동 스크롤

일치하는 광고의 길이를 길게 할 경우 자동 스크롤 되는 기능을 구현하였습니다. 플로팅 광고를 사이드바 일치하는 광고로 설정했을 경우 동작합니다.

 

쿠팡 광고 설정 기능 추가

양 사이드의 빈 공간에 쿠팡 광고를 넣을 수 있는 기능입니다. 사이드바 멀티 플렉스 광고를 사용하지 않는 경우에만 적용되도록 하였습니다. 광고의 형태는 다음과 같습니다.

 

다음과 같이 멀티플렉스 광고의 값은 빈 값으로 유지하고 쿠팡 광고 ID만 설정하면 됩니다. 둘 다 입력이 되어 있으면 멀티 플렉스 광고가 적용됩니다.

 

쿠팡 파트너스 사이트에서 링크 생성 > 다이나믹 배너 생성 메뉴에서 ID를 생성할 수 있습니다.

 

 

파란색 박스 부분이 광고 ID이고 주황색 부분이 계정 ID 값입니다.