diff --git a/CHANGELOG.md b/CHANGELOG.md index 65dd5159d2..71fdb1953a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ * Move the skip link after the cookie banner ([PR #3863](https://github.com/alphagov/govuk_publishing_components/pull/3863)) * Update border colours on email/print buttons for greater contrast ([PR #3855](https://github.com/alphagov/govuk_publishing_components/pull/3855)) * Fix some Sass deprecation warnings ([PR #3864](https://github.com/alphagov/govuk_publishing_components/pull/3864)) +* Expand GA4 share link tracking to allow for extra values ([PR #3872](https://github.com/alphagov/govuk_publishing_components/pull/3872)) ## 37.3.0 diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb index 46dd0186dd..ab5610f485 100644 --- a/app/views/govuk_publishing_components/components/_share_links.html.erb +++ b/app/views/govuk_publishing_components/components/_share_links.html.erb @@ -5,6 +5,7 @@ title ||= false track_as_sharing ||= false track_as_follow ||= false + ga4_data ||= {} stacked ||= false columns ||= false @@ -57,15 +58,15 @@ 'index_link': index + 1, 'index_total': links.length, 'text': link[:icon], - } + }.merge(ga4_data) end if track_as_follow ga4_link_data = { 'event_name': 'navigation', 'type': 'follow us', 'index_link': index + 1, - 'index_total': links.length - } + 'index_total': links.length, + }.merge(ga4_data) end %> <% diff --git a/app/views/govuk_publishing_components/components/docs/share_links.yml b/app/views/govuk_publishing_components/components/docs/share_links.yml index b78973861d..7d6483ea59 100644 --- a/app/views/govuk_publishing_components/components/docs/share_links.yml +++ b/app/views/govuk_publishing_components/components/docs/share_links.yml @@ -107,9 +107,16 @@ examples: } ] track_as_sharing_links: - description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer. + description: | + Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. + If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. + In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer. + Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_data object. data: track_as_sharing: true + ga4_data: { + optional_extra_values: "go here" + } links: [ { href: 'share', @@ -123,9 +130,15 @@ examples: }, ] track_as_follow_links: - description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer. + description: | + Where the component is used to allow users to follow us on social media, tracking can be added. + When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer. + Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_data object. data: track_as_follow: true + ga4_data: { + optional_extra_values: "go here" + } links: [ { href: 'follow', diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb index e827862ce6..2a5c589bd5 100644 --- a/spec/components/share_links_spec.rb +++ b/spec/components/share_links_spec.rb @@ -93,6 +93,18 @@ def links assert_select '.gem-c-share-links__link[data-ga4-link="{\"event_name\":\"navigation\",\"type\":\"follow us\",\"index_link\":1,\"index_total\":1}"]' end + it "allows adding extra GA4 attributes for share links" do + render_component(links: [links[0]], track_as_sharing: true, ga4_data: { section: "This is a section", type: "overwritten type" }) + assert_select '.gem-c-share-links[data-module="gem-track-click ga4-link-tracker"]' + assert_select '.gem-c-share-links__link[data-ga4-link="{\"event_name\":\"navigation\",\"type\":\"overwritten type\",\"index_link\":1,\"index_total\":1,\"text\":\"facebook\",\"section\":\"This is a section\"}"]' + end + + it "allows adding extra GA4 attributes for follow links" do + render_component(links: [links[0]], track_as_follow: true, ga4_data: { section: "This is another section", type: "overwritten type 2" }) + assert_select '.gem-c-share-links[data-module="gem-track-click ga4-link-tracker"]' + assert_select '.gem-c-share-links__link[data-ga4-link="{\"event_name\":\"navigation\",\"type\":\"overwritten type 2\",\"index_link\":1,\"index_total\":1,\"section\":\"This is another section\"}"]' + end + it "adds branding correctly" do render_component(links: [links[0]], brand: "attorney-generals-office") assert_select ".gem-c-share-links.brand--attorney-generals-office .gem-c-share-links__link.brand__color"