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

Create simplest download and external link tracking plugins #208

Merged
merged 10 commits into from Aug 5, 2015

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Aug 3, 2015

https://trello.com/c/ihxFfLWH/70-create-simplest-external-link-and-download-tracker-medium

This is a minimum viable tracker. It will work as expected in Chrome and Firefox – browsers that support navigator.sendBeacon, about 30% of all users. On older browsers we will still send analytics events, and we'll receive some data, but not all events will make it to GA and the dataset will be incomplete. We will however be able to estimate what proportion of events we're missing based on the complete Chrome and Firefox datasets – those estimates can be used to prioritise and influence a more complex solutions.

A fully-formed tracker would include, in older browsers, a means of preventing the page from loading until an event has been successfully tracked. This degrades the user experience and the complexities introduce a greater risk of links not working. The data collected from this tracker will provide much needed context and visibility.

  • Add tracking to all external links (any link beginning with http and not linking to the current host)
  • Add tracking to download links that match a given selector

Before merging, I'd love to get some feedback on this approach. Particularly:

  • Is the javascript fault tolerant, if something fails will the link continue to load?
  • Are the link CSS selectors accurate, could things be missed or tracked incorrectly?
  • Should download links and external links be made more explicit? eg classes, rel attributes
  • Is setting a single listener on the body tag the most performant way to create the event listeners?
fofr added 7 commits Jul 30, 2015
The simplest approach to external link tracking, using Google Analytics
`sendBeacon` support to guarantee the event is captured when supported.

When not supported, the event will fire and a proportion of those events
will make it to analytics. The dataset will be incomplete.

Add support for setting the transport option to Universal Tracker
A fake `GOVUK.analytics` object was hanging around which was affecting
later test specs.
The simplest approach to download tracking, using Google Analytics
`sendBeacon` support to guarantee the pageview is captured when
supported.

When not supported, the pageview will fire and a proportion of those
events will make it to analytics. The dataset will be incomplete.

Includes adding support for setting the transport option when tracking
page views.
Use `-tracker` rather than `-tracking`.
If an element, eg an image, is clicked within a link, evt.target
returns the image rather than the link. This leads to an incorrect
event/pageview being tracked, or no tracking at all.

* Stop link clicks from loading a page using an HTML click handler
* Traverse DOM when event target is not a link
Create new section, explain what each plugin does and give examples.
@bradwright
Copy link
Contributor

@bradwright bradwright commented Aug 4, 2015

I don't know if using the file extension is a sensible way to decide if something is an attachment.

For GOV.UK we have two distinct attachment URLs:

  • things at assets.digital.etc
  • things at /government/uploads

Given that those are both specific to us rather than applicable to the toolkit, would it be worth making the marchers configurable and passing them in via static? That would make this solution more generally applicable but also more accurate to our use cases.

@fofr
Copy link
Contributor Author

@fofr fofr commented Aug 4, 2015

@bradleywright That sounds like a sensible suggestion. I think the external link trackers will also need some similar configuration, eg a link to assets.digital.cabinet... would be a false positive.

Closing while I make changes.

@fofr fofr closed this Aug 4, 2015
@tombye
Copy link
Contributor

@tombye tombye commented Aug 4, 2015

This is great (to read anyway).

One question I have is whether jQuery should be used in the tracking code as there's no dependancy, as far as I can see, for it in the code at the moment.

@fofr
Copy link
Contributor Author

@fofr fofr commented Aug 4, 2015

jQuery is useful for:

  • efficient event delegation
  • complex CSS selectors that use Sizzle rather than querySelectorAll (and also older browser fallbacks)
fofr added 2 commits Aug 4, 2015
Allow apps to specify a download link selector, which will be different
depending on where downloads are kept, or how they’re marked up.

* URLs that don’t end in a filename can still be downloads
* Make tracker both flexible and simpler
Simplify external link tracker by moving DOM traversal into a named
function.
@fofr fofr reopened this Aug 4, 2015
@fofr
Copy link
Contributor Author

@fofr fofr commented Aug 4, 2015

@bradleywright I've updated the download tracker so that it takes a selector argument and I've removed the file extension regex check.

@fofr
Copy link
Contributor Author

@fofr fofr commented Aug 4, 2015

In static we'd do the following:

GOVUK.analyticsPlugins.downloadLinkTracker({
  selector: 'a[href*="/government/uploads"], a[href*="assets.digital.cabinet-office.gov.uk"]'
});
@bradwright
Copy link
Contributor

@bradwright bradwright commented Aug 4, 2015

Function signature looks much more generally useful 👍 thanks for doing that.

I'll let someone else (@edds maybe?) review the code and answer your specific questions about performance and resilience.

@fofr
Copy link
Contributor Author

@fofr fofr commented Aug 5, 2015

I've done some basic tests of resilience and don't believe JavaScript errors will cause a link not to load.

@edds Are you happy for this to be merged?

Keep external-link-tracker and download-link-tracker consistent.
edds added a commit that referenced this pull request Aug 5, 2015
Create simplest download and external link tracking plugins
@edds edds merged commit b911a47 into master Aug 5, 2015
2 checks passed
2 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@edds edds deleted the link-tracking-plugins branch Aug 5, 2015
fofr added a commit to alphagov/whitehall that referenced this pull request Jan 26, 2018
Add tracking to all external links (any link beginning with http and
not linking to the current host)

Based on
https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascrip
ts/govuk/analytics/external-link-tracker.js

* Simplified to remove custom dimensions and to work with GOVUKAdmin
analytics lib
* alphagov/govuk_frontend_toolkit#208
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.