Open
Description
Goal
Add basic Shopify Analytics to the project, specifically for tracking page views and cart events.
Research Notes
- Shopify uses Monorail as their analytics provider.
- Reference:
hydrogen-reactanalytics.ts - This provides insight into how Shopify's analytics API works.
- Reference:
- Found an interesting article on integrating Shopify Analytics in a Next.js environment.
Implementation Idea
Add a new server proxy file, shopify-analytics.ts, to handle the Shopify Analytics API connection. This could allow the frontend to send event data to the backend, which forwards it to Shopify's Monorail endpoint.
Here’s a draft for the proxy handler:
import type { H3Event } from 'h3';
/**
* Handles requests to the Shopify Analytics API through an API proxy.
* @param event - The H3 event containing the request data
* @returns The response from the Shopify Analytics endpoint
*/
export default defineEventHandler(async (event: H3Event) => {
const { shopify: options } = useRuntimeConfig();
const { events } = await readBody(event);
return await $fetch(
`${options.storefront}/.well-known/shopify/monorail/unstable/produce_batch`,
{
method: 'POST',
headers: {
'Content-Type': 'text/plain'
},
body: JSON.stringify({
events,
metadata: {
event_sent_at_ms: Date.now()
}
})
}
);
});