목차
티스토리 모바일웹 비활성화: PC 버전으로의 강제 리디렉션
티스토리의 모바일웹 환경을 비활성화하여 PC 버전으로의 강제 리디렉션을 구현하는 방법에 대해 알아봅니다. 이를 통해 모바일웹과 PC 버전 간의 일관된 디자인 및 사용자 경험을 제공할 수 있습니다.
결정적으로 중요한 것은 일단 애드센스 광고 적용입니다. 티스토리 모바일웹 페이지에서는 애드센스 광고가 적게 뜨게 되고, 수익이 악화됩니다. 따라서 티스토리에서 제공하는 모바일 페이지 대신에 반응형 스킨이 적용된 티스토리 PC버전 스킨으로 강제 리다이렉션 시킬 필요가 있습니다.
티스토리 모바일웹 비활성화의 이유
티스토리 모바일웹은 PC 버전과 다르게 스킨 편집이 제한적입니다. 따라서 모바일웹을 비활성화하면 어떠한 브라우저에서도 일관된 디자인을 유지할 수 있습니다. 하지만 티스토리는 모바일웹을 완전히 비활성화하는 기능을 제공하지 않습니다. 따라서 본 가이드에서는 모바일웹으로 접속 시 PC 버전 페이지로 강제 리디렉션하는 방법을 소개합니다.
구현 방법
아래는 티스토리 모바일웹 비활성화 및 PC 버전으로의 강제 리디렉션을 구현하는 방법입니다.
1. 모바일웹 자동 연결 해제
- 블로그관리 → 꾸미기 → 모바일
- 티스토리 모바일웹 자동 연결을 사용하지 않습니다.
- 변경사항 저장 클릭
2. 자바스크립트 코드 작성
let href = location.href;
if (href.includes('/m/'))
href = href.replace('/m/', '/');
else if (href.endsWith('/m'))
href = href.substr(0, href.length - 2);
if (location.href !== href)
if (navigator.userAgent.includes('Tistory')) {
const req = new XMLHttpRequest();
req.addEventListener('load', () => {
document.documentElement.innerHTML = req.responseText;
hljs.highlightAll();
});
req.open('GET', href);
req.send();
} else
location.href = href;
작성한 파일을 redirect.js
라는 이름으로 저장합니다.
3. 자바스크립트 코드 업로드
- 블로그관리 → 꾸미기 → 스킨 편집
- 우측 상단에 html 편집 → 위에서 저장한 파일 업로드
- 우측 하단에 추가 →
redirect.js
파일 선택 - 파일 목록에
redirect.js
파일이 추가됩니다. - 마우스 커서를
redirect.js
파일 위에 올려 놓고 - 오른쪽 클릭 - 링크 주소 복사 - 복사한 링크를 메모장 등에 잘 보관
4. 구글 애널리틱스 플러그인 사용
- 블로그관리 → 플러그인 → 구글 애널리틱스 클릭
- 측정 ID 또는 추적 ID에 다음 코드를 붙여넣습니다.'방금 전에 복사한 링크'는 이전 단계에서 업로드한 redirect.js 파일의 링크로 대체합니다.
');</script><script src='방금 전에 복사한 링크'></script><script>('
그럼 GA4 적용은 어떻게?
구글 애널리틱스 플러그인을 이용하지 말고, GA4 스트림 코드를 스킨에 직접 입력해서 쓰세요.
장점
- 모바일웹 홈페이지 및 게시글에 접속하여도 PC 버전으로 일관된 디자인 제공
- 티스토리 어플에서도 PC 버전 페이지로 표시
- 개발자 모드 콘솔에 오류 발생하지 않음
결론
티스토리 모바일웹을 비활성화하여 PC 버전으로의 강제 리디렉션을 통해 사용자에게 일관된 환경을 제공할 수 있습니다. 위의 단계를 따라 진행하여 모바일웹의 제약을 극복하고 블로그의 사용자 경험을 향상시키세요.
요약 키워드
티스토리, 모바일웹, 비활성화, PC 버전, 강제 리디렉션, 사용자 경험, 자바스크립트, 구글 애널리틱스
'Tistory Adsense > Tistory Tip' 카테고리의 다른 글
티스토리에서 사용할 수 없는 이메일 도메인입니다: 가입 불가와 본인 인증 필수 (0) | 2024.11.05 |
---|---|
티스토리 구글 애널리틱스 "아직 웹사이트에서 받은 데이터가 없습니다" 해결방법 (0) | 2024.08.27 |
티스토리 파비콘 네이버 검색에 안나오는 이유와 해결 방법 (0) | 2023.11.22 |
티스토리 응원 받기 기능 사용을 위한 설정 (0) | 2023.10.27 |
티스토리 유튜브 동영상 첨부 (0) | 2023.10.18 |
댓글