Customer segmentation

고객 세분화

Group customers with similar behavior or traits for distinct offers.

···
html
<div class="seg"><div class="top">PURCHASES ≥ <b id="threshold">2</b><button id="toggle">CHANGE</button></div><div class="dots"><span data-n="1">1</span><span data-n="2">2</span><span data-n="4">4</span><span data-n="1">1</span><span data-n="3">3</span><span data-n="5">5</span><span data-n="2">2</span><span data-n="4">4</span></div><div class="foot"><i></i> TARGET <b id="count">6 / 8</b></div></div>
css
.seg{width:min(88%,520px);font:900 clamp(10px,max(1.7vmin,1vw),14px)/1.1 sans-serif}.top,.foot{display:flex;align-items:center;gap:9px}.top b{color:var(--accent)}.top button{margin-left:auto;background:var(--fg);color:var(--bg);border:0;padding:7px;font:inherit;cursor:pointer}.dots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,2vmin,15px);margin:clamp(12px,3vmin,26px) 0}.dots span{height:clamp(28px,7vmin,55px);display:grid;place-items:center;border-radius:50%;border:2px solid var(--line);color:var(--muted);transition:.5s}.dots span.on{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.08)}.foot i{width:10px;height:10px;background:var(--accent);border-radius:50%}.foot b{margin-left:auto}
js
let threshold=2;function show(){let count=0;document.querySelectorAll('[data-n]').forEach(el=>{const on=Number(el.dataset.n)>=threshold;el.classList.toggle('on',on);if(on)count++});document.querySelector('#threshold').textContent=threshold;document.querySelector('#count').textContent=count+' / 8'}function flip(){threshold=threshold===2?4:2;show()}document.querySelector('#toggle').addEventListener('click',()=>{clearInterval(timer);flip()});show();const timer=setInterval(flip,2300);

Customer segmentation divides an audience into groups that share meaningful conditions. Purchase frequency and category interest often connect more directly to action than broad labels.

Change the purchase threshold in the demo and customer dots move in or out of the target group. Check whether each group would actually receive a different message, not only its size.

Overly narrow segments create tiny groups that are hard to operate. Decide what action differs between groups before adding another rule.

When to use

Use it when different customer groups call for different goals or messages.

Open as page ↗