-
- {!!post.contentHtml && (
- globalThis?.document?.body}
- />
- )}
+ {/* One MPU per BODY_CHARS_PER_AD of visible text, only ever between
+ top-level blocks — splitContentForAds cannot cut a paragraph, list
+ or code block in half. */}
+ {!!post.contentHtml &&
+ splitContentForAds(post.contentHtml, BODY_CHARS_PER_AD).map(
+ (chunk, index, chunks) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ globalThis?.document?.body}
+ />
+ {index < chunks.length - 1 && (
+
+ ),
+ )}
+
+ {/* Same block the post page shows: the questions that likely brought
+ an anonymous visitor here (the component self-hides for logged-in
+ users and question-less posts). */}
+
${label.repeat(Math.ceil(chars / label.length)).slice(0, chars)}
`; + +describe('splitContentForAds', () => { + it('returns short content as a single chunk', () => { + const html = para(100, 'a'); + expect(splitContentForAds(html, 300)).toEqual([html]); + }); + + it('splits only at top-level block boundaries', () => { + const first = para(300, 'a'); + const second = para(300, 'b'); + const chunks = splitContentForAds(first + second, 250); + + expect(chunks).toEqual([first, second]); + }); + + it('never cuts inside a nested structure', () => { + const list = `- ${'x'.repeat(300)}
- ${'y'.repeat( + 300, + )}
${'if (x) {\n}\n'.repeat(40)}${'a'.repeat(150)}
${'b'.repeat(
+ 150,
+ )}
${'q'.repeat(300)}` + + `
Heading
${para(400, 'b')}`; + const chunks = splitContentForAds(html, 250); + + expect(chunks.join('')).toBe(html); + expect(chunks.length).toBeGreaterThan(1); + }); +}); diff --git a/packages/shared/src/components/post/arbitrage/splitContentForAds.ts b/packages/shared/src/components/post/arbitrage/splitContentForAds.ts new file mode 100644 index 0000000000..0cd9f0b48c --- /dev/null +++ b/packages/shared/src/components/post/arbitrage/splitContentForAds.ts @@ -0,0 +1,78 @@ +const TAG_RE = /<\/?([a-zA-Z][\w-]*)(?:[^>'"]|"[^"]*"|'[^']*')*?\/?>/g; + +// Elements that never take a closing tag, so an opening token must not +// increase the nesting depth. +const VOID_ELEMENTS = new Set([ + 'area', + 'base', + 'br', + 'col', + 'embed', + 'hr', + 'img', + 'input', + 'link', + 'meta', + 'source', + 'track', + 'wbr', +]); + +const visibleLength = (text: string): number => + text + .replace(/&[#\w]+;/g, 'x') + .replace(/\s+/g, ' ') + .trim().length; + +/** + * Splits rendered article HTML into chunks of at least `minChars` of visible + * text, cutting only where a top-level block element closes — an ad between + * chunks can never land inside a paragraph, list, blockquote or code block. + * A short tail is merged into the chunk before it, so the article never ends + * on an ad followed by a stray line. + */ +export function splitContentForAds(html: string, minChars: number): string[] { + const chunks: string[] = []; + let depth = 0; + let chunkStart = 0; + let cursor = 0; + let visible = 0; + + TAG_RE.lastIndex = 0; + let match = TAG_RE.exec(html); + while (match) { + const [token, rawName] = match; + visible += visibleLength(html.slice(cursor, match.index)); + cursor = match.index + token.length; + + const name = rawName.toLowerCase(); + if (token.startsWith('= minChars) { + chunks.push(html.slice(chunkStart, cursor)); + chunkStart = cursor; + visible = 0; + } + } else if (!VOID_ELEMENTS.has(name) && !token.endsWith('/>')) { + depth += 1; + } + + match = TAG_RE.exec(html); + } + + const tail = html.slice(chunkStart); + if (tail.trim()) { + chunks.push(tail); + } + + // The last chunk earns its preceding ad only when it carries real content. + if (chunks.length > 1) { + const last = chunks[chunks.length - 1]; + if (visibleLength(last.replace(TAG_RE, ' ')) < minChars / 2) { + chunks[chunks.length - 2] += last; + chunks.pop(); + } + } + + return chunks; +} diff --git a/packages/shared/src/features/monetization/ProgrammaticAd.tsx b/packages/shared/src/features/monetization/ProgrammaticAd.tsx index c9981fae43..e1c13e27c4 100644 --- a/packages/shared/src/features/monetization/ProgrammaticAd.tsx +++ b/packages/shared/src/features/monetization/ProgrammaticAd.tsx @@ -321,7 +321,9 @@ export function ProgrammaticAd({ observer.disconnect(); setIsRequested(true); }, - { rootMargin: '600px' }, + // Expert-tuned: request just as the slot approaches rather than a + // viewport ahead — viewability over prefetch. + { rootMargin: '50px' }, ); observer.observe(element); @@ -483,7 +485,9 @@ export function ProgrammaticAd({
- {/* A fluid native unit is the "confusable with site content" shape
- AdSense prohibits shipping unlabeled — "Advertisements" is one of
- the two label strings its policy permits. Inside the wrapper, so an
- unfilled slot's collapse takes the label down with it. */}
- {isRequested && config.type === 'inFeed' && (
-
+ {/* Every unit is labeled so none can be confused with site content —
+ "Advertisements" is one of the two label strings AdSense permits
+ (a bare "Advertisement" is not). Inside the wrapper, so an unfilled
+ slot's collapse takes the label down with it. */}
+ {isRequested && (
+
Advertisements
)}