애드센스 의도하지 않은 클릭 방지하기(고급)

얼마전 올린 상단바에 공유버튼 삽입하는 방법과 연관되어있는 방법입니다.

Material T 스킨 상단바 고정 공유버튼 (고급)

위 글을 작성하면서 애드센스에 문의하던 중에 확인한 아이디어인데요, 원래 애드센스 정책상 광고위에 클릭가능한 요소가 겹쳐지는경우 의도하지 않은 클릭을 유도할 수 있기 때문에 금지하고 있습니다.

Material T스킨처럼 드로워를 열었을때 본문 위로 드로워가 겹쳐지는경우 정책위반이 될 수 있는데 Material T에서는 드로워의 뒷배경이 클릭되지 않게함으로 정책위반이 아님을 확인했습니다. 

여기서 오버랩되는 UI가 아니더라도 의도하지 않은 클릭을 유발할 수 있는경우, 흔히 광고와 클릭가능한 요소가 가까이 위치한 경우에 일부영역의 클릭을 제한함으로 의도하지 않은 클릭을 방지할 수 있습니다.

From what we've discussed, if the content behind cannot be clicked, we do not consider this menu a violation. You explained that the content behind cannot be clicked on your website. Therefore, it is safe to say your site's menu is not against our policy for now.

몇몇 적용가능한 예시를 생각해보자면 상단바가 고정되어있는경우, 상단바 아래 일정 픽셀을 클릭하지 않도록할 수 있습니다.

제 블로그에서는 정책위반이라 생각하여 ToTop 버튼을 제거했지만 꼭 필요하다 생각하는경우 의도하지 않은 클릭을 방지함으로써 걸릴확률을 줄여줄 수도 있겠습니다.

※주의 : 뒷배경 전체를 클릭되지 않도록 하는것은 정책위반이 아니라는 답변을 받았지만 일부만 클릭되지 않게한다고 정책위반이 아니라는 말은 아닙니다. 단지 의도하지 않은 클릭을 방지함으로 시스템상 적발되는 것을 방지하기 위한 차원의 방법입니다. 

방법

원리는 고정된 요소에(fixed element) 클릭이 되지 않고 투명한 요소를 추가하는 것입니다.

웬만해서는 CSS코드만으로 가능하고 요소마다 적용방법이 달라질 수 있기 때문에 고급사용자들에게 아이디어만 제공하는 것이 본문의 목적입니다.

아래는 Header에 CSS를 이용하여 ::after pseudo-element를 삽입하여 헤더 아래 50px은 클릭이 되지 않도록 하는 CSS코드입니다.

header::after {

    content: "";

    display: block;

    width: 100%;

    height: 50px;

    position: absolute;

    top: 56px;

}

toTop과 같이 원형으로 고정된 요소의 경우는 toTop element에 z-index를 부여하고 ::after는 더 큰크기로 z-index를 더낮게 설정함으로 목표를 달성할 수 있을 것 같습니다.