이제는 PC보다 모바일로 검색하는 양이 늘어나면서 많은 분들이 글을 작성하실 때 모바일에서 어떻게 표현되는지 신경을 쓰시면서 계십니다. 그래서 오늘은 Chrome에서 구글 애드센스 광고 모바일 버전을 확인해보는 방법을 알아보겠습니다.
기본적으로 구글 애드센스 광고 단위를 만들 때, 반응형으로 만드시면 접속자의 접속 기기에 맞춰 광고 크기를 바꿔줍니다. 그래도 직접 확인은 해보는 것이 맞다고 생각합니다.
1. 확인하고자 하는 사이트 접속
해당 방법은 Chrome에서만 가능하므로, Chrome으로 접속 권장드립니다. 사이트 접속 후, URL 끝에 '#google_responsive_slot_preview'라는 문구를 추가합니다.( 애드센스 공식 홈페이지에서 추가하라고 하는데, 실제로 제가 해본 결과 추가하지 않아도 모바일 광고를 확인하는 데 큰 문제가 없었습니다. 혹시 어떤 차이가 있는지 아시는 분 댓글 부탁드립니다.)
2. F12를 눌러 개발자 도구를 열기
일반적으로 개발자가 아니시고 인터넷 구조나 html를 잘 모르시는 분들에게 가끔 인터넷을 하다가 실수로 무언가 눌러 당황하셨던 적이 많았을 거라고 생각되는 부분이 개발자 도구가 열렸을 때라고 생각합니다.
F12를 눌러 개발자 도구를 여셨다면, 'Toggle device toolbar'를 열어야 되는데 페이스 소스 좌측 상단에 있습니다.
아이콘을 찾기 어려우시면, 대신 Cntl + Shift + M을 동시에 누르셔도 됩니다.
3. 자신이 원하는 설정에 맞게 게시글 및 구글 애드센스 모바일 광고 확인하기!
위와 같이 따라오셧다면 대략 아래와 같은 화면의 모습을 확인하실 수 있으실 겁니다.
여기서 첫 번째 드랍박스를 통해 원하는 Mobile 기기 선택 또는 'Responsive' 선택 후, 사용자가 Pixel을 정의하여 사용하실 수 있습니다. 그리고 오른쪽 회전기능 아이콘을 클릭하면 Mobile에서 가로로 접속했을 때 화면 구성이 나타납니다. 또한, 하단에 동그라미 아이콘을 클릭하면 자유롭게 크기 및 Pixel 조정이 가능합니다.
마지막으로, 오른쪽 끝 아이콘을 누르고 'Show device frame'을 누르면 실제 모바일 기기가 렌더링 됩니다.
그림의 모바일 기기는 iPhone 6/7/8이고 이 외 다양한 기기가 있는데 현재 확인한 바로는 iPhone이나 iPad밖에 구현되지가 않습니다.
저는 테스트로 해본 것인데 벌써 광고가 반이 잘려서 게시되고 있습니다... 바로 이렇게 문제를 확인할 수 있어서 좋네요... 얼른 문제점을 찾고 수정을 해야겠습니다.
읽어주셔서 감사합니다.
'4. 잡다 지식 > 2. 블로그 정보' 카테고리의 다른 글
블로그 작성 시 꿀팁 - 구글 검색 작동 방식 이해하고 올바르게 글 쓰기 (0) | 2021.06.28 |
---|---|
블로그, 스마트 스토어 꿀팁 - 웹 페이지 이미지 한번에 모두 저장하는 방법 (0) | 2021.06.08 |
동영상을 GIF로 변환하는 사이트 및 방법!! (0) | 2021.01.23 |
블로그 상위 노출을 위한 키워드 검색 사이트 - 블랙키위 (0) | 2021.01.15 |
댓글