Adding GA4 tracking attributes to the Visual Editor exit button

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

@@ -59,6 +59,7 @@
               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,6 +82,7 @@
           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,6 +2,7 @@
   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
@@ -29,15 +30,23 @@
     <div class="js-app-c-visual-editor__inset-text">
     <%= render "govuk_publishing_components/components/inset_text", {
     } do %>
-      <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>
+      <p class="govuk-body"><%= I18n.t("admin.visual_editor.exit.description").html_safe %></p>
       <%= render "govuk_publishing_components/components/button", {
-        text: "Continue editing in markdown",
+        text: I18n.t("admin.visual_editor.exit.button"),
         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,
+        },
       } %>
     <% end %>
     </div>

app/views/layouts/design_system.html.erb

@@ -21,7 +21,7 @@
 
   <%= render partial: "shared/header" %>
 
-  <div class="govuk-width-container">
+  <div class="govuk-width-container" data-module="ga4-event-tracker">
     <%= render "shared/phase_banner", {
       show_feedback_banner: t("admin.feedback.show_banner"),
     } %>

config/locales/en/admin/visual_editor.yml

@@ -0,0 +1,11 @@
+en:
+  admin:
+    visual_editor:
+      exit:
+        description: |
+          Continue to edit in markdown if you have to add or format content that is not available.
+          </br></br>
+          Visual Editor can only be used once per document and subsequent editing needs to be done in markdown.
+          </br></br>
+          All changes made in Visual Editor will be saved when you press save and exit to markdown.
+        button: Continue editing in markdown

features/step_definitions/visual_editor_steps.rb

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