The share of impressions that resulted in a click.
<div class="wrap"><div class="headline">100 IMPRESSIONS <strong id="rate">4% CTR</strong></div><div class="grid" id="grid"></div><div class="caption"><i></i> CLICKED <span id="count">4 OF 100</span></div></div>.wrap{width:min(86%,420px);font:800 clamp(10px,max(1.8vmin,1vw),15px)/1.2 sans-serif}.headline,.caption{display:flex;justify-content:space-between;align-items:center;gap:6px;letter-spacing:.06em}.headline{margin-bottom:clamp(10px,2vmin,16px)}.headline strong{color:var(--accent);font-size:clamp(17px,4.5vmin,34px)}.grid{display:grid;grid-template-columns:repeat(20,1fr);gap:clamp(2px,.6vmin,5px)}.grid i{aspect-ratio:1;background:var(--line);transition:background .3s,transform .3s}.grid i.hit{background:var(--accent);transform:scale(1.08)}.caption{margin-top:clamp(8px,2vmin,15px);color:var(--muted);justify-content:flex-start}.caption i{width:10px;height:10px;background:var(--accent)}.caption span{margin-left:auto}const grid=document.querySelector('#grid');grid.innerHTML=Array.from({length:100},()=>'<i></i>').join('');let n=4,d=2;function draw(){[...grid.children].forEach((cell,i)=>cell.classList.toggle('hit',i<n));document.querySelector('#rate').textContent=n+'% CTR';document.querySelector('#count').textContent=n+' OF 100'}draw();setInterval(()=>{n+=d;if(n>=12||n<=2)d*=-1;draw()},700);CTR is clicks divided by impressions. It helps assess how often a creative or query placement invites a click.
The demo lights up click cells in a grid of 100 illustrative impressions and recalculates the rate.
Optimizing for CTR alone can reward enticing copy that attracts poor-fit traffic. Compare context and post-click conversion too.
Use it to compare creative or query appeal, then judge it with conversion outcomes.