Shopify analytics 2

examples/rust/README.md

@@ -57,6 +57,7 @@ yarn build
 ```
 
 Deploying to production will vary based on your hosting provider. Currently, Oxygen does not support Rust-based projects.
+
 ## Previewing a production build
 
 To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run `yarn preview`:

packages/hydrogen/package.json

@@ -102,6 +102,7 @@
     }
   },
   "dependencies": {
+    "@types/lodash-es": "^4.17.6",
     "@vitejs/plugin-react": "^1.3.0",
     "abort-controller": "^3.0.0",
     "body-parser": "^1.20.0",
@@ -111,6 +112,7 @@
     "graphql": "^16.3.0",
     "history": "^5.3.0",
     "kolorist": "^1.5.1",
+    "lodash-es": "^4.17.21",
     "magic-string": "^0.26.1",
     "node-fetch": "^2.6.7",
     "path-to-regexp": "^6.2.0",

packages/hydrogen/src/entry-server.tsx

@@ -616,9 +616,7 @@ async function hydrate(
   postRequestTasks('rsc', 200, request, componentResponse);
 
   return new Response(bufferedBody, {
-    headers: {
-      'cache-control': componentResponse.cacheControlHeader,
-    },
+    headers: componentResponse.headers,
   });
 }
 

packages/hydrogen/src/foundation/Analytics/Analytics.client.tsx

@@ -7,23 +7,26 @@ export function Analytics({
   analyticsDataFromServer: any;
 }) {
   useEffect(() => {
+    ClientAnalytics.hasSentPageView = false;
     const urlParams = new URLSearchParams(window.location.search);
 
     if (urlParams.has('utm_source')) {
-      ClientAnalytics.pushToPageAnalyticsData(
-        {
+      ClientAnalytics.pushToPageAnalyticsData({
+        utm: {
           id: urlParams.get('utm_id'),
           source: urlParams.get('utm_source'),
           campaign: urlParams.get('utm_campaign'),
           medium: urlParams.get('utm_medium'),
           content: urlParams.get('utm_content'),
           term: urlParams.get('utm_term'),
         },
-        'utm'
-      );
+      });
     }
 
     ClientAnalytics.pushToPageAnalyticsData(analyticsDataFromServer);
+    ClientAnalytics.subscribe(ClientAnalytics.eventNames.PAGE_VIEW, () => {
+      ClientAnalytics.hasSentPageView = true;
+    });
     ClientAnalytics.publish(ClientAnalytics.eventNames.PAGE_VIEW, true);
     if (analyticsDataFromServer.publishEventsOnNavigate) {
       analyticsDataFromServer.publishEventsOnNavigate.forEach(
@@ -32,10 +35,6 @@ export function Analytics({
         }
       );
     }
-
-    return function cleanup() {
-      ClientAnalytics.resetPageAnalyticsData();
-    };
   }, [analyticsDataFromServer]);
 
   return null;

packages/hydrogen/src/foundation/Analytics/Analytics.server.tsx

@@ -4,34 +4,19 @@ import {Analytics as AnalyticsClient} from './Analytics.client';
 import {useServerRequest} from '../ServerRequestProvider';
 import AnalyticsErrorBoundary from '../AnalyticsErrorBoundary.client';
 
-const DELAY_KEY = 'analytics-delay';
+const DELAY_KEY_1 = 'analytics-delay-1';
+const DELAY_KEY_2 = 'analytics-delay-2';
 
 export function Analytics() {
   const cache = useServerRequest().ctx.cache;
 
   // If render cache is empty, create a 50 ms delay so that React doesn't resolve this
   // component too early and potentially cause a mismatch in hydration
-  if (cache.size === 0 && !cache.has(DELAY_KEY)) {
-    let result: boolean;
-    let promise: Promise<boolean>;
-
-    cache.set(DELAY_KEY, () => {
-      if (result !== undefined) {
-        return result;
-      }
-
-      if (!promise) {
-        promise = new Promise((resolve) => {
-          setTimeout(() => {
-            result = true;
-            resolve(true);
-          }, 50);
-        });
-      }
-
-      throw promise;
-    });
+  if (cache.size === 0 && !cache.has(DELAY_KEY_1)) {
+    analyticDelay(cache, DELAY_KEY_1, 50);
   }
+  cache.has(DELAY_KEY_1) && cache.get(DELAY_KEY_1).call();
+  cache.delete(DELAY_KEY_1);
 
   // Make sure all queries have returned before rendering the Analytics server component
   cache.forEach((cacheFn: any) => {
@@ -41,10 +26,45 @@ export function Analytics() {
     }
   });
 
-  const analyticsData = useServerAnalytics();
+  // If all queries has returned (could be from cached queries),
+  // delay Analytic component by another 1ms (put this component
+  // to the end of the scheduled queue) so that other scheduled
+  // work can be processed by react first
+  if (cache.size > 1 && !cache.has(DELAY_KEY_2)) {
+    analyticDelay(cache, DELAY_KEY_2, 1);
+  }
+  cache.has(DELAY_KEY_2) && cache.get(DELAY_KEY_2).call();
+  cache.delete(DELAY_KEY_2);
+
   return (
     <AnalyticsErrorBoundary>
-      <AnalyticsClient analyticsDataFromServer={analyticsData} />
+      <AnalyticsClient analyticsDataFromServer={useServerAnalytics()} />
     </AnalyticsErrorBoundary>
   );
 }
+
+function analyticDelay(
+  cache: Map<string, any>,
+  delayKey: string,
+  delay: number
+) {
+  let result: boolean;
+  let promise: Promise<boolean>;
+
+  cache.set(delayKey, () => {
+    if (result !== undefined) {
+      return result;
+    }
+
+    if (!promise) {
+      promise = new Promise((resolve) => {
+        setTimeout(() => {
+          result = true;
+          resolve(true);
+        }, delay);
+      });
+    }
+
+    throw promise;
+  });
+}

packages/hydrogen/src/foundation/Analytics/ClientAnalytics.tsx

@@ -3,6 +3,7 @@ import type {Subscriber, Subscribers, SubscriberFunction} from './types';
 import {isServer} from '../../utilities';
 import {eventNames} from './const';
 import {EVENT_PATHNAME} from '../../constants';
+import merge from 'lodash-es/merge';
 
 type EventGuard = Record<string, NodeJS.Timeout>;
 
@@ -21,18 +22,10 @@ function isInvokedFromServer(): boolean {
   return false;
 }
 
-function pushToPageAnalyticsData(data: any, namespace?: string): void {
+function pushToPageAnalyticsData(data: any): void {
   if (isInvokedFromServer()) return;
 
-  if (namespace) {
-    pageAnalyticsData[namespace] = Object.assign(
-      {},
-      pageAnalyticsData[namespace] || {},
-      data
-    );
-  } else {
-    pageAnalyticsData = Object.assign({}, pageAnalyticsData, data);
-  }
+  pageAnalyticsData = merge({}, pageAnalyticsData, data);
 }
 
 function getPageAnalyticsData(): any {
@@ -47,12 +40,11 @@ function resetPageAnalyticsData(): void {
   pageAnalyticsData = {};
 }
 
-function publish(eventname: string, guardDup = false, payload?: any) {
+function publish(eventname: string, guardDup = false, payload = {}) {
   if (isInvokedFromServer()) return;
 
   const namedspacedEventname = getNamedspacedEventname(eventname);
   const subs = subscribers[namedspacedEventname];
-  const combinedPayload = Object.assign({}, pageAnalyticsData, payload);
 
   // De-dup events due to re-renders
   if (guardDup) {
@@ -63,11 +55,11 @@ function publish(eventname: string, guardDup = false, payload?: any) {
     }
 
     const namespacedTimeout = setTimeout(() => {
-      publishEvent(subs, combinedPayload);
+      publishEvent(subs, Object.assign({}, pageAnalyticsData, payload));
     }, 100);
     guardDupEvents[namedspacedEventname] = namespacedTimeout;
   } else {
-    publishEvent(subs, combinedPayload);
+    publishEvent(subs, Object.assign({}, pageAnalyticsData, payload));
   }
 }
 
@@ -126,4 +118,5 @@ export const ClientAnalytics = {
   subscribe,
   pushToServer,
   eventNames,
+  hasSentPageView: false,
 };

packages/hydrogen/src/foundation/Analytics/ServerAnalyticsRoute.server.tsx

@@ -5,15 +5,18 @@ export function ServerAnalyticsRoute(
   request: Request,
   serverAnalyticsConnectors?: Array<ServerAnalyticsConnector>
 ) {
-  if (request.headers.get('Content-Length') === '0') {
+  const requestHeader = request.headers;
+  const requestUrl = request.url;
+
+  if (requestHeader.get('Content-Length') === '0') {
     serverAnalyticsConnectors?.forEach((connector) => {
-      connector.request(request);
+      connector.request(requestUrl, request.headers);
     });
-  } else if (request.headers.get('Content-Type') === 'application/json') {
+  } else if (requestHeader.get('Content-Type') === 'application/json') {
     Promise.resolve(request.json())
       .then((data) => {
         serverAnalyticsConnectors?.forEach((connector) => {
-          connector.request(request, data, 'json');
+          connector.request(requestUrl, requestHeader, data, 'json');
         });
       })
       .catch((error) => {
@@ -23,7 +26,7 @@ export function ServerAnalyticsRoute(
     Promise.resolve(request.text())
       .then((data) => {
         serverAnalyticsConnectors?.forEach((connector) => {
-          connector.request(request, data, 'text');
+          connector.request(requestUrl, requestHeader, data, 'text');
         });
       })
       .catch((error) => {

packages/hydrogen/src/foundation/Analytics/connectors/PerformanceMetrics/PerformanceMetrics.server.tsx

@@ -1,18 +1,19 @@
 export function request(
-  request: Request,
+  requestUrl: string,
+  requestHeader: Headers,
   data?: any,
   contentType?: string
 ): void {
-  const url = new URL(request.url);
+  const url = new URL(requestUrl);
   if (url.search === '?performance' && contentType === 'json') {
     const initTime = new Date().getTime();
 
     fetch('https://monorail-edge.shopifysvc.com/v1/produce', {
       method: 'post',
       headers: {
         'content-type': 'text/plain',
-        'x-forwarded-for': request.headers.get('x-forwarded-for') || '',
-        'user-agent': request.headers.get('user-agent') || '',
+        'x-forwarded-for': requestHeader.get('x-forwarded-for') || '',
+        'user-agent': requestHeader.get('user-agent') || '',
       },
       body: JSON.stringify({
         schema_id: 'hydrogen_buyer_performance/2.0',