Sending of customerId on analytics doesn't work

[pauloapi]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

^2023.7.5

What version of Remix are you using?

1.19.3

Steps to Reproduce

// root.tsx

return defer({
 ....,
  analytics: {
    shopifySalesChannel: ShopifySalesChannel.hydrogen,
    shopId: shop.shop.id,
    customerId: customer?.id,
  },
});



// useAnalytics hook
export default function useAnalytics(...) {
  const pageAnalytics = {
    ...analyticsFromMatches,
    currency: locale.currency,
    acceptedLanguage: locale.language,
    hasUserConsent,
  };
  
      const payload: ShopifyPageViewPayload = {
      ...getClientBrowserParameters(),
      ...pageAnalytics,
    };
    
    sendShopifyAnalytics({
      eventName: AnalyticsEventName.PAGE_VIEW,
      payload,
    });
}

Expected Behavior

https://github.com/Shopify/hydrogen/blob/21909aca875a3b93a750cb5174e62b67d2eae80a/packages/hydrogen-react/src/analytics-schema-custom-storefront-customer-tracking.ts#L20-L27

and also this

https://github.com/Shopify/hydrogen/blob/21909aca875a3b93a750cb5174e62b67d2eae80a/packages/hydrogen-react/src/analytics-schema-custom-storefront-customer-tracking.ts#L106-L117

code should be

customer_id: parseInt(parseGid(pageViewPayload.customerId).id),

Actual Behavior

Based on the docs, The customerId field should be in format gid://shopify/Customer/<id>, but if we run the code on steps to reproduce. there will be an error

sendShopifyAnalytics request is unsuccessful 

 Schema validation error: [schema_id=trekkie_storefront_page_view/1.4], [error=customerId: expected value 'gid://shopify/Customer/123456XX' to be of type 'long', but got 'string']

but if we run the add to cart event, the request will go through but it is still not working because the format is different.

sendShopifyAnalytics({
  eventName: AnalyticsEventName.ADD_TO_CART,
  payload,
});

This is going to be the network request payload instead

{
    "source": "hydrogen",
    "hydrogenSubchannelId": "0",
    "is_persistent_cookie": true,
    "ccpa_enforced": false,
    "gdpr_enforced": false,
    "unique_token": "b5729bf4-XXXXX",
    "event_time": 1695372781398,
    "event_id": "bc191b74-XXXXXX",
    "event_source_url": "http://localhost:3000/products/xxxx",
    "referrer": "http://localhost:3000/products/xxxx,
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36",
    "navigation_type": "reload",
    "navigation_api": "PerformanceNavigationTiming",
    "shop_id": 1234XXXX,
    "event_name": "product_added_to_cart",
    "customerId": "gid://shopify/Customer/123456XX", // still in the format of gid:// instead of long
    "cart_token": "c1-XXXX",
    "total_value": 20,
    "products": [
        "{\"product_gid\":\"gid://shopify/Product/XXX\",\"name\":\"Test\",\"variant\":\"Black\",\"brand\":\"Test\",\"price\":20,\"quantity\":0,\"variant_gid\":\"gid://shopify/ProductVariant/XXXX\",\"product_id\":XXXX,\"variant_id\":XXX}"
    ]
}

There's a workaround that I've been doing to make the it work

// root.tsx

return defer({
 ....,
  analytics: {
    shopifySalesChannel: ShopifySalesChannel.hydrogen,
    shopId: shop.shop.id,
    customerId: customer?.id ? parseInt(parseGid(customer?.id).id) : null,
  },
});

[wizardlyhel]

Thanks for flagging this!