1. Component Guide
  2. Intervention
Component

Intervention

An area that contains personalised content to the user

The intervention is used to show personalised content. For instance, if the user has visited multiple pages in the same area of the site, we might want let them know that there are other pages on GOV.UK that would be useful to them. This component would be used to add this personalised content and would indicate to the user that this is not normally part of the page, but has been added for them specifically.

The dismiss link works without Javascript by pointing to the current URL with the “hide-intervention” query string parameter set to “true”. It’s progressively enhanced and sets a cookie to remember that the user has dismissed the banner before. The cookie requires a “name” parameter, the value of which is stored in the cookie to distinguish which campaign banner the user has dismissed.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

You should renew your permit every 6 months.

How to call this component

<%= render "govuk_publishing_components/components/intervention", {
  suggestion_text: "You should renew your permit every 6 months."
} %>

Accessibility acceptance criteria

The intervention component must:

  • have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct
  • prevent screen readers from announcing the dismiss link icon

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

With hide (preview)

This example is for when we want to hide by default and display to the user based on some logic, either in the backend or with Javascript.

<%= render "govuk_publishing_components/components/intervention", {
  suggestion_text: "You should renew your permit every 6 months.",
  suggestion_link_text: "You may be invited to fill in a questionnaire",
  suggestion_link_url: "/questionnaire",
  hide: true
} %>

With data attributes (preview)

This example shows the use of suggestion_data_attributes, dismiss_data_attributes for click tracking on the dismiss section <p> tag, and dismiss_link_data_attributes for adding attributes to the dismiss link tag.

Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the track click script.

Based on your browsing you might be interested in Travel abroad: step by step

Hide this suggestion

<%= render "govuk_publishing_components/components/intervention", {
  suggestion_text: "Based on your browsing you might be interested in",
  suggestion_link_text: "Travel abroad: step by step",
  suggestion_link_url: "/travel-abroad",
  suggestion_data_attributes: {
    "track-category": "interventionBanner",
    "track-action": "interventionClicked",
    "track-dimension": "Travel abroad: step by step",
    "track-dimension-index": 29,
    "track-label": "clicked suggestion"
  },
  dismiss_text: "Hide this suggestion",
  name: "another-campaign-name",
  dismiss_data_attributes: {
    "track-category": "interventionBanner",
    "track-action": "interventionDismissed",
    "track-dimension": "Hide this suggestion",
    "track-dimension-index": 29,
    "track-label": "hide the intervention"
  },
  dismiss_link_data_attributes: {
    "track-category": "example"
  }
} %>

Without ga4 tracking (preview)

Disables GA4 tracking on the banner. Tracking is enabled by default. This includes link tracking on the component itself, event tracking on the ‘Hide’ link, and allows pageviews to record the presence of the banner on page load.

Based on your browsing you might be interested in Travel abroad: step by step

Hide this suggestion

<%= render "govuk_publishing_components/components/intervention", {
  disable_ga4: true,
  suggestion_text: "Based on your browsing you might be interested in",
  suggestion_link_text: "Travel abroad: step by step",
  suggestion_link_url: "/travel-abroad",
  dismiss_text: "Hide this suggestion",
  name: "another-campaign-name"
} %>