Skip to content

Commit

Permalink
Merge pull request #3158 from alphagov/ga4-survey-banner-additions
Browse files Browse the repository at this point in the history 
Add GA4 form tracker and section value to survey banner
  • Loading branch information
@AshGDS
AshGDS authored Sep 27, 2023
2 parents cb4b8a2 + 5c4566a commit 4434860
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 5 deletions.
30 changes: 27 additions & 3 deletions app/assets/javascripts/surveys.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
'id="user-survey-cancel" ' +
'role="button" ' +
'data-module="ga4-event-tracker" ' +
'data-ga4-event=\'' + JSON.stringify({ event_name: 'select_content', type: 'survey banner', action: 'closed' }) +
'data-ga4-event=\'' + JSON.stringify({ event_name: 'select_content', type: 'survey banner', action: 'closed', section: '{{title}}' }) +
'\'>Close</a>' +
' <h2 class="survey-title" id="survey-title">{{title}}</h2>' +
'<div data-module="ga4-link-tracker" data-ga4-track-links-only ' +
'data-ga4-link=\'' + JSON.stringify({ event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1 }) + '\'>' +
'data-ga4-link=\'' + JSON.stringify({ event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1, section: '{{title}}' }) + '\'>' +
children +
'</div>' +
' </div>' +
Expand All @@ -49,7 +49,7 @@
' {{surveyCta}}' +
' </a>' +
'</div>' +
'<form id="email-survey-form" action="/contact/govuk/email-survey-signup" method="post" class="js-hidden" aria-hidden="true">' +
'<form id="email-survey-form" action="/contact/govuk/email-survey-signup" method="post" class="js-hidden" aria-hidden="true" data-module="ga4-form-tracker" data-ga4-form=\'' + JSON.stringify({ event_name: 'form_submit', type: 'survey banner', action: 'submit', section: '{{title}}', text: '{{surveyFormCta}}', tool_name: '{{title}}' }) + '\'>' +
' <div class="survey-inner-wrapper">' +
' <div id="survey-form-description" class="survey-form-description">{{surveyFormDescription}}' +
' <br> {{surveyFormCtaPostscript}}' +
Expand Down Expand Up @@ -308,8 +308,10 @@
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
successCallback()
userSurveys.attachGa4FormCompleteElement($emailSurveyForm, false)
} else {
errorCallback()
userSurveys.attachGa4FormCompleteElement($emailSurveyForm, true)
}
}

Expand All @@ -320,6 +322,28 @@
}
},

attachGa4FormCompleteElement: function (emailSurveyElement, error) {
// When the email survey form is submitted, this attaches a HTML element with our GA4 auto tracker to the DOM.
// The module is then started - the module will send data-ga4-auto object to the dataLayer.
// Doing it this way prevents us from calling and having to maintaining GA4 JS/cookie consent in this repo.
var emailSurveyHeading = document.getElementById('survey-title').textContent.trim()

var emailSurveyText = error ? document.getElementById('email-survey-post-failure') : document.getElementById('email-survey-post-success')
emailSurveyText = emailSurveyText.textContent.trim()
var span = document.createElement('span')
span.setAttribute('data-module', 'ga4-auto-tracker')
span.setAttribute('data-ga4-auto', JSON.stringify({
event_name: 'form_complete',
action: 'complete',
type: 'survey banner',
text: emailSurveyText,
section: emailSurveyHeading,
tool_name: emailSurveyHeading
}))
emailSurveyElement.appendChild(span)
window.GOVUK.modules.start(emailSurveyElement)
},

setURLSurveyEventHandlers: function (survey) {
var $emailSurveyCancel = document.getElementById('user-survey-cancel')
var $takeSurvey = document.getElementById('take-survey')
Expand Down
51 changes: 49 additions & 2 deletions spec/javascripts/surveys.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,26 @@ describe('Surveys', function () {
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 }
var expectedGa4Event = { event_name: 'select_content', type: 'survey banner', action: 'closed', section: 'Tell us what you think of GOV.UK' }
var expectedGa4Link = { event_name: 'navigation', type: 'survey banner', index: 1, index_total: 1, section: 'Tell us what you think of GOV.UK' }
var expectedGa4Form = {
event_name: 'form_submit',
type: 'survey banner',
action: 'submit',
section: 'Tell us what you think of GOV.UK',
text: 'Send me the survey',
tool_name: 'Tell us what you think of GOV.UK'
}

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)

if (survey === emailSurvey) {
var ga4FormElement = surveyParent.querySelector('#email-survey-form')
expect(JSON.parse(ga4FormElement.getAttribute('data-ga4-form'))).toEqual(expectedGa4Form)
}

expect(ga4LinkElement.hasAttribute('data-ga4-track-links-only')).toEqual(true)
}
})
Expand Down Expand Up @@ -829,6 +842,23 @@ describe('Surveys', function () {
expect(surveys.trackEvent).toHaveBeenCalledWith(emailSurvey.identifier, 'email_survey_taken', 'Email survey taken')
expect(surveys.trackEvent).toHaveBeenCalledWith(emailSurvey.identifier, 'banner_taken', 'User taken survey')
})

it('adds the GA4 form complete <span>', function () {
window.GOVUK.triggerEvent($('#email-survey-form')[0], 'submit')
// For some reason the submit event triggers twice in tests, so we have to get the second <span>.
var span = document.querySelectorAll('#email-survey-form span[data-ga4-auto]')[1]

var expectedGa4Auto = {
event_name: 'form_complete',
action: 'complete',
type: 'survey banner',
text: 'Thanks, we’ve sent you an email with a link to the survey.',
section: 'Tell us what you think of GOV.UK',
tool_name: 'Tell us what you think of GOV.UK'
}
expect(span.getAttribute('data-module')).toEqual('ga4-auto-tracker')
expect(span.getAttribute('data-ga4-auto')).toEqual(JSON.stringify(expectedGa4Auto))
})
})

describe('but submitting it results in an error', function () {
Expand Down Expand Up @@ -858,6 +888,23 @@ describe('Surveys', function () {
window.GOVUK.triggerEvent($('#email-survey-form')[0], 'submit')
expect(surveys.trackEvent).not.toHaveBeenCalled()
})

it('adds the GA4 form complete <span>', function () {
window.GOVUK.triggerEvent($('#email-survey-form')[0], 'submit')
// For some reason the submit event triggers twice in tests, so we have to get the second <span>.
var span = document.querySelectorAll('#email-survey-form span[data-ga4-auto]')[1]

var expectedGa4Auto = {
event_name: 'form_complete',
action: 'complete',
type: 'survey banner',
text: 'Sorry, we’re unable to send you an email right now. Please try again later.',
section: 'Tell us what you think of GOV.UK',
tool_name: 'Tell us what you think of GOV.UK'
}
expect(span.getAttribute('data-module')).toEqual('ga4-auto-tracker')
expect(span.getAttribute('data-ga4-auto')).toEqual(JSON.stringify(expectedGa4Auto))
})
})

it("hides the email form when clicking 'No thanks'", function () {
Expand Down

0 comments on commit 4434860

Please sign in to comment.