Add GA4 tracking to the banner component

Author: AshGDS

app/views/components/_banner.html.erb

@@ -12,7 +12,13 @@
     <%= text %>
   </p>
 <% end %>
-<section class="app-c-banner<% if aside %> app-c-banner--aside<% end %>" aria-label="Notice" lang="en">
+<section
+  class="app-c-banner<% if aside %> app-c-banner--aside<% end %>" 
+  aria-label="Notice"
+  lang="en"
+  data-module="ga4-link-tracker"
+  data-ga4-track-links-only
+  data-ga4-link="<%= { event_name: "navigation", type: "callout" }.to_json %>">
   <%= content_block %>
   <% if aside %>
     <p class="app-c-banner__desc"><%= aside %></p>

test/components/banner_test.rb

@@ -43,4 +43,16 @@ def component_name
     assert_select ".app-c-banner__desc", text: "This was published under the 2010 to 2015 Conservative government"
     assert_select ".app-c-banner__desc", text: "This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017"
   end
+
+  test "renders a banner with GA4 tracking" do
+    render_component(
+      title: "Summary",
+      text: "This was published under the 2010 to 2015 Conservative government",
+      aside: "This consultation ran from 9:30am on 30 January 2017 to 5pm on 28 February 2017",
+    )
+
+    assert_select ".app-c-banner--aside[data-module=ga4-link-tracker]"
+    assert_select ".app-c-banner--aside[data-ga4-track-links-only]"
+    assert_select ".app-c-banner--aside[data-ga4-link='{\"event_name\":\"navigation\",\"type\":\"callout\"}']"
+  end
 end