ShopifyAnalytics component sends commerce-related analytics to Shopify. By adding the
ShopifyAnalytics component to your Hydrogen storefront, you can view key sales, orders, and online store visitor data from the Analytics dashboard in your Shopify admin.
ConfigurationAnchor link to section titled "Configuration"
ShopifyAnalytics component in
If you have a custom domain or you're using sub-domains, then you can set the cookie domain of
ShopifyAnalytics component so that cookies persists for your root domain:
If you're not using custom domains or sub-domains, then the
ShopifyAnalytics component uses the
storeDomain value in the Hydrogen configuration file as the default cookie domain or leaves it blank when the specified cookie domain doesn't match
Connecting Hydrogen analytics with Shopify checkoutAnchor link to section titled "Connecting Hydrogen analytics with Shopify checkout"
Analytic cookies must be set at the first-party domain. This means that when a buyer navigates from your Hydrogen storefront to Shopify checkout, the domain name must stay the same.
You can achieve this by assigning a sub-domain to your online store. For example, you can do the following tasks:
- Set your Hydrogen store domain to
- Attach a new sub-domain to your online store at
- Set the
cookieDomainto the same root domain at
<ShopifyAnalytics cookieDomain="my-awesome-hydrogen-store.com" />.
Shopify Analytics dataAnchor link to section titled "Shopify Analytics data"
Provide the following data to
useServerAnalytics to view information from the Analytics dashboard in your Shopify admin:
|pageType?||The page template type for your routes. For a list of valid values, refer to ShopifyAnalytics constants.||collections/[handle].server.jsx|
|resourceId?||The ID of the page template type for the routes that use Shopify resources.
This only applies to the following routes:
Anchor link to section titled "ShopifyAnalytics constants"
The following table provides a list of valid values for the
||A page that displays an article in an online store blog.|
||A page that displays an online store blog.|
||A page that uses Google's reCAPTCHA v3 to help prevent spam through customer, contact, and blog comment forms.|
||A page that displays the merchandise that a buyer intends to purchase, and the estimated cost associated with the cart.|
||A page that displays a grouping of products.|
||A page that provides details about a customer's account.|
||A page that enables a customer to activate their account.|
||A page that displays a customer's addresses.|
||A page that enables a customer to log in to a storefront.|
||A page that displays a customer's orders.|
||A page that enables a customer to create and register their account.|
||A page that enables a customer to reset the password associated with their account.|
||A page that displays an issued gift card.|
||The homepage of the online store.|
||A page that displays a list of collections, which each contain a grouping of products.|
||A page that users can't access due to insufficient permissions.|
||A page no longer exists or is inaccessible.|
||A page that holds static HTML content. Each
||A page that's shown when password protection is applied to the store.|
||A page that represents an individual item for sale in a store.|
||A page that provides the storefront's policy.|
||A page that displays the results of a storefront search.|
Component typeAnchor link to section titled "Component type"
ShopifyAnalytics component is a server component, which means that it renders on the server. For more information about component types, refer to React Server Components.