diff --git a/CHANGELOG.md b/CHANGELOG.md index fa4292529979..9cda3d3e5dec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ All notable changes to this project will be documented in this file. - Allow querying `views_per_visit` with a time dimension in Stats API - Add `bounce_rate` to page-filtered Top Stats even when imports are included, but render a metric warning about imported data not included in `bounce_rate` tooltip. -- Add `time_on_page` to page-filtered Top Stats even when imports are included, unless legacy time on page is in view. +- Add `time_on_page` to page-filtered Top Stats even when imports are included, unless legacy time on page is in view. - Adds team_id to query debug metadata (saved in system.query_log log_comment column) - Add "Unknown" option to Countries shield, for when the country code is unrecognized - Add "Last 24 Hours" to dashboard time range picker and Stats API v2 @@ -19,6 +19,7 @@ All notable changes to this project will be documented in this file. - Keybind hints are hidden on smaller screens - Site index is sortable alphanumerically and by traffic +- Use ResizeObserver instead of polling in tracker for scroll depth. Removes forced reflows caused by the tracker script. ### Fixed diff --git a/tracker/package.json b/tracker/package.json index ec0a47654a29..8e15e9d138a4 100644 --- a/tracker/package.json +++ b/tracker/package.json @@ -1,5 +1,5 @@ { - "tracker_script_version": 33, + "tracker_script_version": 34, "type": "module", "scripts": { "lint": "eslint", diff --git a/tracker/src/engagement.js b/tracker/src/engagement.js index fcc302169e1a..f74e51694a44 100644 --- a/tracker/src/engagement.js +++ b/tracker/src/engagement.js @@ -137,10 +137,8 @@ function getDocumentHeight() { } function getCurrentScrollDepthPx() { - var body = document.body || {} - var el = document.documentElement || {} - var viewportHeight = window.innerHeight || el.clientHeight || 0 - var scrollTop = window.scrollY || el.scrollTop || body.scrollTop || 0 + var viewportHeight = window.innerHeight + var scrollTop = window.scrollY return currentDocumentHeight <= viewportHeight ? currentDocumentHeight @@ -151,23 +149,11 @@ export function init() { currentDocumentHeight = getDocumentHeight() maxScrollDepthPx = getCurrentScrollDepthPx() - window.addEventListener('load', function () { + new ResizeObserver(function () { currentDocumentHeight = getDocumentHeight() - - // Update the document height again after every 200ms during the - // next 3 seconds. This makes sure dynamically loaded content is - // also accounted for. - var count = 0 - var interval = setInterval(function () { - currentDocumentHeight = getDocumentHeight() - if (++count === 15) { - clearInterval(interval) - } - }, 200) - }) + }).observe(document.documentElement) document.addEventListener('scroll', function () { - currentDocumentHeight = getDocumentHeight() var currentScrollDepthPx = getCurrentScrollDepthPx() if (currentScrollDepthPx > maxScrollDepthPx) { diff --git a/tracker/src/plausible.js b/tracker/src/plausible.js index f8b669c7c2a8..51ab1fa7c7b5 100644 --- a/tracker/src/plausible.js +++ b/tracker/src/plausible.js @@ -16,7 +16,9 @@ function init(overrides) { initConfig(options) - initEngagementTracking() + if (!COMPILE_COMPAT) { + initEngagementTracking() + } if (!COMPILE_MANUAL || (COMPILE_CONFIG && config.autoCapturePageviews)) { initAutocapture(track)