mirror
/
analytics
mirror of https://github.com/plausible/analytics.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Scroll depth: Register `pageleave` listener earlier (#5000) 

* Register `pageleave` listener earlier

Currently, pageleave listener is only registered when a successful
response is received from plausible API.

After this change pageleave listener is registered immediately when
pageview is triggered, hopefully increasing capture rate.

* Codespell
This commit is contained in:
Karl-Aksel Puulmann 2025-01-22 11:30:23 +02:00 committed by GitHub
parent 714f7f4603
commit 8d238cd340
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 72 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.codespellignore
View File

@ -6,3 +6,4 @@ taht
referer referer
referers referers
statics statics
firs

17
tracker/src/plausible.js
View File

@ -212,14 +212,6 @@
payload.h = 1 payload.h = 1
{{/if}} {{/if}}
var request = new XMLHttpRequest();
request.open('POST', endpoint, true);
request.setRequestHeader('Content-Type', 'text/plain');
request.send(JSON.stringify(payload));
request.onreadystatechange = function() {
if (request.readyState === 4) {
{{#if pageleave}} {{#if pageleave}}
if (isPageview) { if (isPageview) {
currentPageLeaveIgnored = false currentPageLeaveIgnored = false
@ -228,6 +220,15 @@
registerPageLeaveListener() registerPageLeaveListener()
} }
{{/if}} {{/if}}
var request = new XMLHttpRequest();
request.open('POST', endpoint, true);
request.setRequestHeader('Content-Type', 'text/plain');
request.send(JSON.stringify(payload));
request.onreadystatechange = function() {
if (request.readyState === 4) {
options && options.callback && options.callback({status: request.status}) options && options.callback && options.callback({status: request.status})
} }
} }

2
tracker/test/file-downloads.spec.js
View File

@ -45,7 +45,7 @@ test.describe('file-downloads extension', () => {
await page.goto('/file-download.html') await page.goto('/file-download.html')
const downloadURL = LOCAL_SERVER_ADDR + '/' + await page.locator('#local-download').getAttribute('href') const downloadURL = LOCAL_SERVER_ADDR + '/' + await page.locator('#local-download').getAttribute('href')
const downloadRequestMockList = mockManyRequests(page, downloadURL, 2) const downloadRequestMockList = mockManyRequests({ page, path: downloadURL, numberOfRequests: 2 })
await page.click('#local-download') await page.click('#local-download')
expect((await downloadRequestMockList).length).toBe(1) expect((await downloadRequestMockList).length).toBe(1)

8
tracker/test/fixtures/pageleave-pageview-props.html vendored
View File

@ -11,6 +11,14 @@
<body> <body>
<a id="navigate-away" href="/manual.html">Navigate away</a> <a id="navigate-away" href="/manual.html">Navigate away</a>
<button id="back-button-trigger">Back button</button>
</body> </body>
<script>
document.addEventListener('click', (e) => {
if (e.target.id === 'back-button-trigger') {
window.history.back()
}
})
</script>
</html> </html>

1
tracker/test/fixtures/pageleave.html vendored
View File

@ -11,6 +11,7 @@
<body> <body>
<a id="navigate-away" href="/manual.html">Navigate away</a> <a id="navigate-away" href="/manual.html">Navigate away</a>
<a id="to-pageleave-pageview-props" href="/pageleave-pageview-props.html">Navigate to pageleave-pageview props</a>
<button id="history-nav">Navigate with history</button> <button id="history-nav">Navigate with history</button>

21
tracker/test/pageleave.spec.js
View File

@ -169,4 +169,25 @@ test.describe('pageleave extension', () => {
] ]
}) })
}) })
test('sends a pageleave when plausible API is slow and user navigates away before response is received', async ({ page }) => {
await expectPlausibleInAction(page, {
action: () => page.goto('/pageleave.html'),
expectedRequests: [{n: 'pageview', u: `${LOCAL_SERVER_ADDR}/pageleave.html`}]
})
await expectPlausibleInAction(page, {
action: async () => {
await page.click('#to-pageleave-pageview-props')
await page.click('#back-button-trigger')
},
expectedRequests: [
{n: 'pageleave', u: `${LOCAL_SERVER_ADDR}/pageleave.html`},
{n: 'pageview', u: `${LOCAL_SERVER_ADDR}/pageleave-pageview-props.html`, p: {author: 'John'}},
{n: 'pageleave', u: `${LOCAL_SERVER_ADDR}/pageleave-pageview-props.html`, p: {author: 'John'}},
{n: 'pageview', u: `${LOCAL_SERVER_ADDR}/pageleave.html`}
],
responseDelay: 1000
})
})
}) })

