diff --git a/.github/workflows/tracker-script-update.yml b/.github/workflows/tracker-script-update.yml index a4f041b7a4a5..38683ca7b9cd 100644 --- a/.github/workflows/tracker-script-update.yml +++ b/.github/workflows/tracker-script-update.yml @@ -30,13 +30,12 @@ jobs: - name: Install jq and clickhouse-local run: | - sudo apt-get install apt-transport-https ca-certificates dirmngr - sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 8919F6BD2B48D754 - echo "deb https://packages.clickhouse.com/deb stable main" | sudo tee \ - /etc/apt/sources.list.d/clickhouse.list + curl -fsSL 'https://packages.clickhouse.com/rpm/lts/repodata/repomd.xml.key' \ + | sudo gpg --batch --yes --dearmor -o /usr/share/keyrings/clickhouse-archive-keyring.gpg + echo "deb [signed-by=/usr/share/keyrings/clickhouse-archive-keyring.gpg] https://packages.clickhouse.com/deb stable main" \ + | sudo tee /etc/apt/sources.list.d/clickhouse.list sudo apt-get update - - sudo apt-get install jq clickhouse-server -y + sudo apt-get install -y jq clickhouse-server - name: Compare and increment tracker_script_version id: increment diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b0296baa2ee..3853bf2d56a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ All notable changes to this project will be documented in this file. - Moved graph interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar - Standardised and improved segment and filter modals styling - Changed graph tooltip positioning logic: it now aligns to the top of the chart, to the right of the hovered data point +- Use ResizeObserver instead of polling in tracker for scroll depth. Removes forced reflows caused by the tracker script. ### Fixed diff --git a/tracker/npm_package/CHANGELOG.md b/tracker/npm_package/CHANGELOG.md index 712eb449b543..67463f87277d 100644 --- a/tracker/npm_package/CHANGELOG.md +++ b/tracker/npm_package/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +## [0.4.5] - 2026-05-05 + +- Use ResizeObserver over polling for getting scroll metrics + ## [0.4.4] - 2025-10-31 - Convert all TypeScript definition comments from `//` style to JSDoc `/** */` style for better IDE integration and TypeScript tooling support 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..c4a6ab9e55c8 100644 --- a/tracker/src/engagement.js +++ b/tracker/src/engagement.js @@ -137,11 +137,21 @@ 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, scrollTop + if (COMPILE_COMPAT) { + var el = document.documentElement || {} + var body = document.body || {} + viewportHeight = window.innerHeight || el.clientHeight || 0 + scrollTop = + window.scrollY || + window.pageYOffset || + el.scrollTop || + body.scrollTop || + 0 + } else { + viewportHeight = window.innerHeight + scrollTop = window.scrollY + } return currentDocumentHeight <= viewportHeight ? currentDocumentHeight : scrollTop + viewportHeight @@ -151,23 +161,22 @@ export function init() { currentDocumentHeight = getDocumentHeight() maxScrollDepthPx = getCurrentScrollDepthPx() - window.addEventListener('load', 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 () { + if (COMPILE_COMPAT) { + window.addEventListener('load', function () { currentDocumentHeight = getDocumentHeight() - if (++count === 15) { - clearInterval(interval) - } - }, 200) - }) + var count = 0 + var interval = setInterval(function () { + currentDocumentHeight = getDocumentHeight() + if (++count === 15) clearInterval(interval) + }, 200) + }) + } else { + new ResizeObserver(function () { + currentDocumentHeight = getDocumentHeight() + }).observe(document.documentElement) + } document.addEventListener('scroll', function () { - currentDocumentHeight = getDocumentHeight() var currentScrollDepthPx = getCurrentScrollDepthPx() if (currentScrollDepthPx > maxScrollDepthPx) {