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.

Sign up for GitHub

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

Jump to bottom

The outbound links version of the tracking code breaks links which 'break out' of an iframe. #987

Open
mocoso opened this issue May 4, 2021 · 3 comments
Open

The outbound links version of the tracking code breaks links which 'break out' of an iframe. #987

mocoso opened this issue May 4, 2021 · 3 comments

Comments

@mocoso
Copy link

mocoso commented May 4, 2021 •
edited

Bug report

The outbound link version of the tracking breaks the ability of links inside iframes to 'break out' of the iframe when you include target="_top" as one of the <a> tags attributes.

So for example if a HTML page with the following code was included as an iframe in another page, the "link to Books Etc." link would fail to 'break out' of the iframe and the Books Etc. site would be displayed framed within the surrounding page.

<html>
  <head>
    <title>An example of a link in an iframe</title>
    <script async defer data-domain="example.test" src="https://plausible.io/js/plausible.outbound-links.js"></script>
  </head>
  <body>
    <h2>Inside an iframe</h2>
    <p>
      This <a href="https://www.booksetc.co.uk/" target="_top">link to Books Etc.</a> as <code>target="_top"</code> and so clicking on it should break out of the surrounding page.
    </p>
  </body>
</html>

Expected behavior

The expected behaviour is that clicking on the Books Etc. link above would break out of the iframe and open the Books Etc. website without it being framed.

Environment
This problem affects multiple browsers e.g. latest versions of Firefox and Chrome.
@mocoso
Copy link
Author

mocoso commented May 6, 2021 •
edited

The issue appears to be that in these cases that the code

  1. Tries to detect if it is a 'normal' following of a link (https://github.com/plausible/analytics/blob/master/tracker/src/plausible.js#L88) and, if so...
  2. ...the event is prevented from completing (https://github.com/plausible/analytics/blob/master/tracker/src/plausible.js#L92) and instead the location of the page is set (https://github.com/plausible/analytics/blob/master/tracker/src/plausible.js#L90). However the code does not consider the target for the link when setting the location.

I wonder whether, rather than adding in more special cases, a simpler approach for delaying the link being followed might be to intercept the event and then 're-dispatch' it after a short delay to make it less likely that the Plausible tracking code will interfere with the expected workings of the browser/page. Here is a codepen demonstrating roughly how this might work.

Do let me know if you think this approach would be worth pursuing and/or if you think I am missing something.

@ukutaht
Copy link
Contributor

ukutaht commented May 6, 2021

Thanks for looking into this @mocoso

I wonder whether, rather than adding in more special cases, a simpler approach for delaying the link being followed might be to intercept the event and then 're-dispatch' it after a short delay

See discussion in plausible/plausible-tracker#12. I wasn't able to get the re-dispatch idea to work across all browsers. If someone can figure out the code I would be happy to merge. The potential solution we discussed in the other thread is to move to sendBeacon instead so we don't have to delay at all.

@mocoso
Copy link
Author

mocoso commented May 6, 2021

I had missed the plausible-tracker repo so thanks for highlighting the existing issue.

sendBeacon does sound like it is the right tool for the job - do shout if you want a hand with the implementation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mocoso @ukutaht