23
tracker/test/support/test-utils.js
View File

@ -32,13 +32,16 @@ exports.metaKey = function() {
// Mocks a specified number of HTTP requests with given path. Returns a promise that resolves to a // Mocks a specified number of HTTP requests with given path. Returns a promise that resolves to a
// list of requests as soon as the specified number of requests is made, or 3 seconds has passed. // list of requests as soon as the specified number of requests is made, or 3 seconds has passed.
const mockManyRequests = function(page, path, numberOfRequests) { const mockManyRequests = function({ page, path, numberOfRequests, responseDelay }) {
return new Promise((resolve, _reject) => { return new Promise((resolve, _reject) => {
let requestList = [] let requestList = []
const requestTimeoutTimer = setTimeout(() => resolve(requestList), 3000) const requestTimeoutTimer = setTimeout(() => resolve(requestList), 3000)
page.route(path, (route, request) => { page.route(path, async (route, request) => {
requestList.push(request) requestList.push(request)
if (responseDelay) {
await delay(responseDelay)
}
if (requestList.length === numberOfRequests) { if (requestList.length === numberOfRequests) {
clearTimeout(requestTimeoutTimer) clearTimeout(requestTimeoutTimer)
resolve(requestList) resolve(requestList)
@ -73,18 +76,26 @@ exports.mockManyRequests = mockManyRequests
* is `expectedRequests.length + refutedRequests.length`. * is `expectedRequests.length + refutedRequests.length`.
* @param {number} [args.expectedRequestCount] - When provided, expects the total amount of * @param {number} [args.expectedRequestCount] - When provided, expects the total amount of
* event requests made to match this number. * event requests made to match this number.
* @param {number} [args.responseDelay] - When provided, delays the response from the Plausible
* API by the given number of milliseconds.
*/ */
exports.expectPlausibleInAction = async function (page, { exports.expectPlausibleInAction = async function (page, {
action, action,
expectedRequests = [], expectedRequests = [],
refutedRequests = [], refutedRequests = [],
awaitedRequestCount, awaitedRequestCount,
expectedRequestCount expectedRequestCount,
responseDelay
}) { }) {
const requestsToExpect = expectedRequestCount ? expectedRequestCount : expectedRequests.length const requestsToExpect = expectedRequestCount ? expectedRequestCount : expectedRequests.length
const requestsToAwait = awaitedRequestCount ? awaitedRequestCount : requestsToExpect + refutedRequests.length const requestsToAwait = awaitedRequestCount ? awaitedRequestCount : requestsToExpect + refutedRequests.length
const plausibleRequestMockList = mockManyRequests(page, '/api/event', requestsToAwait) const plausibleRequestMockList = mockManyRequests({
page,
path: '/api/event',
numberOfRequests: requestsToAwait,
responseDelay: responseDelay
})
await action() await action()
const requestBodies = (await plausibleRequestMockList).map(r => r.postDataJSON()) const requestBodies = (await plausibleRequestMockList).map(r => r.postDataJSON())
@ -137,3 +148,7 @@ function areFlatObjectsEqual(obj1, obj2) {
return keys1.every(key => obj2[key] === obj1[key]) return keys1.every(key => obj2[key] === obj1[key])
} }
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}