반응형
Heli, 헬리
시행착오를 줄이는 방법 - 진태양
Heli, 헬리
  • 분류 전체보기 (82)
    • General (28)
      • Essay (22)
      • Craftsmanship (2)
      • IT Meet & Hack (4)
    • Finance (1)
      • Portfolio (1)
      • Activity (0)
    • Infrastructure (1)
      • Kubernetes (0)
      • AWS (1)
    • Development (45)
      • News (4)
      • Architecture (4)
      • Web (1)
      • Spring Framework (7)
      • JVM (12)
      • MongoDB (0)
      • Git (2)
      • Algorithm (14)
      • Python (1)
    • Computer Science (1)
      • Network (1)
    • Civic Hacking (3)
      • Code for Korea (3)
    • Know-how (2)
      • IT Service (1)
      • Career (1)
    • English (1)
      • Translation (1)

인기 글

  • 서버 개발자, 커뮤니티 빌더의 이야기가 궁금하신분!
    2023.03.28
    서버 개발자, 커뮤니티 빌더의 이야기가 궁금하신분!
  • Why DDD, Clean Architecture and ⋯
    2022.03.10
    Why DDD, Clean Architecture and ⋯
  • [번역] 개발자가 잠자는 동안 돈을버는 5가지 방법 | 사⋯
    2022.04.17
    [번역] 개발자가 잠자는 동안 돈을버는 5가지 방법 | 사⋯
  • M1 칩에서 pyqt5 설치하기 - qmake 패스 설정
    2022.07.30
  • [Java & Kotlin] enum class가 완벽한 ⋯
    2021.12.13
    [Java & Kotlin] enum class가 완벽한 ⋯

블로그 메뉴

  • 홈
  • 관리
  • 방명록
hELLO · Designed By 정상우.
Heli, 헬리

시행착오를 줄이는 방법 - 진태양

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

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

2022. 2. 13. 15:37
반응형

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 버튼을 위치시키도록 했는데요.

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

반응형
저작자표시 비영리 동일조건

    ☕️ Networking

    기술 직군의 기술적인 교류, 커리어 이야기, 직군 무관 네트워킹 모두 환영합니다!

    위클리 아카데미 오픈 채팅방(비밀번호: 9323)

    kakaotalk: https://open.kakao.com/o/gyvuT5Yd

    oopy, 노션 도메인, 노션 사이트, 애드센스, 우피
    Heli, 헬리
    Heli, 헬리
    Java/Kotlin, Spring 백엔드 관련 기술을 익히고 공유합니다.

    티스토리툴바