<!DOCTYPE html>
<html lang="en" class="govuk-template">
  <head>
    {%metas%}
    <title>{%title%}</title>
    <link rel="icon" href="{{favicon_path}}" type="image/x-icon">
    {%css%}
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <script async src="https://www.googletagmanager.com/gtag/js?id={{gtag}}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', '{{gtag}}');
    </script>
    <script type="module">
      import {onCLS, onINP, onLCP} from 'https://cdn.jsdelivr.net/npm/web-vitals@4.2.4/dist/web-vitals.min.js';
      function sendToGoogleAnalytics({name, delta, value, id}) {
        // Assumes the global `gtag()` function exists, see:
        // https://developers.google.com/analytics/devguides/collection/ga4
        gtag('event', name, {
          // Built-in params:
          value: delta, // Use `delta` so the value can be summed.
          // Custom params:
          metric_id: id, // Needed to aggregate events.
          metric_value: value, // Optional.
          metric_delta: delta, // Optional.
      
          // OPTIONAL: any additional params or debug info here.
          // See: https://web.dev/articles/debug-performance-in-the-field
          // metric_rating: 'good' | 'needs-improvement' | 'poor',
          // debug_info: '...',
          // ...
        });
      }
      setTimeout(() => {
        onCLS(sendToGoogleAnalytics);

        onINP(sendToGoogleAnalytics);

        onLCP(sendToGoogleAnalytics);

      }, 200);
      
    </script>
  </head>
  <body class="govuk-template__body">
    <div class="visually-hidden" id="readTitle" role="status"></div>
    {%app_entry%}
    {%config%}
    {%scripts%}
    {%renderer%}
  </body>
</html>
