Merge pull request #3134 from alphagov/ga4-survey-banner

Add GA4 tracking to survey banner
alphagov · Sep 13, 2023 · 8e033f6 · 8e033f6
2 parents 7c9c37d + f9d3294
commit 8e033f6
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/app/assets/javascripts/surveys.js b/app/assets/javascripts/surveys.js
@@ -15,10 +15,22 @@
   var templateBase = function (children) {
     return (
       '<section id="user-satisfaction-survey" class="visible" aria-hidden="false">' +
-      '  <div class="survey-wrapper govuk-width-container">' +
-      '    <a class="govuk-link survey-close-button" href="#user-survey-cancel" aria-labelledby="survey-title user-survey-cancel" id="user-survey-cancel" role="button">Close</a>' +
+      '  <div class="survey-wrapper govuk-width-container" data-module="ga4-auto-tracker" ' +
+              'data-ga4-auto=\'' + JSON.stringify({ event_data: { event_name: 'element_visible', type: 'survey banner' } }) +
+              '\'>' +
+      '    <a class="govuk-link survey-close-button" ' +
+              'href="#user-survey-cancel" ' +
+              'aria-labelledby="survey-title user-survey-cancel" ' +
+              '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' }) +
+            '\'>Close</a>' +
       '    <h2 class="survey-title" id="survey-title">{{title}}</h2>' +
-           children +
+          '<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 }) + '\'>' +
+            children +
+          '</div>' +
       '  </div>' +
       '</section>'
     )
@@ -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
@@ -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)