[우피/oopy] 애드센스 광고 달 경우 cta 버튼 위치 조절

Oopy(우피) 는 노션 페이지를 최적화된 웹사이트로 바꿔주는 서비스입니다. 원하는 도메인 주소를 연결할 수도 있는데요.

저는 위클리 아카데미라는 스터디, 강의 공간을 우피로 연결하여 사용중에 있습니다.

https://weekly.ac

위클리 아카데미

위클리 아카데미는 스터디, 세미나, 컨퍼런스 및 네트워킹 파티를 상시 운영하고 있습니다.

www.weekly.ac

그리고 우피는 애드센스를 붙일 수도 있는데요. 방법도 정말 간단합니다.

https://www.oopy.io/ko/guides/plugins/google-adsense

Google Adsense(구글 광고)

Notion(노션)에 구글 애드센스(광고) 붙이기

www.oopy.io

다만, 엄청난 문제점이 있습니다...

우피에 구글 애드센스를 붙일 경우 '자동 광고' 기능을 이용해야하는데 구글에서 광고의 위치를 CTA 버튼이 위치한 공간을 선정해버립니다. 아래 이미지처럼요.

그래서 CTA 버튼의 위치를 광고를 피해 아래에서 많이 띄어 높여주어야 합니다. 여기까지는 우피에서 쉽게 설정할 수 있기 때문에 괜찮은데요. 만약 사용자가 애드블럭과 같은 광고 차단 프로그램을 사용한다면 어떻게 될까요?

당연하게도 광고는 안보이고, 버튼은 아래에 많은 여백을 두고 덩그러니 위치하게 됩니다.

애드블럭으로 인해 광고가 로딩되지 않았을 경우 버튼을 아래쪽에 배치하고 싶은데, 어떻게 하면 좋을까 고민하다 스크립트를 이용하게 되었습니다 !

우선 우피의 HTML 편집 메뉴로 가주세요.

그 후 아래 스크립트를 복사 - 붙여넣기만 하면 됩니다.

<script>
  window.onload = function() {
    const cta = document.querySelector("a.cta");
    
    if (adsbygoogle.loaded) { // 애드센스가 로딩되었다면
      cta.style.bottom = '104px'; // CTA 버튼을 아래에서 104px에 위치시킨다
    } else {
      cta.style.bottom = '16px'; // 로딩되지 않았다면, CTA 버튼을 아래에서 16px에 위치시킨다
    }
  }
</script>

저는 적당히 애드센스를 불러왔다면 아래에서 104픽셀, 그렇지 않다면 아래에서 16픽셀에 CTA 버튼을 위치시키도록 했는데요.

만약 애드블럭을 적용하고 페이지에 접속하면 아래와 같이 깔끔하게 보이게 됩니다 😊