Perfkit (#2268)

* add perfkit

* add spa mode

* working perfkit

* format

* format

* fix test

* Fix test

* set up perfkit in test

* address errors

* guard perfkit

* pinned perfkit version

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

@@ -308,9 +308,11 @@ function triggerCartUpdate({
   });
 }
 
-function customerPrivacyReady() {
-  const event = new CustomEvent('visitorConsentCollected');
-  document.dispatchEvent(event);
+function mockPerfKit() {
+  window.PerfKit = {
+    navigate: () => {},
+    setPageType: () => {},
+  };
 }
 
 function LoopAnalytics({
@@ -325,8 +327,13 @@ function LoopAnalytics({
 }): JSX.Element {
   const analytics = useAnalytics();
   const {ready} = analytics.register('loopAnalytics');
+  const {ready: customerPrivacyReady} = analytics.register(
+    'Internal_Shopify_CustomerPrivacy',
+  );
+  const {ready: perfKitReady} = analytics.register('Internal_Shopify_Perf_Kit');
 
   useEffect(() => {
+    mockPerfKit();
     if (registerCallback) {
       registerCallback(analytics, ready);
     } else {
@@ -335,6 +342,7 @@ function LoopAnalytics({
   });
 
   customerPrivacyReady();
+  perfKitReady();
 
   return (
     <div>{typeof children === 'function' ? children(analytics) : children}</div>

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 {PerfKit} from './PerfKit';
 import {errorOnce, warnOnce} from '../utils/warning';
 
 export type ShopAnalytics = {
@@ -359,6 +360,7 @@ function AnalyticsProvider({
           domain={cookieDomain}
         />
       )}
+      {!!shop && <PerfKit shop={shop} />}
     </AnalyticsContext.Provider>
   );
 }

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

@@ -0,0 +1,60 @@
+import {parseGid, useLoadScript} from '@shopify/hydrogen-react';
+import {ShopAnalytics, useAnalytics} from './AnalyticsProvider';
+import {AnalyticsEvent} from './events';
+import {useEffect, useRef} from 'react';
+
+declare global {
+  interface Window {
+    PerfKit: {
+      navigate: () => void;
+      setPageType: (pageType: string) => void;
+    };
+  }
+}
+
+// Pin to a version that have SPA support.
+// TODO: Update to a stable version when available.
+const PERF_KIT_UNSTABLE =
+  'https://cdn.shopify.com/shopifycloud/perf-kit/shopify-perf-kit-1bd852a.min.js';
+
+export function PerfKit({shop}: {shop: ShopAnalytics}) {
+  const loadedEvent = useRef(false);
+  const {subscribe, register} = useAnalytics();
+  const {ready} = register('Internal_Shopify_Perf_Kit');
+
+  const scriptStatus = useLoadScript(PERF_KIT_UNSTABLE, {
+    attributes: {
+      id: 'perfkit',
+      'data-application': 'hydrogen',
+      'data-shop-id': parseGid(shop.shopId).id.toString(),
+      'data-storefront-id': shop.hydrogenSubchannelId,
+      'data-monorail-region': 'global',
+      'data-spa-mode': 'true',
+      'data-resource-timing-sampling-rate': '100',
+    },
+  });
+
+  useEffect(() => {
+    if (scriptStatus !== 'done' || loadedEvent.current) return;
+    loadedEvent.current = true;
+
+    subscribe(AnalyticsEvent.PAGE_VIEWED, () => {
+      window.PerfKit?.navigate();
+    });
+    subscribe(AnalyticsEvent.PRODUCT_VIEWED, () => {
+      window.PerfKit?.setPageType('product');
+    });
+    subscribe(AnalyticsEvent.COLLECTION_VIEWED, () => {
+      window.PerfKit?.setPageType('collection');
+    });
+    subscribe(AnalyticsEvent.SEARCH_VIEWED, () => {
+      window.PerfKit?.setPageType('search');
+    });
+    subscribe(AnalyticsEvent.CART_VIEWED, () => {
+      window.PerfKit?.setPageType('cart');
+    });
+
+    ready();
+  }, [subscribe, ready, scriptStatus]);
+  return null;
+}

packages/hydrogen/vitest.setup.ts

@@ -3,3 +3,8 @@ import matchers from '@testing-library/jest-dom/matchers';
 import {expect} from 'vitest';
 
 expect.extend(matchers);
+
+// Defining `document.currentScript` to avoid errors in tests
+Object.defineProperty(document, 'currentScript', {
+  value: document.createElement('script'),
+});