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
referers
statics
firs

17
tracker/src/plausible.js
View File

@ -212,14 +212,6 @@
payload.h = 1
{{/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 (isPageview) {
currentPageLeaveIgnored = false
@ -228,6 +220,15 @@
registerPageLeaveListener()
}
{{/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})
}
}

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

@ -45,7 +45,7 @@ test.describe('file-downloads extension', () => {
await page.goto('/file-download.html')
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')
expect((await downloadRequestMockList).length).toBe(1)

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

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

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

@ -11,6 +11,7 @@
<body>
<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>

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
// 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) => {
let requestList = []
const requestTimeoutTimer = setTimeout(() => resolve(requestList), 3000)
page.route(path, (route, request) => {
page.route(path, async (route, request) => {
requestList.push(request)
if (responseDelay) {
await delay(responseDelay)
}
if (requestList.length === numberOfRequests) {
clearTimeout(requestTimeoutTimer)
resolve(requestList)
@ -73,18 +76,26 @@ exports.mockManyRequests = mockManyRequests
* is `expectedRequests.length + refutedRequests.length`.
* @param {number} [args.expectedRequestCount] - When provided, expects the total amount of
* 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, {
action,
expectedRequests = [],
refutedRequests = [],
awaitedRequestCount,
expectedRequestCount
expectedRequestCount,
responseDelay
}) {
const requestsToExpect = expectedRequestCount ? expectedRequestCount : expectedRequests.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()
const requestBodies = (await plausibleRequestMockList).map(r => r.postDataJSON())
@ -137,3 +148,7 @@ function areFlatObjectsEqual(obj1, obj2) {
return keys1.every(key => obj2[key] === obj1[key])
}
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}