Add track click code from static

[andysellick]

What

Add the track click code from static into the gem. This has involved some changes:

• the code is now a module which means that it has to be explicitly called using data-module on the element to be tracked, whereas previously this was done by the presence of other data attributes alone (data-track-category and data-track-action) EDIT: this was based on a misunderstanding of the code, it always needed to be initialised as a module
• the module has been renamed because if we did a proper migration (and removed it from static) the above change would be a massive breaking change across all of GOV.UK, which we don't have time to deal with right now. Instead, this code will exist as a small semi-duplication, which is less than ideal, but allows us to use it

A side effect of this change was that until the module had been renamed it broke the tests because the details component explicitly uses the track click code from static for tracking, but because it can't access it the test created a dummy object which deleted the real one from the gem. For reference there are some notes below about how to fix this, which I did before realising renaming the track click code was a better solution.

Background

The track click code is a simple wrapper to allow easy custom analytics tracking on elements. It should be part of the analytics code but for historical reasons isn't (yet). To make use of it, add data-module="gem-track-click" to any element, along with some additional data attributes, and clicking on that element will fire a GA event. You can also put the module on a parent element, then put the tracking attributes on any number of child elements to track them. Note that the elements don't have to be links.

See examples in the tests for further clarity.

Why

We need to be able to do track click stuff in Accounts, which only has access to code from the gem, not static.

Visual Changes

None.

Details component

For reference, here's how to update the details component to use the track click code in the gem, not static.

in details.js...

lines 15 and 16:

var trackDetails = new window.GOVUK.Modules.TrackClick()
trackDetails.start(element)

change to:

var trackDetails = new window.GOVUK.Modules.GemTrackClick()
trackDetails.start(element)

details-spec.js

remove lines 11 to 16:

  var callback = jasmine.createSpy()
  GOVUK.Modules.TrackClick = function () {
    this.start = function () {
      callback()
    }
  }

update this test as follows:

  it('uses built in tracking module when provided with a track-label', function () {
    spyOn(GOVUK.Modules, 'GemTrackClick').and.callThrough()
    loadDetailsComponent()

    $('.govuk-details__summary').click()

    expect(GOVUK.Modules.GemTrackClick).toHaveBeenCalled()
    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('track-category', 'track-action', { transport: 'beacon', label: 'track-label' })
  })

Trello card: https://trello.com/c/2gMj38xR/330-build-analytics