Merge pull request #9147 from alphagov/2685-add-ga4-tracking-to-save-…

…and-go-to-document-summary-in-the-toolbar

Add GA4 tracking to all buttons on edition form

app/assets/javascripts/admin/modules/ga4-button-setup.js

@@ -0,0 +1,27 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+;(function (Modules) {
+  function Ga4ButtonSetup(module) {
+    this.module = module
+  }
+
+  Ga4ButtonSetup.prototype.init = function () {
+    const buttons = this.module.querySelectorAll('button, [role="button"]')
+    buttons.forEach((button) => {
+      const event = {
+        event_name: button.type === 'submit' ? 'form_response' : 'navigation',
+        type: 'generic_link',
+        text: button.textContent,
+        section: document.title.split(' - ')[0],
+        action: button.textContent,
+        tool_name: document.title.split(' - ')[0]
+      }
+      if (button.dataset.ga4Event) {
+        Object.assign(event, JSON.parse(button.dataset.ga4Event))
+      }
+      button.dataset.ga4Event = JSON.stringify(event)
+    })
+  }
+
+  Modules.Ga4ButtonSetup = Ga4ButtonSetup
+})(window.GOVUK.Modules)

app/assets/javascripts/application.js

@@ -16,6 +16,7 @@
 //= require admin/modules/add-another
 //= require admin/modules/app-analytics
 //= require admin/modules/document-history-paginator
+//= require admin/modules/ga4-button-setup
 //= require admin/modules/locale-switcher
 //= require admin/modules/navbar-toggle
 //= require admin/modules/paste-html-to-govspeak

app/helpers/admin/editions_helper.rb

@@ -93,7 +93,7 @@ def lead_organisation_id_at_index(edition, index)
   end
 
   def standard_edition_form(edition)
-    form_for form_url_for_edition(edition), as: :edition, html: { class: edition_form_classes(edition), multipart: true }, data: { module: "EditionForm LocaleSwitcher", "rtl-locales": Locale.right_to_left.collect(&:to_param) } do |form|
+    form_for form_url_for_edition(edition), as: :edition, html: { class: edition_form_classes(edition), multipart: true }, data: { module: "EditionForm LocaleSwitcher Ga4ButtonSetup", "rtl-locales": Locale.right_to_left.collect(&:to_param) } do |form|
       concat render("standard_fields", form:, edition:)
       yield(form)
       concat render("settings_fields", form:, edition:)

app/views/admin/attachments/_form.html.erb

@@ -59,7 +59,6 @@
               attachment_ids: [], # HTML attachments cannot embed Attachments from their parent Edition
             },
             hidden_field_name: "attachment[visual_editor]",
-            ga4_tracking_section: "#{@edition.new_record? ? "New" : "Editing"} #{@edition.format_name.titleize}",
           } %>
         <% else %>
         <%= render "components/govspeak_editor", {

app/views/admin/editions/_standard_fields.html.erb

@@ -82,7 +82,6 @@
           alternative_format_provider_id: (edition.alternative_format_provider_id || current_user.organisation.try(:id)),
         },
         hidden_field_name: "edition[visual_editor]",
-        ga4_tracking_section: "#{edition.new_record? ? "New" : "Editing"} #{edition.format_name.titleize}",
       } %>
     <% else %>
       <%= render "components/govspeak_editor", {

app/views/components/_visual_editor.html.erb

@@ -2,7 +2,6 @@
   id ||= "#{name}-#{SecureRandom.hex(4)}"
   label_id = "#{id}-label"
   value ||= nil
-  ga4_tracking_section ||= nil
   error_items ||= nil
 
   error_class = "govuk-form-group--error" if error_items
@@ -30,20 +29,17 @@
     <div class="js-app-c-visual-editor__inset-text">
     <%= render "govuk_publishing_components/components/inset_text", {
     } do %>
-      <p class="govuk-body"><%= I18n.t("admin.visual_editor.exit.description").html_safe %></p>
+      <p class="govuk-body">Continue to edit in markdown if you have to add or format content that is not available.</p>
+      <p class="govuk-body">Visual Editor can only be used once per document and subsequent editing needs to be done in markdown.</p>
+      <p class="govuk-body">All changes made in Visual Editor will be saved when you press save and exit to markdown.</p>
       <%= render "govuk_publishing_components/components/button", {
-        text: I18n.t("admin.visual_editor.exit.button"),
+        text: "Continue editing in markdown",
         secondary_solid: true,
         type: "button",
         classes: "js-app-c-visual-editor__exit-button",
         destructive: true,
         data_attributes: {
           "ga4-event": {
-            event_name: "visual_editor_exit",
-            type: "tabs",
-            text: I18n.t("admin.visual_editor.exit.button"),
-            section: ga4_tracking_section,
-            action: I18n.t("admin.visual_editor.exit.button"),
             tool_name: "Visual Editor",
           }.to_json,
         },

features/step_definitions/visual_editor_steps.rb

@@ -82,7 +82,7 @@
 end
 
 And(/^I exit the visual editor experience$/) do
-  click_on I18n.t("admin.visual_editor.exit.button")
+  click_on "Continue editing in markdown"
 end
 
 When(/^I edit a pre-existing publication$/) do

spec/javascripts/admin/modules/ga4-button-setup.spec.js

@@ -0,0 +1,60 @@
+describe('GOVUK.Modules.Ga4ButtonSetup', function () {
+  let button, container
+
+  beforeEach(function () {
+    document.title = 'Title - Text'
+
+    container = document.createElement('div')
+    button = document.createElement('button')
+    button.textContent = 'Button'
+    button.type = 'button'
+    container.appendChild(button)
+  })
+
+  it('adds ga4 event data to buttons contained within', function () {
+    const ga4ButtonSetup = new GOVUK.Modules.Ga4ButtonSetup(container)
+    ga4ButtonSetup.init()
+
+    expect(button.dataset.ga4Event).toEqual(
+      '{"event_name":"navigation","type":"generic_link","text":"Button","section":"Title","action":"Button","tool_name":"Title"}'
+    )
+  })
+
+  it('uses navigation as the event name from "submit" buttons', function () {
+    button.type = 'submit'
+
+    const ga4ButtonSetup = new GOVUK.Modules.Ga4ButtonSetup(container)
+    ga4ButtonSetup.init()
+
+    expect(button.dataset.ga4Event).toEqual(
+      '{"event_name":"form_response","type":"generic_link","text":"Button","section":"Title","action":"Button","tool_name":"Title"}'
+    )
+  })
+
+  it('merges existing ga4Event data with the generic data', function () {
+    button.dataset.ga4Event = JSON.stringify({
+      event_name: 'custom_event_name'
+    })
+
+    const ga4ButtonSetup = new GOVUK.Modules.Ga4ButtonSetup(container)
+    ga4ButtonSetup.init()
+
+    expect(button.dataset.ga4Event).toEqual(
+      '{"event_name":"custom_event_name","type":"generic_link","text":"Button","section":"Title","action":"Button","tool_name":"Title"}'
+    )
+  })
+
+  it('adds ga4 event data to nodes with the button role', function () {
+    const link = document.createElement('a')
+    link.textContent = 'Link'
+    link.role = 'button'
+    button.replaceWith(link)
+
+    const ga4ButtonSetup = new GOVUK.Modules.Ga4ButtonSetup(container)
+    ga4ButtonSetup.init()
+
+    expect(link.dataset.ga4Event).toEqual(
+      '{"event_name":"navigation","type":"generic_link","text":"Link","section":"Title","action":"Link","tool_name":"Title"}'
+    )
+  })
+})