Shaneod
7월 27, 2023, 7:14오전
1
안녕하세요,
광고 호스팅에 대해 알아보고 있습니다. 공식 광고 플러그인을 사용 중인데, 사이트의 다양한 위치에 자산을 추가할 수 있어 매우 좋습니다.
하지만 광고 대행사와 상담해 보니, 내 트래픽의 대부분이 모바일에서 발생한다는 점을 고려할 때 모바일에서 광고 노출률을 최적으로 높이려면 헤더나 푸터에 스티키(고정) 광고를 사용하는 것이 좋다고 합니다.
문제는 물론, 푸터에 스티키 광고를 배치하면 중요한 버튼들을 가리게 되어 사용자 경험(UX)에 악영향을 미친다는 점입니다. 이는 절대 피해야 할 부분입니다.
사이트 하단에 배너 높이에 해당하는 여백을 추가하여 스티키 배너가 중요한 UX 요소에 영향을 주지 못하게 하는 방법이 있을까요? 사용자가 배너 광고를 닫아야만 답글을 달거나 게시글 수를 이용해 스레드를 아래로 스크롤할 수 있는 상황은 원하지 않습니다.
또한 Discourse의 스티키 헤더는 스티키 배너의 영향을 받나요? 아니면 배너가 Discourse 내비게이션 바 위에 위치할 수 있을까요?
아니면 이것은 광고 대행사가 그들의 광고 기술로 해결할 수 있는 문제인가요?
감사합니다,
Shane
Shaneod
7월 27, 2023, 8:11오전
2
본체(body) 하단에 패딩을 추가해서 스티키 푸터 광고 배너가 답변 버튼 위에 겹치지 않도록 하면 어떨까 하고 있습니다. 그리고 팝업으로 나타나는 답변 제어 박스에는 z-index를 설정해서 광고 배너 위에 올라오도록 할 수도 있을 것 같습니다.
모바일에서 사용자 경험에 영향을 주지 않고 스티키 헤더 및/또는 푸터 배너 광고를 성공적으로 구현해 보신 분이 있는지 궁금합니다.
Don
7월 27, 2023, 9:25오전
3
안녕하세요
가능은 하지만 많은 요소에 따라 달라집니다. 사이트 URL을 공유해 주시겠어요?
플러그인 아웃렛을 사용해 배너를 내부에 넣는 방식을 추천합니다. 플러그인 아웃렛의 높이를 배너 높이에 맞게 설정하면 필요한 공간이 자동으로 추가됩니다.
아래와 같은 방식입니다. 참고: 이는 단순한 빠른 예시이며, 구현에 대한 아이디어를 제공해 드리고자 합니다. 더 많은 정보와 사이트 URL을 공유해 주시면 확인 후 더 자세한 도움을 드릴 수 있습니다.
모바일 / 헤더
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
<div class="test-top-banner"></div>
</script>
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
<div class="test-bottom-banner"></div>
</script>
모바일 / CSS
body {
--banner-height: 40px;
.d-header-wrap {
top: var(--banner-height);
}
.above-site-header-outlet.top-banner {
@include sticky;
top: 0;
width: 100%;
height: var(--banner-height);
z-index: z("header");
.test-top-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
.below-footer-outlet.bottom-banner {
@include sticky;
bottom: env(safe-area-inset-bottom);
width: 100%;
height: var(--banner-height);
z-index: z("header");
.test-bottom-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
#topic-progress-wrapper:not(.docked) {
margin-bottom: var(--banner-height);
}
}
Shaneod
7월 27, 2023, 11:55오전
4
안녕하세요 @Don - 답장 주셔서 감사합니다. 저도 그런 게 필요할 것 같다고 생각했거든요.
Shaneod
7월 27, 2023, 1:10오후
5
안녕하세요 @Don , 모바일에서 답글을 작성하려고 할 때 해당 구현 방식이 어떻게 작동하나요?
Don
7월 27, 2023, 2:42오후
6
동작은 하지만 상단 배너 때문에 작성창이 작아집니다.
작성창이 열려 있을 때 배너를 숨기는 것이 더 좋을 것 같습니다.
작성창이 열렸을 때 배너를 숨기도록 이 클래스를 지정할 수 있습니다: .composer-open
Mobile / CSS
body {
--banner-height: 40px;
// Header
.d-header-wrap {
top: var(--banner-height);
transition: top 0.25s ease-in;
.composer-open & {
top: 0;
}
}
// Top banner
.above-site-header-outlet.top-banner {
@include sticky;
top: 0;
width: 100%;
height: var(--banner-height);
transition: height 0.25s ease-in;
z-index: z("header");
.test-top-banner {
width: 100%;
height: var(--banner-height);
background: red;
transition: height 0.25s ease-in;
.composer-open & {
height: 0;
}
}
.composer-open & {
height: 0;
}
}
// Bottom banner
.below-footer-outlet.bottom-banner {
@include sticky;
bottom: env(safe-area-inset-bottom);
width: 100%;
height: var(--banner-height);
z-index: z("header");
.test-bottom-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
// Move topic progress wrapper the top of the bottom banner
#topic-progress-wrapper:not(.docked) {
margin-bottom: var(--banner-height);
.composer-open & {
margin-bottom: 0;
}
}
// Add banner height to composer max height calculation
&:not(.ios-safari-composer-hacks) #reply-control.open {
max-height: calc(100vh - var(--header-offset) + var(--banner-height));
}
}
수정: 코드에 몇 가지 수정을 가했습니다.
Shaneod
7월 27, 2023, 2:52오후
7
아, 정말 감사합니다! 이 도움 덕분에 정말 많은 도움이 되었어요 - 훌륭해요!
Shaneod
8월 24, 2023, 7:36오후
8
Hey @Don - 모바일에서는 해당 테스트가 아주 잘 작동하고 있어요. 데스크톱에도 적용해 보니 작동할 것 같긴 한데, 답글 버튼을 누를 때 약간의 문제가 있어요. 모바일에서는 스틱 영역이 사라지는데, 데스크톱에서는 그대로 남아 있거든요. 데스크톱에서 작성기(composer)가 열릴 때 사용할 수 있는 CSS 훅이 있을까요?
Shaneod
9월 13, 2023, 5:14오후
9
안녕하세요 @Don - 데스크톱에서 푸터를 닫는 방법에 대해 혹시 알고 계신가요? 모바일 버전은 잘 작동하는데, 데스크톱에서 답글 버튼을 눌러 답글 상자를 열 때 고정(stick) 요소를 제거하는 방법을 모르겠어요. 제 실력으로는 CSS를 처리하기가 어려워요.
감사합니다
Don
9월 15, 2023, 10:53오전
10
안녕하세요 @Shaneod
늦어서 죄송합니다. 위에서 작성한 코드는 모바일 섹션에 배치되어 있어 모바일에서만 작동합니다. 데스크톱에서도 작동하도록 코드를 수정했습니다. 이 코드를 공용 섹션에 배치하고 기존 모바일 섹션에서 제거해야 합니다.
데스크톱과 모바일 모두에서 작동하도록 업데이트된 코드는 다음과 같습니다.
공용 / 헤더
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
<div class="test-top-banner"></div>
</script>
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
<div class="test-bottom-banner"></div>
</script>
공용 / CSS
body {
--banner-height: 40px;
}
.d-header-wrap {
top: var(--banner-height);
transition: top 0.25s ease-in;
.composer-open & {
top: 0;
}
}
.sidebar-wrapper {
html:not(.composer-open) & {
height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
}
}
.above-site-header-outlet.top-banner {
@include sticky;
top: 0;
width: 100%;
height: var(--banner-height);
transition: height 0.25s ease-in;
z-index: z("header");
.test-top-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
.composer-open & {
height: 0;
}
}
.below-footer-outlet.bottom-banner {
@include sticky;
bottom: env(safe-area-inset-bottom);
width: 100%;
html:not(.composer-open) & {
height: var(--banner-height);
}
z-index: z("composer", "content") - 1;
.test-bottom-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
#topic-progress-wrapper:not(.docked) {
margin-bottom: var(--banner-height);
.composer-open & {
margin-bottom: 0;
}
}
body:not(.ios-safari-composer-hacks) #reply-control.open {
max-height: calc(100vh - var(--header-offset) + var(--banner-height));
}
ozkn
9월 15, 2023, 7:50오후
11
이 영역에 Google 광고를 표시할 수 있나요? @Don
Shaneod
9월 16, 2023, 7:58오전
13
네, 저는 푸터 영역에 고정 광고를 배치해 두었습니다. Don이 답글을 작성할 때 고정 영역을 숨기도록 해 두었기 때문에, 광고가 사이트 사용성에 방해가 되지 않아요!
