From caaa1adc6210d2c3c7118821f2c94adc6a19bd70 Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:26:23 +0000
Subject: [PATCH] Add GA4 tracking to the banner component

---
 app/views/components/_banner.html.erb |  8 +++++++-
 test/components/banner_test.rb        | 12 ++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/views/components/_banner.html.erb b/app/views/components/_banner.html.erb
index e978768576..9abf638d05 100644
--- a/app/views/components/_banner.html.erb
+++ b/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: "banner" }.to_json %>">
   <%= content_block %>
   <% if aside %>
     <p class="app-c-banner__desc"><%= aside %></p>
diff --git a/test/components/banner_test.rb b/test/components/banner_test.rb
index 8e09dab22c..3663b60b68 100644
--- a/test/components/banner_test.rb
+++ b/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\":\"banner\"}']"
+  end
 end