Step by step navigation example

Without google analytics 4 tracking

Disables GA4 tracking on the component. Tracking is enabled by default. This includes the ga4-event-tracker module as well as data-ga4-event and data-ga4-expandable attributes on the “Show all steps” button, and each clickable Step heading. data-ga4-event contains JSON with event data relevant to tracking. data-ga4-expandable enables the value of aria-expanded to be captured.

Links within steps are tracked with the ga4-link-tracker. Links are given a data attribute of ga4-link, which contains the relevant tracking data as JSON.

How it looks (preview)

  1. Step 1 Do something

    This is a paragraph of text.

    This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.

    1. This is a link with GA4 tracking attributes on it.
  2. and Do something thing else

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  disable_ga4: true,
  steps: [
    {
      title: "Do something",
      contents: [
        {
          type: "paragraph",
          text: "This is a paragraph of text."
        },
        {
          type: "paragraph",
          text: "This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth."
        },
        {
          type: "list",
          contents: [
            {
              href: "https://www.gov.uk/learn-to-drive-a-car",
              text: "This is a link with GA4 tracking attributes on it."
            }
          ]
        }
      ]
    },
    {
      title: "Do something thing else",
      logic: "and",
      contents: [
        {
          type: "paragraph",
          text: "Some more text."
        },
        {
          type: "list",
          contents: [
            {
              href: "https://www.nationalarchives.gov.uk",
              text: "This is another link with GA4 tracking attributes on it."
            }
          ]
        }
      ]
    }
  ]
} %>