UTM 매개변수

<div class="utm"><div class="url">site.example/?<b>utm_source=<span id="src">email</span></b></div><div class="chips"><span id="medium">MEDIUM · NEWSLETTER</span><span>CAMPAIGN · LAUNCH</span></div><div class="rows"><div id="email"><b>EMAIL</b><i></i><strong>1 VISIT</strong></div><div id="social"><b>SOCIAL</b><i></i><strong>0 VISITS</strong></div></div></div>

.utm{width:min(88%,600px);font:800 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.url{padding:clamp(9px,2vmin,16px);border:1px solid var(--line);background:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.url b{color:var(--accent)}.chips{display:flex;gap:6px;margin:clamp(9px,2vmin,16px) 0}.chips span{border:1px solid var(--fg);padding:5px 7px;font-size:clamp(10px,max(1.6vmin,1vw),12px)}.rows{display:grid;gap:7px}.rows>div{display:grid;grid-template-columns:clamp(48px,11vmin,90px) 1fr clamp(52px,12vmin,90px);align-items:center;gap:8px;padding:clamp(5px,1.5vmin,10px);border-bottom:1px solid var(--line)}.rows i{height:clamp(10px,2.6vmin,20px);background:var(--accent);transition:width .5s}.rows strong{text-align:right;font-size:clamp(10px,max(1.6vmin,1vw),12px)}.rows .dim{opacity:.35}

let social=false;function render(){document.querySelector('#src').textContent=social?'social':'email';document.querySelector('#medium').textContent='MEDIUM · '+(social?'POST':'NEWSLETTER');for(const id of ['email','social']){const active=(id==='social')===social,el=document.querySelector('#'+id);el.classList.toggle('dim',!active);el.querySelector('i').style.width=active?'85%':'8%';el.querySelector('strong').textContent=active?'1 VISIT':'0 VISITS'}}render();setInterval(()=>{social=!social;render()},1700);