content_read_complete: Koniec z vanity metrics w analityce contentu.

Algorytm deep engagement oparty na Intersection Observer API

Zdecydowałem się na wstrzyknięcie logiki przez GTM (Custom HTML Tag), aby nie nie zmieniać kodu strony przy każdej zmianie parametrów algorytmu. Data Flow: GTM Trigger (virtual_page_view) -> GTM Custom HTML (Injection & Cleanup) -> DOM (React) -> Data Layer -> GA4.

Deep dive (Implementacja & Roadblocks)

Budowa rozwiązania w GTM dla aplikacji SPA wymagała obejścia kilku krytycznych przeszkód:

1. Asynchroniczny Contentful vs GTM: W architekturze Headless, treść artykułu nie jest częścią statycznego kodu HTML – jest dociągana z API Contentful już po załadowaniu aplikacji. Powodowało to krytyczny race condition: GTM inicjował skrypt w milisekundach, gdy kontener div.prose był jeszcze pusty lub w ogóle nie istniał w DOM. Standardowy skrypt kończyłby się błędem „undefined” lub zerową liczbą słów. Zamiast niepewnego setTimeout, zaimplementowałem inteligentne oczekiwanie. Skrypt w pętli (co 500ms) "odpytuje" strukturę DOM o obecność treści z Contentfula. Dopiero w momencie, gdy React pomyślnie wyrenderuje dane z API, następuje "uchwycenie" tekstu (innerText), kalkulacja metryk i aktywacja obserwatora. Dzięki temu analityka jest odporna na opóźnienia sieciowe (latency) po stronie API CMS-a.

2. SPA Memory Leaks (Zombie Observers): W SPA zmiana adresu URL nie czyści obiektu window. Każde przejście na nowy artykuł odpalało tag GTM ponownie, tworząc nową instancję IntersectionObserver, podczas gdy stary observer nadal nasłuchiwał w tle. Przy 5 przeczytanych artykułach miałem 5 działających w tle skryptów wysyłających zduplikowane eventy. Rozwiązanie: Dodałem logikę "Garbage Collector" na początku skryptu. Kod sprawdza, czy w window istnieje już instancja mojego observera i jeśli tak – wykonuje na niej twarde .disconnect().

3. Matematyka "True Read": Zrezygnowałem ze sztywnego czasu. Czas potrzebny na przeczytanie jest dynamiczny (WordCount / 225 words per minute). Warunkiem zaliczenia konwersji jest:

   • Użytkownik dotarł do końca artykułu (Intersection Observer na stopce).

   • Upłynął minimalny czas (Threshold = 25% estymowanego czasu).

<script>
(function() {
  var MAX_RETRIES = 10;
  var RETRY_INTERVAL = 500;

  if (window.trueReaderObserver) {
      try { window.trueReaderObserver.disconnect(); } catch(e) {}
      window.trueReaderObserver = null;
  }
  window.trueReaderHasRead = false;

  var retryCount = 0;
  var waitForContent = setInterval(function() {
    var contentBlocks = document.querySelectorAll('[class*="prose"]');

    if (contentBlocks.length > 0) {
        clearInterval(waitForContent);
        initTrueReader(contentBlocks);
    } 
    else if (retryCount >= MAX_RETRIES) {
        clearInterval(waitForContent);
    }
    retryCount++;
  }, RETRY_INTERVAL);

  function initTrueReader(contentBlocks) {
    var startTime = new Date().getTime();
    var allText = "";

    contentBlocks.forEach(function(block) {
      allText += block.innerText || block.textContent;
    });

    var wordCount = allText.trim().split(/\s+/).length;

    if (wordCount < 50) return;

    var estTime = Math.ceil((wordCount / 225) * 60);
    var threshold = estTime * 0.25;

    window.trueReaderObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting && !window.trueReaderHasRead) {
          var currentTime = new Date().getTime();
          var timeSpent = (currentTime - startTime) / 1000;

          if (timeSpent >= threshold) {
            window.trueReaderHasRead = true;
            window.dataLayer.push({
              'event': 'content_read_complete',
              'time_spent': Math.round(timeSpent),
              'est_total_time': estTime,
              'article_title': document.title
            });
            window.trueReaderObserver.disconnect();
          }
        }
      });
    }, { threshold: [0.1] });

    var lastBlock = contentBlocks[contentBlocks.length - 1];
    if (lastBlock) {
        var target = lastBlock.lastElementChild || lastBlock;
        window.trueReaderObserver.observe(target);
    }
  }
})();
</script>