리테일 미디어

Retail media

쇼핑 중인 고객에게 유통 채널의 검색·진열 지면에서 광고합니다.

···
html
<div class="shelf"><div class="search">SEARCH · DAILY GOODS</div><div class="products"><div class="product sponsored"><span class="box"></span><div><small>SPONSORED</small><b>NOVA / DAILY KIT</b><em>$29</em></div></div><div class="product"><span class="box pale"></span><div><small>RESULT 01</small><b>EVERYDAY SET</b><em>$27</em></div></div><div class="product"><span class="box cool"></span><div><small>RESULT 02</small><b>FRESH START</b><em>$31</em></div></div></div></div>
css
.shelf{width:min(88%,500px);background:var(--surface);border:1px solid var(--line);padding:clamp(8px,2vmin,18px);font:800 clamp(8px,1.5vmin,13px)/1.2 sans-serif}.search{border:1px solid var(--line);padding:clamp(6px,1.5vmin,11px);color:var(--muted);letter-spacing:.08em}.products{display:grid;gap:clamp(4px,1vmin,8px);margin-top:8px}.product{display:flex;gap:clamp(7px,2vmin,15px);align-items:center;border-bottom:1px solid var(--line);padding:clamp(3px,1vmin,7px);transition:transform .4s}.product .box{width:clamp(28px,8vmin,60px);height:clamp(28px,8vmin,60px);background:linear-gradient(135deg,var(--accent),var(--accent-2));flex:none}.box.pale{background:linear-gradient(135deg,var(--accent-3),var(--line))}.box.cool{background:linear-gradient(135deg,var(--muted),var(--line))}.product div{display:grid;gap:2px}.product small{color:var(--muted);font-size:clamp(7px,1.2vmin,10px)}.sponsored small{color:var(--accent)}.product b{font-size:clamp(9px,1.7vmin,14px)}.product em{font-style:normal;color:var(--muted)}.sponsored{animation:enter 4s ease-in-out infinite}@keyframes enter{0%,10%{opacity:0;transform:translateY(30px)}30%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(30px)}}

리테일 미디어는 유통업체가 가진 검색 결과, 상품 진열, 고객 접점에 광고를 게재하는 방식입니다. 이미 구매 의도를 가진 고객에게 상품을 보여줄 수 있습니다.

데모에서는 '스폰서' 상품이 검색 목록의 위쪽에 들어오고, 일반 결과는 아래로 이동합니다. 광고 성과를 볼 때는 광고를 보지 않았어도 일어났을 구매를 분리해야 합니다.

유료 노출과 자연 검색 결과를 구별할 수 있도록 표시하고, 높은 순위가 상품 품질을 증명한다고 오해시키지 마세요.

언제 쓰나

유통 채널 안에서 상품 발견을 늘릴 때 씁니다. 증분 매출과 광고비를 함께 봅니다.

페이지로 열기 ↗