小说站 Facebook Pixel 深度配置：用 scroll depth 事件训练算法找「真实读者」

'use client'
import { useEffect, useRef } from 'react'

interface Props {
  chapterTitle: string
  chapterOrder: number
  bookSlug: string
}

export default function ChapterPixel({ chapterTitle, chapterOrder, bookSlug }: Props) {
  const fired25 = useRef(false)
  const fired50 = useRef(false)
  const fired75 = useRef(false)
  const fired90 = useRef(false)

  useEffect(() => {
    const fbq = (window as Window & { fbq?: (...args: unknown[]) => void }).fbq
    // ViewContent 进入即触发 — 区分「进来了」和「立刻离开」
    fbq?.('track', 'ViewContent', {
      content_type: 'chapter',
      content_name: chapterTitle,
      content_ids: [`${bookSlug}-ch${chapterOrder}`],
    })

    const payload = { content_name: chapterTitle, chapter_order: chapterOrder }

    const onScroll = () => {
      const total = document.body.scrollHeight - window.innerHeight
      if (total <= 0) return
      const ratio = window.scrollY / total
      const fire = (window as Window & { fbq?: (...args: unknown[]) => void }).fbq

      if (!fired25.current && ratio >= 0.25) {
        fired25.current = true
        fire?.('trackCustom', 'ScrollDepth25', payload)
      }
      if (!fired50.current && ratio >= 0.5) {
        fired50.current = true
        fire?.('trackCustom', 'ChapterRead50', payload)
      }
      if (!fired75.current && ratio >= 0.75) {
        fired75.current = true
        fire?.('trackCustom', 'ScrollDepth75', payload)
      }
      if (!fired90.current && ratio >= 0.9) {
        fired90.current = true
        fire?.('trackCustom', 'ChapterCompleted', payload)
      }
    }

    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [chapterTitle, chapterOrder, bookSlug])

  return null
}

// app/book/[slug]/chapter/[n]/page.tsx
<ChapterPixel
  chapterTitle={chapter.title}
  chapterOrder={chapter.order}
  bookSlug={slug}
/>