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

19
tracker/src/plausible.js
View File

@ -212,6 +212,15 @@
payload.h = 1
{{/if}}
{{#if pageleave}}
if (isPageview) {
currentPageLeaveIgnored = false
currentPageLeaveURL = payload.u
currentPageLeaveProps = payload.p
registerPageLeaveListener()
}
{{/if}}
var request = new XMLHttpRequest();
request.open('POST', endpoint, true);
request.setRequestHeader('Content-Type', 'text/plain');
@ -220,14 +229,6 @@
request.onreadystatechange = function() {
if (request.readyState === 4) {
{{#if pageleave}}
if (isPageview) {
currentPageLeaveIgnored = false
currentPageLeaveURL = payload.u
currentPageLeaveProps = payload.p
registerPageLeaveListener()
}
{{/if}}
options && options.callback && options.callback({status: request.status})
}
}
@ -246,7 +247,7 @@
{{#unless hash}}
if (lastPage === location.pathname) return;
{{/unless}}
{{#if pageleave}}
if (isSPANavigation && listeningPageLeave) {
triggerPageLeave();

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)

6
tracker/test/fixtures/manual.html vendored
View File

@ -26,16 +26,16 @@
<script>
document.addEventListener('click', (e) => {
if (e.target.id === 'pageview-trigger') {
window.plausible('pageview')
window.plausible('pageview')
}
if (e.target.id === 'pageview-trigger-custom-url') {
window.plausible('pageview', {u: 'https://example.com/custom/location'})
}
if (e.target.id === 'custom-event-trigger') {
window.plausible('CustomEvent')
window.plausible('CustomEvent')
}
if (e.target.id === 'custom-event-trigger-custom-url') {
window.plausible('CustomEvent', {u: 'https://example.com/custom/location'})
window.plausible('CustomEvent', {u: 'https://example.com/custom/location'})
}
})
</script>

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>

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

@ -128,7 +128,7 @@ test.describe('pageleave extension', () => {
action: () => page.goto('/pageleave-pageview-props.html'),
expectedRequests: [{n: 'pageview', p: {author: 'John'}}]
})
await expectPlausibleInAction(page, {
action: () => page.click('#navigate-away'),
expectedRequests: [{n: 'pageleave', p: {author: 'John'}}]
@ -148,9 +148,9 @@ test.describe('pageleave extension', () => {
{n: 'pageview', p: {author: 'john'}}
]
})
await pageleaveCooldown(page)
await expectPlausibleInAction(page, {
action: () => page.click('#jane-post'),
expectedRequests: [
@ -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
})
})
})

31
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)
@ -53,14 +56,14 @@ exports.mockManyRequests = mockManyRequests
/**
* A powerful utility function that makes it easy to assert on the event
* requests that should or should not have been made after doing a page
* action (e.g. navigating to the page, clicking a page element, etc).
* action (e.g. navigating to the page, clicking a page element, etc).
*
* @param {Page} page - The Playwright Page object.
* @param {Object} args - The object configuring the action and related expectations.
* @param {Function} args.action - A function that returns a promise. The function is called
* without arguments, and is `await`ed. This is the action that should or should not trigger
* Plausible requests on the page.
* @param {Array} [args.expectedRequests] - A list of partial JSON payloads that get matched
* @param {Array} [args.expectedRequests] - A list of partial JSON payloads that get matched
* against the bodies of event requests made. An `expectedRequest` is considered as having
* occurred if all of its key-value pairs are found from the JSON body of an event request
* that was made. The default value is `[]`
@ -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())
@ -113,7 +124,7 @@ exports.expectPlausibleInAction = async function (page, {
const refutedBodySubsetsErrorMessage = `The following requests were made, but were not expected:\n\n${JSON.stringify(refutedButFoundRequestBodies, null, 4)}`
expect(refutedButFoundRequestBodies, refutedBodySubsetsErrorMessage).toHaveLength(0)
expect(requestBodies.length).toBe(requestsToExpect)
}
@ -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))
}