github-personal/firezone
1
0
Fork 0
mirror of https://github.com/outbackdingo/firezone.git synced 2026-01-27 10:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): Integrate Mixpanel with HubSpot form submissions and fix CTAs (#5094)

Browse Source
This commit is contained in:
Andrew Dryga
2024-05-22 13:09:56 -06:00
committed by GitHub
parent 1d5aae18cf
commit 4bc1eb2ba1
4 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/app/pricing/_page.tsx
View File

@@ -139,12 +139,12 @@ export default function _Page() {
</span>
</h2>
<div className="mb-16 w-full text-center">
<Link href="https://billing.firezone.dev/p/login/5kA9DHeZ8cSI2mQcMM">
<Link href="https://app.firezone.dev/sign_up">
<button
type="button"
className="w-64 text-lg px-5 py-2.5 md:w-44 md:text-sm md:px-3 md:py-2.5 lg:w-64 lg:text-lg lg:px-5 lg:py-2.5 border border-1 border-primary-450 hover:border-2 hover:font-bold font-semibold tracking-tight rounded shadow-lg text-primary-450 duration-0 hover:scale-105 transition transform"
>
Subscribe
Sign up
</button>
</Link>
</div>

4
website/src/app/pricing/plan_table.tsx
View File

@@ -993,12 +993,12 @@ export default function PlanTable() {
</Link>
</td>
<td className="gmx-1 py-14 text-center">
<Link href="https://billing.firezone.dev/p/login/5kA9DHeZ8cSI2mQcMM">
<Link href="https://app.firezone.dev/sign_up">
<button
type="button"
className="md:text-lg md:py-2.5 text-sm sm:px-5 px-2.5 py-1.5 text-primary-450 font-semibold hover:font-bold tracking-tight rounded duration-0 hover:scale-105 transition transform shadow-lg border border-1 border-primary-450 hover:border-2"
>
Subscribe
Sign up
</button>
</Link>
</td>

4
website/src/components/Providers/index.jsx
View File

@@ -3,11 +3,11 @@ import { MixpanelProvider } from "react-mixpanel-browser";
import { HubspotProvider } from "next-hubspot";
export default function Provider({ children }) {
const token = "b0ab1d66424a27555ed45a27a4fd0cd2";
const token = process.env.NODE_ENV == "development" ? "313bdddc66b911f4afeb2c3242a78113" : "b0ab1d66424a27555ed45a27a4fd0cd2";
const host = "https://t.firez.one";
return (
<MixpanelProvider token={token} config={{ api_host: host }}>
<MixpanelProvider token={token} config={{ api_host: host, record_sessions_percent: 5 }}>
<HubspotProvider>{children}</HubspotProvider>
</MixpanelProvider>
);

40
website/src/components/RootLayout/index.tsx
View File

@@ -23,6 +23,17 @@ export const metadata: Metadata = {
description: "Open-source, zero-trust access platform built on WireGuard®",
};
interface HubSpotSubmittedFormData {
type: string;
eventName: string;
redirectUrl: string;
conversionId: string;
formGuid: string;
submissionValues: {
[key: string]: string;
};
}
function Mixpanel() {
const pathname = usePathname();
const searchParams = useSearchParams();
@@ -39,6 +50,35 @@ function Mixpanel() {
mixpanel.track("$mp_web_page_view", {
$current_url: url,
});
const handleMessage = (event: MessageEvent) => {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
const formData: HubSpotSubmittedFormData = event.data.data;
if (!formData || !formData.formGuid || !formData.submissionValues) {
console.error("Missing form data:", formData);
return;
}
if (formData.submissionValues.email && formData.submissionValues.firstname && formData.submissionValues.lastname) {
mixpanel.people.set({
$email: formData.submissionValues.email,
$first_name: formData.submissionValues.firstname,
$last_name: formData.submissionValues.lastname
});
mixpanel.track("HubSpot Form Submitted", {
formId: formData.formGuid,
conversionId: formData.conversionId,
});
}
}
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, [pathname, searchParams, mixpanel]);
return null;