Add comprehensive OpenPanel analytics tracking: - Install @openpanel/nextjs SDK - Add OpenPanelComponent to root layout for automatic page views - Create useAnalytics hook for tracking custom events - Track checkout funnel: started, shipping step, order completed - Track product views and add-to-cart events - Identify users on order completion - Add NEXT_PUBLIC_OPENPANEL_CLIENT_ID to environment
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { Metadata } from "next";
|
|
import { NextIntlClientProvider } from "next-intl";
|
|
import { getMessages, setRequestLocale } from "next-intl/server";
|
|
import { SUPPORTED_LOCALES, DEFAULT_LOCALE, isValidLocale } from "@/lib/i18n/locales";
|
|
import { OpenPanelComponent } from "@openpanel/nextjs";
|
|
|
|
const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
|
|
|
|
export function generateStaticParams() {
|
|
return SUPPORTED_LOCALES.map((locale) => ({ locale }));
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: {
|
|
params: Promise<{ locale: string }>;
|
|
}): Promise<Metadata> {
|
|
const { locale } = await params;
|
|
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
|
const localePrefix = validLocale === DEFAULT_LOCALE ? "" : `/${validLocale}`;
|
|
|
|
const languages: Record<string, string> = {};
|
|
for (const loc of SUPPORTED_LOCALES) {
|
|
const prefix = loc === DEFAULT_LOCALE ? "" : `/${loc}`;
|
|
languages[loc] = `${baseUrl}${prefix}`;
|
|
}
|
|
|
|
return {
|
|
alternates: {
|
|
canonical: `${baseUrl}${localePrefix}`,
|
|
languages,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function LocaleLayout({
|
|
children,
|
|
params,
|
|
}: {
|
|
children: React.ReactNode;
|
|
params: Promise<{ locale: string }>;
|
|
}) {
|
|
const { locale } = await params;
|
|
setRequestLocale(locale);
|
|
const messages = await getMessages();
|
|
|
|
return (
|
|
<>
|
|
<OpenPanelComponent
|
|
clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
|
|
trackScreenViews={true}
|
|
trackOutgoingLinks={true}
|
|
/>
|
|
<NextIntlClientProvider messages={messages}>
|
|
{children}
|
|
</NextIntlClientProvider>
|
|
</>
|
|
);
|
|
}
|