feat(page views): track pageviews

app/models/page-view/index.ts

@@ -0,0 +1 @@
+export * from './page-view.server'

app/models/page-view/page-view.server.ts

@@ -0,0 +1,11 @@
+import * as AudiophileClient from '~/utils/audiophile-client'
+
+export const createPageView = async (sessionId: string, url: string) => {
+  const urlObj = new URL(url)
+  const body = {
+    page_path: urlObj.pathname,
+    query_params: urlObj.search
+  }
+
+  await AudiophileClient.sendRequest('post', 'page_views', { sessionToken: sessionId, body })
+}

app/routes/api/purchase-carts/$cartUuid.ts

@@ -1,13 +1,13 @@
 import invariant from 'tiny-invariant'
 import { removeCart } from '~/models/purchase-cart'
-import * as SessionStorage from '~/utils/session-storage'
+import { getSessionId } from '~/utils/session-storage'
 
 import type { ActionArgs } from '@remix-run/node'
 
 export const action = async ({ params, request }: ActionArgs) => {
   if (request.method !== 'DELETE') return
 
-  const { sessionId } = await SessionStorage.getOrCreateSessionId(request)
+  const sessionId = await getSessionId(request)
   invariant(sessionId, 'there must be an active user session')
 
   const { cartUuid } = params

app/routes/api/purchase-carts/index.ts

@@ -1,11 +1,14 @@
 import { json } from '@remix-run/node'
+import invariant from 'tiny-invariant'
 import { createOrUpdateCart } from '~/models/purchase-cart'
-import * as SessionStorage from '~/utils/session-storage'
+import { getSessionId } from '~/utils/session-storage'
 
 import type { ActionArgs } from '@remix-run/node'
 
 export const action = async ({ request }: ActionArgs) => {
-  const { sessionId } = await SessionStorage.getOrCreateSessionId(request)
+  const sessionId = await getSessionId(request)
+  invariant(sessionId, 'sessionId not found')
+
   const { item, cartUuid } = await request.json()
 
   const cart = await createOrUpdateCart(sessionId, item, cartUuid)

app/routes/categories/$categorySlug.tsx

@@ -4,8 +4,11 @@ import invariant from "tiny-invariant"
 import { allProductCategories, getProductCategory } from "~/models/product-category"
 import { Heading, ProductBanner, CategoriesList, BestAudioBanner } from '~/components'
 import type { LoaderArgs } from "@remix-run/server-runtime"
+import trackPageView from "~/utils/track-page-view"
+
+export const loader = async ({ params, request }: LoaderArgs) => {
+  trackPageView(request)
 
-export const loader = async ({ params }: LoaderArgs) => {
   const { categorySlug } = params
   invariant(categorySlug, "Category slug is required")
 

app/routes/checkout.tsx

@@ -1,15 +1,20 @@
 import { Outlet, useLoaderData } from '@remix-run/react'
 import { json, redirect } from '@remix-run/node'
+import invariant from 'tiny-invariant'
 import { Text, PurchaseCartSummary } from '~/components'
 import { getLastStartedCart } from '~/models/purchase-cart'
-import { getOrCreateSessionId } from '~/utils/session-storage'
+import { getSessionId } from '~/utils/session-storage'
+import trackPageView from '~/utils/track-page-view'
 import { getAccessToken } from '~/utils/auth-storage'
 import goBack from '~/utils/go-back'
 
 import type { LoaderArgs } from '@remix-run/node'
 
 export const loader = async ({ request }: LoaderArgs) => {
-  const { sessionId } = await getOrCreateSessionId(request)
+  trackPageView(request)
+
+  const sessionId = await getSessionId(request)
+  invariant(sessionId, 'sessionId must exist')
 
   const activeCart = await getLastStartedCart(sessionId)
   if(!activeCart) return redirect('/')

app/routes/checkout/billing-details.tsx

@@ -7,8 +7,9 @@ import * as SessionStorage from '~/utils/session-storage'
 import formDataToObject from '~/utils/form-data-to-object'
 import RequestError from '~/errors/request-error'
 import { PHONE_REGEXP } from '~/constants'
+import trackPageView from '~/utils/track-page-view'
 
-import type { ActionArgs } from '@remix-run/node'
+import type { ActionArgs, LoaderArgs } from '@remix-run/node'
 import type { UserInfoPayload } from '~/models/auth'
 
 interface ValidationErrors {
@@ -28,6 +29,11 @@ const validateForm = (userInfo: UserInfoPayload) => {
   return errors
 }
 
+export const loader = async ({ request }: LoaderArgs) => {
+  trackPageView(request)
+  return null;
+}
+
 export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData()
   const userInfo = formDataToObject(formData) as UserInfoPayload

app/routes/checkout/confirmation-code.tsx

@@ -9,8 +9,9 @@ import RequestError from '~/errors/request-error'
 import { confirmCode } from '~/models/auth'
 import useCountdown from '~/hooks/use-countdown'
 import goBack from '~/utils/go-back'
+import trackPageView from '~/utils/track-page-view'
 
-import type { ActionArgs } from '@remix-run/node'
+import type { ActionArgs, LoaderArgs } from '@remix-run/node'
 import type { CodeInfoPayload } from '~/models/auth'
 
 const CODE_EXPIRATION_TIME = 5 * 60 // 5 minutes
@@ -29,6 +30,11 @@ const validateForm = (codeInfo: CodeInfoPayload) => {
   return errors
 }
 
+export const loader = async ({ request }: LoaderArgs) => {
+  trackPageView(request)
+  return null;
+}
+
 export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData()
   const { code } = formDataToObject(formData)

app/routes/checkout/login.tsx

@@ -5,8 +5,9 @@ import formDataToObject from '~/utils/form-data-to-object'
 import { getOrCreateSessionId } from '~/utils/session-storage'
 import RequestError from '~/errors/request-error'
 import { login } from '~/models/auth'
+import trackPageView from '~/utils/track-page-view'
 
-import type { ActionArgs } from '@remix-run/node'
+import type { ActionArgs, LoaderArgs } from '@remix-run/node'
 import type { UserInfoPayload } from '~/models/auth'
 
 interface ValidationErrors {
@@ -21,6 +22,11 @@ const validateForm = (userInfo: UserInfoPayload) => {
   return errors
 }
 
+export const loader = async ({ request }: LoaderArgs) => {
+  trackPageView(request)
+  return null;
+}
+
 export const action = async ({ request }: ActionArgs) => {
   const formData = await request.formData()
   const userInfo = formDataToObject(formData) as UserInfoPayload

app/routes/index.tsx

@@ -4,8 +4,13 @@ import { HomeHero, CategoriesList, BestAudioBanner, HomeProductBanners } from '~
 import { featuredProducts, homepageProducts } from '~/models/product'
 import { allProductCategories } from '~/models/product-category'
 import getRandom from '~/utils/get-random'
+import trackPageView from '~/utils/track-page-view'
+
+import type { LoaderArgs } from '@remix-run/node'
+
+export const loader = async ({ request }: LoaderArgs) => {
+  trackPageView(request)
 
-export const loader = async () => {
   const products = await featuredProducts()
   const featuredProduct = getRandom(products)
 

app/routes/products/$productSlug.tsx

@@ -5,11 +5,14 @@ import { getProduct } from '~/models/product'
 import { getProductStocks } from '~/models/product-stock'
 import { allProductCategories } from '~/models/product-category'
 import { ProductHeading, ProductFeatures, ProductGallery, CategoriesList, BestAudioBanner } from '~/components'
+import trackPageView from '~/utils/track-page-view'
 import goBack from '~/utils/go-back'
 
 import type { LoaderArgs } from '@remix-run/node'
 
-export const loader = async ({ params }: LoaderArgs) => {
+export const loader = async ({ params, request }: LoaderArgs) => {
+  trackPageView(request)
+
   const { productSlug } = params
   invariant(productSlug, "Product slug is required")
 

app/utils/track-page-view/index.ts

@@ -0,0 +1 @@
+export { default } from './track-page-view'

app/utils/track-page-view/track-page-view.ts

@@ -0,0 +1,12 @@
+import invariant from 'tiny-invariant'
+import { createPageView } from '~/models/page-view'
+import { getOrCreateSessionId } from '~/utils/session-storage'
+
+const trackPageView = async (request: Request) => {
+  const { sessionId } = await getOrCreateSessionId(request)
+  invariant(sessionId, 'sessionId must exist')
+
+  createPageView(sessionId, request.url)
+}
+
+export default trackPageView