Which Sections of Your Listing Pages Actually Get Seen?

You have a 3,000-word analysis of condo ownership costs. Google Analytics tells you the average time on page is 4 minutes. But which sections did they actually read? Did they see the data tables? Did they scroll to the comparison chart? Did they reach the call-to-action at the bottom?

Standard analytics tools tell you whether someone visited a page and how long they stayed. They do not tell you what they saw. For content-heavy real estate pages — market analyses, cost breakdowns, buyer guides — knowing what sections get seen versus what gets scrolled past is the difference between guessing and knowing what your audience cares about.

The Intersection Observer API solves this. It is a browser-native JavaScript API that detects when elements enter or leave the viewport — meaning it can tell you exactly which sections of your page each visitor actually saw.

I implemented Intersection Observer analytics across our 52-site network. The data reshaped how we structure content, where we place key information, and which sections get expanded versus consolidated.

What Intersection Observer Does

The Intersection Observer API watches specified HTML elements and fires a callback when those elements become visible in the browser viewport. "Visible" is configurable — you can set the threshold to fire when 10% of the element is visible, 50%, or 100%.

For analytics purposes, this means you can:

• Track which H2 sections of a blog post get scrolled into view
• Measure how far down the page users actually read
• Identify which data tables, charts, or images get seen
• Determine whether users reach your call-to-action
• Compare section visibility across different traffic sources

The API is native to every modern browser. No library required. No performance penalty. The observer runs asynchronously and does not block the main thread or slow page rendering.

Implementation

Basic Section Tracking

Add an observer to every major section of your page:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const sectionId = entry.target.id || entry.target.textContent.substring(0, 50);
      // Send to your analytics platform
      sendAnalyticsEvent('section_viewed', {
        section: sectionId,
        page: window.location.pathname
      });
      // Stop observing once seen (count each section once per page view)
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.5 // Fire when 50% of section is visible
});

// Observe all H2 sections
document.querySelectorAll('h2').forEach(heading => {
  observer.observe(heading);
});

This code watches every H2 heading on the page. When a user scrolls a heading into view (50% visible), it fires an analytics event recording which section was seen. The observer then stops watching that heading to avoid duplicate counts.

Tracking Key Elements

Beyond section headings, observe specific high-value elements:

// Track data tables
document.querySelectorAll('table').forEach(table => {
  observer.observe(table);
});

// Track images and charts
document.querySelectorAll('.chart, .data-visualization').forEach(el => {
  observer.observe(el);
});

// Track CTAs
document.querySelectorAll('.cta-button, .book-link').forEach(el => {
  observer.observe(el);
});

Scroll Depth Milestones

Track percentage-based scroll depth by adding invisible marker elements:

// Add markers at 25%, 50%, 75%, and 100% of content height
const content = document.querySelector('.article-body');
const milestones = [0.25, 0.50, 0.75, 1.00];

milestones.forEach(pct => {
  const marker = document.createElement('div');
  marker.dataset.milestone = `${pct * 100}%`;
  marker.style.height = '1px';
  marker.style.position = 'absolute';
  marker.style.top = `${pct * 100}%`;
  content.style.position = 'relative';
  content.appendChild(marker);
  observer.observe(marker);
});

Connecting to Analytics

Google Analytics 4

Send Intersection Observer events to GA4 using the gtag.js API:

function sendAnalyticsEvent(eventName, params) {
  if (typeof gtag !== 'undefined') {
    gtag('event', eventName, params);
  }
}

GA4 will record custom events that you can analyze in the Events report. Create a custom report showing section visibility by page to identify which sections perform best.

Privacy-Respecting Analytics

If you use a privacy-focused analytics tool like Plausible, Fathom, or Umami, use their custom event APIs:

// Plausible
function sendAnalyticsEvent(eventName, params) {
  if (typeof plausible !== 'undefined') {
    plausible(eventName, { props: params });
  }
}

Self-Hosted Tracking

For sites without third-party analytics, send events to a simple serverless endpoint that logs them to a file or database:

function sendAnalyticsEvent(eventName, params) {
  navigator.sendBeacon('/api/analytics', JSON.stringify({
    event: eventName,
    ...params,
    timestamp: Date.now()
  }));
}

The sendBeacon API ensures the request is sent even if the user navigates away from the page immediately after the event fires.

What the Data Reveals

After running Intersection Observer analytics on our real estate content for 60 days, the findings changed our content strategy:

Finding 1: Data Tables Get More Attention Than Prose

Sections containing data tables had 85% visibility rates — meaning 85% of page visitors scrolled far enough to see them. Narrative sections between tables had 60-70% visibility. Users are scrolling to the data and spending time on it.

Action taken: We moved the most important data tables higher in every article, above narrative sections that previously preceded them.

Finding 2: The Drop-Off Zone

On articles with 2,500+ words, there is a consistent drop-off between 60-70% scroll depth. Approximately 40% of visitors never reach the bottom third of long articles.

Action taken: We moved call-to-action links and book references to the 50-60% point in addition to the bottom. We also added mid-article summary boxes that recap key findings for readers who are about to leave.

Finding 3: Mobile vs. Desktop Behavior

Mobile users scroll further percentage-wise but spend less time per section. Desktop users stop scrolling earlier but engage more deeply with the sections they do reach. This varies by content type — mobile users scroll through image-heavy content quickly, while desktop users engage more with data tables.

Action taken: We created mobile-optimized summary cards that appear between sections, providing key takeaways for mobile users who are scanning rather than reading.

Finding 4: Chart Engagement

Custom data visualizations (charts we created) had nearly 2x the view rate of stock images. Visitors specifically scroll to see original charts. Stock hero images at the top of articles were seen by everyone but added no engagement value.

Action taken: We replaced generic hero images with data-driven charts on our highest-traffic articles. CTA elements placed near charts had higher visibility than CTAs placed near text sections.

Performance Considerations

The Intersection Observer API is designed for performance. Unlike scroll event listeners (which fire on every pixel of scroll movement), Intersection Observer fires only when visibility thresholds are crossed. This means:

• No scroll jank or performance degradation
• No impact on Core Web Vitals
• Minimal JavaScript execution (callbacks fire infrequently)
• Battery-efficient on mobile devices

For sites that already run analytics scripts, adding Intersection Observer tracking adds negligible overhead. The observer itself uses less than 1KB of JavaScript.

Implementation Across the Network

I deployed Intersection Observer analytics across all 52 sites using a shared JavaScript module added to the base template. The module automatically observes all H2 headings, data tables, charts, and CTA elements on every page.

Setup time: 45 minutes for the initial implementation and analytics connection. Ongoing maintenance: zero — the observer runs automatically on every page.

The insights from section-level analytics are more actionable than any page-level metric. Knowing that 85% of visitors see your data tables but only 60% see your conclusion tells you exactly where to place your most important information.

For the complete analytics and optimization strategy for real estate content, see The Condo Trap and The $100 Dollar Network.