Merge pull request #3102 from alphagov/ga4-banner-tracking

Add GA4 tracking to the banner component
alphagov · Feb 23, 2024 · b13db9e · b13db9e
2 parents f58df81 + 9ba9b11
commit b13db9e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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: "callout" }.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
@@ -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