@senspond
>
NextJs 구글 애드센스 적용시 발생할 수 있는 오류 / CSS Grid 연습
nextjs로 개발한 Rgbitcode 에 구글애드센스 관련한 문제를 겪게 되었는데요. 그 원인을 찾아나가는 과정과 생각해본 내용을 정리해봅니다.
문제 발단
nextjs에서 개발된 Rgbitcode 웹 사이트 사이드바 쪽에 구글 애드센스를 넣고 나서 모바일에서 확인해보면 페이지 접속을 할 수 없는 버그가 생겼습니다.
디버깅
구글 애드센스가 로컬환경에서는 게시되지는 않지만 테스트 자체는 모바일 디버깅을 통해 가능하였습니다.
오류케이스
스샷처럼 데스크탑 브라우저에서는 오류가 안나는데, 모바일로 확인해 보면 오류가 납니다.
TagError: adsbygoogle.push() error: No slot size for availableWidth=0
광고를 표시하려 할 때 상위 태그의 사이즈를 가지고 올 수 없는 에러..
-> 사이드바에 광고를 표시하도록 설정했는데 상위 태그를 찾을 수가 없어서 광고를 게시할 영역이 존재하지 않는다.
@media (max-width: 1130px) {
aside.main-left-sidebar{ display: none;}
aside.main-right-sidebar{display: none;}
section.main-section-wrapper {padding : 0 !important}
}현재 코드상 1130px 보다 작은 크기의 디바이스에서 사이드바 영역을 보이지 않게 했기 때문에... 구글 애드센스 스크립트가 실행되면서 광고를 게시하려고 보니 태그 엘리먼트를 찾을 수가 없으니 내뿜는 에러였습니다.
구글 애드센스 컴포넌트는 다음과 같이 작성되었습니다.
"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 에서는 그냥 무시해버려도 되는 런타임 오류로 끝나는게 아니라... 저대로 production으로 배포하게 되면 모바일에서 해당페이지를 아예 접속자체를 못해버린다는 것이 문제입니다.
과거에 page router 방식에서 app router 방식으로 변경하고 나서 기존에 발생하지 않았던 모바일에서만 생기는 오류로 페이지 접속을 못했던 적이 있었는데, 그 때는 로컬에서 핸드폰 연결해서 모바일 디버깅을 했을때는 문제가 없어서 nginx 설정을 바꿔서 해결한적이 있었습니다. NextJS App router 방식이 현재 가장 최신 기술이지만 다소 안정적이지는 않은것 같습니다.
아무튼 ... 사이드바가 가려지면 이경우에 대한 처리를 해줬어야 했습니다. 그래서 단순하게 처음에 로드 할 때 브라우저 사이즈가 특정사이즈(1130px)보다 작으면 애드센스를 적용하지 않도록 해버리면 되기는 합니다. 그런데 데스크탑에서 브라우저 사이즈를 1130px 이하로 줄여놓고 새로고침한 후 다시 브라우저 사이즈를 늘리면 사이드바에 광고가 나오지 않는 또 다른 문제가 생깁니다. 그것까지 생각하면 resize 이벤트로 브라우저 사이즈가 변동 됬을 때 다시 체크하도록 만들면 되기는 했지만, 이거 하나때문에 코드가 지저분하게 된다는 점이네요
정리
구글 애드센스 영역은 페이지 사이즈에 따라서 보였다 안보였다 하게 되면... 오류가 날 수가 있다.
처음부터 해당 위치를 고려해 반응형 레이아웃을 잘 만들어 두었으면 문제 없었던 것.
그냥 레이아웃을 다시 만들까?
현재 레이아웃은 CSS media query 로 미세조정 해가며 구현을 해놨는데... 처음에는 별 문제가 없었지만 점점 UI들이 하나둘씩 집어넣으려니 제대로 컨트롤 하기가 용이하지 않아 개선을 할 필요성을 느끼게 되었습니다.
그리고 대충 html,css 를 가지고 새 레이아웃을 만들어 봤습니다.
CSS Grid 연습
저도 CSS Grid layout 은 많이 써보질 않아서 미숙한 부분이 있는데요. 잘 설명된 글이 있어서 참고할 만한 링크를 가져와봤습니다. https://armadillo-dev.github.io/css/understanding-grid-layout/
html
<html>
<body>
<div className="grid-container">
<div className="grid-item">1</div>
<div className="grid-item">2 - Title</div>
<div className="grid-item">3</div>
<div className="grid-item">4 - Left Side</div>
<div className="grid-item">5 - Sub Title </div>
<div className="grid-item">6</div>
<div className="grid-item main-content">7 - body</div>
<div className="grid-item ">8 - Table Of Contents</div>
<div className="grid-item">9 - Footer </div>
</div>
</body>
</html>css
.grid-container {
display: grid;
gap: 20px 20px;
grid-template-columns : 1fr 3fr 1fr;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item:nth-child(4){
background-color: #333333;
color : #e1e1e8;
grid-column-start : 1;
grid-column-end : 1;
grid-row-start : 2;
grid-row-end : 4;
}
.grid-item:nth-child(9){
grid-column-start : 1;
grid-column-end : 4;
background-color: #333333;
color : #e1e1e8;
height : 200px;
}
.main-content {
//width: 52rem;
background-color:#e1e1e8;
min-height: 700px;
}
@media (max-width: 1350px) {
.grid-container { grid-template-columns : 3fr;}
.grid-item:nth-child(1) {display: none;}
.grid-item:nth-child(3) {display: none;}
.grid-item:nth-child(6) {display: none;}
.grid-item:nth-child(4) {height: 300px;}
.grid-item:nth-child(8) {grid-row-start: 5;}
.grid-item:nth-child(9){ grid-column-start : 1;grid-column-end : 1; }
}
그러니까 4번 사이드바 영역에 광고 넣을 것을 생각하고 화면을 축소하게 되면은 상단으로 올라가면서 아래처럼 나오는 형태입니다. ( 2번이 해더, 5번에 제목영역이라고 봐야 좀더 자연스러운것 같네요. )
마무리
막상 다시 구성하려니 상당한 귀찮음이 밀려왔습니다. 이로 인해 한가지 교훈을 얻게 되었습니다. 다음에 사이트를 만들때는 처음부터 애드센스 위치 등까지 고려한 반응형 레이아웃을 제대로 잡아놓고 시작을 해야겠다는 것 !
안녕하세요. Red, Green, Blue 가 만나 새로운 세상을 만들어 나가겠다는 이상을 가진 개발자의 개인공간입니다.
댓글 ( 0 )
카테고리내 관련 게시글
현재글에서 작성자가 발행한 같은 카테고리내 이전, 다음 글들을 보여줍니다
@senspond
>