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

   Some more text.

   1. This is another link with GA4 tracking attributes on it.

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."
            }
          ]
        }
      ]
    }
  ]
} %>