Emit ga event on send help form

[kastoestoramadus]

Hi, There is a problem with common form that is used across most the HMRC websites. The send help-form on the end of pages. https://github.com/hmrc/play-ui/blob/master/src/main/twirl/uk/gov/hmrc/play/views/helpers/reportAProblemLink.scala.html it communicates with contact-frontend microservice. It returns html form that is added to the page. It has the required stageprompt attribute for the button Send but the click is not reported to GA. data-journey-click="page:Click:Get help with this page Submit"

Can we use somehow the stageprompt at such and similar cases?

Desired change: emit event to the analytics tool (like Google Analitics) after proper help form submission.

[kastoestoramadus]

This form is added dynamically. Static content is served well by stageprompt.

[feedmypixel]

So you will be able to add a delegate event to the setup function in the reportAProblem.js file. Then this delegate event can sit on the forms parent element (.report-error). Which will then fire the stageprompt work when dynamically loaded data-journey-click elements are clicked.

May I suggest adding a better hook for this work on the parent element in play-ui - maybe a data attribute[data-journey-delegate]? to fit in with the stageprompt naming and using attributes as selectors.

Example/ Pseudo code

var GOVUK = require('stageprompt')

var addDelegateListener = function () {
  $('[data-journey-delegate]').on('click', '[data-journey-click]', function (event) {
    event.preventDefault()
    var analyticsDetail = $(this).data('journey-click')

    GOVUK.performance.sendGoogleAnalyticsEvent(splitAction(analyticsDetail))
  })
}

  var setup = function () {
    configureToggle()
    setupFormValidation()
    addDelegateListener()
  }

You will also need to split the value of the journey-click data attribute out to send it to GA in a similar fashion to how stageprompt does it internally (unfortunately its not exposed) Maybe this could be placed in its own module.

 var splitAction = function (action) {
    var parts = action.split(':')
    if (parts.length <= 3) return parts
    return [parts.shift(), parts.shift(), parts.join(':')]
  }

Of Note

If this work is done in a generic fashion it could be potentially committed up to the stageprompt repo. I'm sure they would find a delegate event useful.