Fix missing custom data from provider to page view events

.changeset/strange-keys-glow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix customData from Analytics.Provider not being passed to page view events

examples/gtm/README.md

@@ -1,4 +1,4 @@
-# Hydrogen example: Shopify Analytics & Consent (unstable)
+# Hydrogen example: Google Tag Manager (GTM) with `<Analytics.Provider>`
 
 This folder contains an end-to-end example of how to implement Google Tag Manager for Hydrogen. Hydrogen supports both Shopify analytics, as well as third-party services.
 

packages/hydrogen/package.json

@@ -67,7 +67,6 @@
  "content-security-policy-builder": "^2.2.0",
  "type-fest": "^4.5.0",
  "source-map-support": "^0.5.21",
- "tiny-invariant": "^1.3.1",
  "use-resize-observer": "^9.1.0",
  "worktop": "^0.7.3"
  },

packages/hydrogen/src/analytics-manager/AnalyticsProvider.tsx

@@ -37,6 +37,7 @@ import {ShopifyAnalytics} from './ShopifyAnalytics';
 import {CartAnalytics} from './CartAnalytics';
 import type {CustomerPrivacyApiProps} from '../customer-privacy/ShopifyCustomerPrivacy';
 import type {Storefront} from '../storefront';
+import {errorOnce, warnOnce} from '../utils/warning';
 
 export type ShopAnalytics = {
  /** The shop ID. */
@@ -67,7 +68,7 @@ export type AnalyticsProviderProps = {
  'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner'
  >
  >;
- /** Disable throwing errors when required props are missing. */
+ /** @deprecated Disable throwing errors when required props are missing. */
  disableThrowOnError?: boolean;
  /** The domain scope of the cookie set with `useShopifyCookies`. **/
  cookieDomain?: string;
@@ -265,6 +266,10 @@ function shopifyCanTrack(): boolean {
  return false;
 }
 
+function messageOnError(field: string, envVar: string) {
+ return `[h2:error:Analytics.Provider] - ${field} is required. Make sure ${envVar} is defined in your environment variables. See https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent to learn how to setup environment variables in the Shopify admin.`;
+}
+
 function AnalyticsProvider({
  canTrack: customCanTrack,
  cart: currentCart,
@@ -285,6 +290,31 @@ function AnalyticsProvider({
  customCanTrack ? () => customCanTrack : () => shopifyCanTrack,
  );
 
+ if (!!shop) {
+ // If mock shop is used, log error instead of throwing
+ if (/\/68817551382$/.test(shop.shopId)) {
+ warnOnce(
+ '[h2:error:Analytics.Provider] - Mock shop is used. Analytics will not work properly.',
+ );
+ } else {
+ if (!consent.checkoutDomain) {
+ const errorMsg = messageOnError(
+ 'consent.checkoutDomain',
+ 'PUBLIC_CHECKOUT_DOMAIN',
+ );
+ errorOnce(errorMsg);
+ }
+
+ if (!consent.storefrontAccessToken) {
+ const errorMsg = messageOnError(
+ 'consent.storefrontAccessToken',
+ 'PUBLIC_STOREFRONT_API_TOKEN',
+ );
+ errorOnce(errorMsg);
+ }
+ }
+ }
+
  const value = useMemo<AnalyticsContextValue>(() => {
  return {
  canTrack,
@@ -318,7 +348,7 @@ function AnalyticsProvider({
  {!!shop && !!currentCart && (
  <CartAnalytics cart={currentCart} setCarts={setCarts} />
  )}
- {!!shop && (
+ {!!shop && consent.checkoutDomain && (
  <ShopifyAnalytics
  consent={consent}
  onReady={() => {
@@ -327,8 +357,6 @@ function AnalyticsProvider({
  setCanTrack(() => shopifyCanTrack);
  }}
  domain={cookieDomain}
- disableThrowOnError={disableThrowOnError}
- isMockShop={/\/68817551382$/.test(shop.shopId)}
  />
  )}
  </AnalyticsContext.Provider>

packages/hydrogen/src/analytics-manager/AnalyticsView.tsx

@@ -147,12 +147,21 @@ function AnalyticsView(props: CustomViewProps): null;
 function AnalyticsView(props: any) {
  const {type, data = {}, customData} = props;
  const location = useLocation();
- const {publish, cart, prevCart, shop} = useAnalytics();
+ const {
+ publish,
+ cart,
+ prevCart,
+ shop,
+ customData: analyticProviderCustomData,
+ } = useAnalytics();
  const url = location.pathname + location.search;
 
  let viewPayload: ViewPayload = {
  ...data,
- customData,
+ customData: {
+ ...analyticProviderCustomData,
+ ...customData,
+ },
  cart,
  prevCart,
  shop,

packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx

@@ -29,8 +29,6 @@ import {
  ComponentizableCartLine,
  Maybe,
 } from '@shopify/hydrogen-react/storefront-api-types';
-import invariant from 'tiny-invariant';
-import {warnOnce} from '../utils/warning';
 
 function getCustomerPrivacyRequired() {
  const customerPrivacy = getCustomerPrivacy();
@@ -44,10 +42,6 @@ function getCustomerPrivacyRequired() {
  return customerPrivacy;
 }
 
-function messageOnError(field: string) {
- return `[h2:error:Analytics.Provider] - ${field} is required`;
-}
-
 /**
  * This component is responsible for sending analytics events to Shopify.
  * It emits the following events:
@@ -61,42 +55,11 @@ export function ShopifyAnalytics({
  consent,
  onReady,
  domain,
- disableThrowOnError,
- isMockShop,
 }: {
  consent: AnalyticsProviderProps['consent'];
  onReady: () => void;
  domain?: string;
- disableThrowOnError: boolean;
- isMockShop: boolean;
 }) {
- // If mock shop is used, log error instead of throwing
- if (isMockShop) {
- warnOnce(
- '[h2:error:Analytics.Provider] - Mock shop is used. Analytics will not work properly.',
- );
- } else {
- if (!consent.checkoutDomain) {
- const errorMsg = messageOnError('consent.checkoutDomain');
- if (disableThrowOnError) {
- // eslint-disable-next-line no-console
- console.error(errorMsg);
- } else {
- invariant(false, errorMsg);
- }
- }
-
- if (!consent.storefrontAccessToken) {
- const errorMsg = messageOnError('consent.storefrontAccessToken');
- if (disableThrowOnError) {
- // eslint-disable-next-line no-console
- console.error(errorMsg);
- } else {
- invariant(false, errorMsg);
- }
- }
- }
-
  const {subscribe, register, canTrack} = useAnalytics();
  const [shopifyReady, setShopifyReady] = useState(false);
  const [privacyReady, setPrivacyReady] = useState(false);
@@ -117,13 +80,11 @@ export function ShopifyAnalytics({
  const {checkoutDomain, storefrontAccessToken, withPrivacyBanner} = consent;
 
  useCustomerPrivacy({
- checkoutDomain:
- isMockShop || !checkoutDomain ? 'mock.shop' : checkoutDomain,
- storefrontAccessToken:
- isMockShop || !storefrontAccessToken
- ? 'abcdefghijklmnopqrstuvwxyz123456'
- : storefrontAccessToken,
- withPrivacyBanner: isMockShop ? false : withPrivacyBanner,
+ checkoutDomain: !checkoutDomain ? 'mock.shop' : checkoutDomain,
+ storefrontAccessToken: !storefrontAccessToken
+ ? 'abcdefghijklmnopqrstuvwxyz123456'
+ : storefrontAccessToken,
+ withPrivacyBanner,
  onVisitorConsentCollected: setCustomerPrivacyReady,
  onReady: () => {
  // Set customer privacy ready 3 seconds after load

packages/hydrogen/src/utils/warning.ts

@@ -5,3 +5,11 @@ export const warnOnce = (string: string) => {
  warnings.add(string);
  }
 };
+
+const errors = new Set<string>();
+export const errorOnce = (string: string) => {
+ if (!errors.has(string)) {
+ console.error(string);
+ errors.add(string);
+ }
+};

packages/hydrogen/src/vite/plugin.ts

@@ -73,11 +73,7 @@ export function hydrogen(pluginOptions: HydrogenPluginOptions = {}): Plugin[] {
  // Avoid optimizing Hydrogen itself in the monorepo
  // to prevent caching source code changes:
  include: isHydrogenMonorepo
- ? [
- 'content-security-policy-builder',
- 'tiny-invariant',
- 'worktop/cookie',
- ]
+ ? ['content-security-policy-builder', 'worktop/cookie']
  : ['@shopify/hydrogen'],
  },
  };