Hydrogen provides recommended patterns for collecting and transmitting website metrics to Shopify analytics, which enables you to view metrics in real time, directly in the Shopify admin.

## Consent tracking for analytics

Before you can track analytics on your Hydrogen storefront, ensure you comply with customer consent regulations.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/analytics/consent" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/utility"
     data-alt-src="/assets/resource-cards/utility-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Tracking consent with Shopify (recommended)
    </h3>
    <p class="resource-card__description">Use Shopify’s built-in Customer Privacy API and native cookie banner to get consent</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/analytics/consent-3p" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/globe"
     data-alt-src="/assets/resource-cards/globe-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Third-party consent management services
    </h3>
    <p class="resource-card__description">Integrate a third-party consent tracking service into Hydrogen</p>
  </a>
</div>
</div>


## Tracking analytics events

Analytics is built into Hydrogen, but you can implement it manually if required. You should also check that it's working as expected.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/analytics/tracking" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/analytics"
     data-alt-src="/assets/resource-cards/analytics-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Add Analytics components to Hydrogen
    </h3>
    <p class="resource-card__description">Manually upgrade an older version of Hydrogen to use the built-in Analytics components</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/headless/hydrogen/analytics/validation" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Validate your analytics data
    </h3>
    <p class="resource-card__description">Check that analytics data is flowing and troubleshoot common issues</p>
  </a>
</div>
</div>