body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
}
.calculator-container {
max-width: 800px;
margin: 20px auto;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
padding: 30px;
}
.calc-header {
text-align: center;
margin-bottom: 30px;
border-bottom: 2px solid #0073aa;
padding-bottom: 15px;
}
.calc-header h2 {
margin: 0;
color: #0073aa;
font-size: 28px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #444;
}
.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
.input-group input:focus {
border-color: #0073aa;
outline: none;
}
.btn-calculate {
display: block;
width: 100%;
background-color: #0073aa;
color: #fff;
border: none;
padding: 15px;
font-size: 18px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 10px;
}
.btn-calculate:hover {
background-color: #005177;
}
.results-area {
margin-top: 30px;
background-color: #f9f9f9;
padding: 20px;
border-radius: 6px;
display: none;
border: 1px solid #eee;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
}
.result-row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.result-label {
font-size: 16px;
color: #555;
}
.result-value {
font-size: 24px;
font-weight: 700;
color: #333;
}
.highlight-rate {
color: #0073aa;
font-size: 32px;
}
.calc-notes {
font-size: 12px;
color: #777;
margin-top: 10px;
}
.content-section {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
}
.content-section h2 {
color: #222;
margin-top: 30px;
}
.content-section p {
margin-bottom: 15px;
}
.content-section ul {
margin-bottom: 15px;
padding-left: 20px;
}
.formula-box {
background: #f0f7fb;
padding: 15px;
border-left: 4px solid #0073aa;
font-family: monospace;
margin: 20px 0;
}
.error-msg {
color: #dc3232;
font-weight: bold;
text-align: center;
margin-top: 10px;
display: none;
}
/* Visual Bar */
.bar-container {
height: 20px;
background-color: #e0e0e0;
border-radius: 10px;
margin-top: 10px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background-color: #0073aa;
width: 0%;
transition: width 0.5s ease-in-out;
}
function calculateViewability() {
// Clear previous errors
var errorDiv = document.getElementById('errorMsg');
var resultsDiv = document.getElementById('resultsArea');
errorDiv.style.display = 'none';
// Get Inputs
var total = parseFloat(document.getElementById('totalImpressions').value);
var viewable = parseFloat(document.getElementById('viewableImpressions').value);
// Validation Logic
if (isNaN(total) || isNaN(viewable)) {
errorDiv.innerHTML = "Please enter valid numbers for both fields.";
errorDiv.style.display = 'block';
resultsDiv.style.display = 'none';
return;
}
if (total <= 0) {
errorDiv.innerHTML = "Total Measured Impressions must be greater than zero.";
errorDiv.style.display = 'block';
resultsDiv.style.display = 'none';
return;
}
if (viewable total) {
errorDiv.innerHTML = "Viewable Impressions cannot exceed Total Measured Impressions.";
errorDiv.style.display = 'block';
resultsDiv.style.display = 'none';
return;
}
// Calculation Logic
var viewabilityRate = (viewable / total) * 100;
var nonViewable = total – viewable;
var lossRate = 100 – viewabilityRate;
// Display Results
document.getElementById('rateResult').innerHTML = viewabilityRate.toFixed(2) + "%";
document.getElementById('nonViewableResult').innerHTML = nonViewable.toLocaleString();
document.getElementById('lossRateResult').innerHTML = lossRate.toFixed(2) + "%";
// Visual Bar Update
var barFill = document.getElementById('rateBar');
barFill.style.width = viewabilityRate + "%";
// Dynamic Color Logic based on Benchmarks (Simple logic: 70 green)
if (viewabilityRate < 50) {
barFill.style.backgroundColor = "#dc3232"; // Red
document.getElementById('rateResult').style.color = "#dc3232";
} else if (viewabilityRate < 70) {
barFill.style.backgroundColor = "#ffb900"; // Yellow/Orange
document.getElementById('rateResult').style.color = "#d69c00";
} else {
barFill.style.backgroundColor = "#46b450"; // Green
document.getElementById('rateResult').style.color = "#46b450";
}
resultsDiv.style.display = 'block';
}
What is Ad Viewability?
Ad Viewability is a digital advertising metric that tracks only the impressions that can actually be seen by users. Unlike served impressions, which track when an ad is loaded on a page, viewable impressions confirm that the ad was contained in the viewable area of the browser window.
According to the Interactive Advertising Bureau (IAB) and the Media Rating Council (MRC), an impression is considered "viewable" if it meets the following criteria:
- Display Ads: At least 50% of the ad's pixels are in view for a minimum of 1 continuous second.
- Video Ads: At least 50% of the ad's pixels are in view for a minimum of 2 continuous seconds.
- Large Canvas Formats: For ads larger than 242,500 pixels, 30% of pixels must be in view.
How to Calculate Viewability Rate
The viewability rate is calculated by dividing the number of viewable impressions by the total number of measured impressions, then multiplying by 100 to get a percentage.
Viewability Rate (%) = (Viewable Impressions / Total Measured Impressions) × 100
Example Calculation
Suppose an advertiser runs a display campaign with the following data:
- Total Measured Impressions: 1,000,000
- Viewable Impressions: 550,000
The calculation would be:
(550,000 / 1,000,000) × 100 = 55% Viewability Rate
Why Does Viewability Matter?
Viewability gives advertisers a clearer picture of their campaign performance. If an ad isn't seen, it cannot drive awareness or conversions. High viewability rates often correlate with higher Click-Through Rates (CTR) and better Return on Ad Spend (ROAS).
For publishers, maintaining high viewability is crucial for maximizing ad revenue (eCPM), as many premium advertisers will only pay for viewable impressions (vCPM).
Common Causes of Low Viewability
If your calculation shows a low rate, consider investigating these factors:
- Ad Position: Ads placed at the very bottom of a page (below the fold) often have lower viewability if users don't scroll down.
- Page Load Speed: If content loads slowly, users may navigate away before the ad renders.
- Layout Shifts: Unexpected page movements can push ads out of the viewport.
- Ad Clutter: Pages with too many ads can overwhelm users, leading to "banner blindness" or rapid scrolling past ad units.