Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactored outbound links and file downloads #2109

Closed

Conversation

RobertJoonas
Copy link
Contributor

I opened a new PR instead of continuing #1938, as I think it makes sense to start from scratch with the refactoring before moving on to the tagged events extension.

Changes

  • added a Handlebars helper function any to represent an or statement for multiple script extensions
  • broke functionality down to several functions to avoid code duplication
  • created an inFlightRequests queue to avoid conflict when multiple Plausible events are sent at the same time (for example, a link can be both outbound and a file download)
  • to continue default behavior, switched to using callbacks instead of waiting a fixed amount of time for requests to go through
  • Stopped continuing the default link click behavior when the default has already been prevented by an external script. That is, if event.defaultPrevented is already true (this is the fix for outbound-links script causes media lightboxes to open in new tab #1941)

Tests

  • Automated tests have been added

Changelog

  • This PR does not make a user-facing change

Documentation

  • this PR does not need a documentation update

Dark mode

  • This PR does not change the UI

@bundlemon
Copy link

bundlemon bot commented Aug 16, 2022

BundleMon

Unchanged files (7)
Status Path Size Limits
static/css/app.css
515.1KB -
static/js/dashboard.js
287.69KB -
static/js/app.js
12.13KB -
static/js/embed.host.js
5.58KB -
static/js/embed.content.js
5.06KB -
tracker/js/plausible.js
748B -
static/js/applyTheme.js
314B -

No change in files bundle size

Final result: ✅

View report in BundleMon website ➡️


Current branch size history | Target branch size history

@RobertJoonas RobertJoonas marked this pull request as draft August 16, 2022 13:26
@RobertJoonas RobertJoonas marked this pull request as ready for review August 18, 2022 07:40
@RobertJoonas RobertJoonas requested a review from ukutaht August 18, 2022 07:40
Copy link
Contributor

@ukutaht ukutaht left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good!

From my experience, a queue like inFlightRequests is more complex to manage than you think, especially in an async environment. I'd like the different scenarios to be verified and tested before we roll this out to all the customers. We should think of every way to mess up inFlightRequests and event.defaultPrevented behaviour and write a test for it.

@RobertJoonas RobertJoonas marked this pull request as draft August 25, 2022 10:00
@RobertJoonas RobertJoonas requested a review from ukutaht August 30, 2022 15:56
@RobertJoonas RobertJoonas marked this pull request as ready for review August 30, 2022 15:57
@@ -14,6 +14,24 @@ exports.mockRequest = function (page, path) {
})
}

// Mocks a specified number of Plausible event requests. Returns a promise that resolves to a list
// of event names as soon as the specified number of requests is made, or 10 seconds has passed.
exports.mockManyPlausibleRequests = function(page, path, numberOfRequests) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that you decided to make this a separate function. I think it makes more sense :)

@@ -14,6 +14,24 @@ exports.mockRequest = function (page, path) {
})
}

// Mocks a specified number of Plausible event requests. Returns a promise that resolves to a list
// of event names as soon as the specified number of requests is made, or 10 seconds has passed.
exports.mockManyPlausibleRequests = function(page, path, numberOfRequests) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As this is mocking Plausible requests only, we can probably omit the path argument, and replace it with "/api/event".

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, removed the argument.

@ukutaht
Copy link
Contributor

ukutaht commented Aug 31, 2022

Happy with the code.

It's a big change to a very sensitive and depended on piece of code. What can we do to verify that these changes:

  1. Fix the bug that we expect it to fix
  2. Don't break existing functionality?

Before and after pushing this live?

@RobertJoonas
Copy link
Contributor Author

It's a big change to a very sensitive and depended on piece of code. What can we do to verify that these changes:

Agreed, @ukutaht

  1. Fix the bug that we expect it to fix

I tested the new code via the page console on the site shared in the issue. My testing workflow was the following:

  1. Specifically disable loading the outbound-links script with an adblocker
  2. Refresh the page and confirm that script.outbound-links.js fails to load
  3. Install the Plausible snippet and the plausible() function via the dev tools console
  4. Copy all the new code in the console to add the eventListeners
  5. Left-click the same link which opens in the same tab with script.outbound-links.js

Tested environments:

  • Ubuntu/Firefox
  • macOS Monterey/Firefox (on BrowserStack Live)

The result was as expected - the outbound link event was sent, and unlike before, the lightbox opened nicely in a popup.

I just read through the issue once again. The customer reported that the link opens in a new tab rather than the same tab which was actually the case in my testing. I've now asked for their confirmation about that here: #1941 (comment)

  1. Don't break existing functionality?

These changes currently only change outbound link and file download tracking and cannot break any other tracker functionality. The BrowserStack tests cover the core part of sending these custom events, but I guess it would also make sense to do some more manual testing on different environments with BrowserStack Live.

... after pushing this live?

Not sure if there's any other way than waiting for user feedback?

@RobertJoonas
Copy link
Contributor Author

Closing this PR, as started from a clean slate in #2208 with smaller commits.

@vinibrsl vinibrsl deleted the refactor-oubound-links-and-file-downloads branch December 26, 2022 13:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants