diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js index 22efe4427..50bc36ca9 100644 --- a/app/assets/javascripts/surveys.js +++ b/app/assets/javascripts/surveys.js @@ -15,10 +15,22 @@ var templateBase = function (children) { return ( '
' + - '
' + - ' Close' + + '
' + + ' Close' + '

{{title}}

' + - children + + '
' + + children + + '
' + '
' + '
' ) @@ -197,12 +209,14 @@ displayURLSurvey: function (survey, surveyContainer) { var urlSurveyTemplate = userSurveys.getUrlSurveyTemplate() surveyContainer.innerHTML = urlSurveyTemplate.render(survey) + window.GOVUK.modules.start(surveyContainer) // Initialises our GA4 modules userSurveys.setURLSurveyEventHandlers(survey) }, displayEmailSurvey: function (survey, surveyContainer) { var emailSurveyTemplate = userSurveys.getEmailSurveyTemplate() surveyContainer.innerHTML = emailSurveyTemplate.render(survey) + window.GOVUK.modules.start(surveyContainer) // Initialises our GA4 modules userSurveys.setEmailSurveyEventHandlers(survey) }, diff --git a/spec/javascripts/surveys.spec.js b/spec/javascripts/surveys.spec.js index 34b88be7c..0812bbf72 100644 --- a/spec/javascripts/surveys.spec.js +++ b/spec/javascripts/surveys.spec.js @@ -90,6 +90,30 @@ describe('Surveys', function () { expect($('#user-satisfaction-survey').attr('aria-hidden')).toBe('false') }) + it('displays the survey with GA4 attributes', function () { + var surveyTypes = [defaultSurvey, smallSurvey, urlSurvey, emailSurvey] + + for (var i = 0; i < surveyTypes.length; i++) { + var survey = surveyTypes[i] + surveys.displaySurvey(survey) + var surveyParent = document.querySelector('#user-satisfaction-survey') + + var ga4AutoElement = surveyParent.querySelector('.survey-wrapper') + var ga4EventElement = surveyParent.querySelector('.survey-close-button') + var ga4LinkElement = surveyParent.querySelector('.survey-title + div') + + var expectedGa4Auto = { event_data: { event_name: 'element_visible', type: 'survey banner' } } + var expectedGa4Event = { event_name: 'select_content', type: 'survey banner', action: 'closed' } + var expectedGa4Link = { event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1 } + + expect(JSON.parse(ga4AutoElement.getAttribute('data-ga4-auto'))).toEqual(expectedGa4Auto) + expect(JSON.parse(ga4EventElement.getAttribute('data-ga4-event'))).toEqual(expectedGa4Event) + expect(JSON.parse(ga4LinkElement.getAttribute('data-ga4-link'))).toEqual(expectedGa4Link) + + expect(ga4LinkElement.hasAttribute('data-ga4-track-links-only')).toEqual(true) + } + }) + it('increments the survey seen cookie counter', function () { GOVUK.cookie(surveys.surveySeenCookieName(defaultSurvey), null) surveys.displaySurvey(defaultSurvey)