Utm

next-sitemap.config.js

@@ -1,4 +1,13 @@
 module.exports = {
   siteUrl: process.env.NEXT_PUBLIC_DEFAULT_SITE_URL || 'http://localhost:3000',
   generateRobotsTxt: true,
+  exclude: ['/redirect', '/redirect/*'],
+  robotsTxtOptions: {
+    policies: [
+      {
+        userAgent: '*',
+        disallow: ['/redirect', '/redirect/*'],
+      },
+    ],
+  },
 };

src/app/(website)/layout.tsx

@@ -74,6 +74,12 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
                   document.head.appendChild(script);
                 }
 
+                function loadHandleInitialPageUrl() {
+                  if (!localStorage.getItem('initialPageUrl')) {
+                    localStorage.setItem('initialPageUrl', window.location.href);
+                  }
+                }
+
                 void 0 === window._axcb && (window._axcb = []);
                 window._axcb.push(function (axeptio) {
                   axeptio.on("ready", function() {
@@ -89,6 +95,9 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
                     if (choices.clearbit) {
                       loadClearbit();
                     }
+                    if (choices.initialPageUrl) {
+                      loadHandleInitialPageUrl();
+                    }
                   });
                 });
             `}

src/app/(website)/redirect/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { Suspense, useEffect } from 'react';
+
+import LoadingIcon from '@/svgs/icons/loading.inline.svg';
+
+function RedirectComponent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const url = searchParams.get('url');
+
+  useEffect(() => {
+    if (url) {
+      router.push(url);
+    }
+  }, [url, router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <LoadingIcon className="w-10 animate-spin" />
+    </div>
+  );
+}
+
+function Redirect() {
+  return (
+    <Suspense fallback={null}>
+      <RedirectComponent />
+    </Suspense>
+  );
+}
+
+export default Redirect;

src/components/pages/home/hero/hero.tsx

@@ -35,7 +35,7 @@ function Hero() {
         <div className="relative mt-[42px] flex justify-center gap-x-4 md:gap-x-3.5 sm:mt-6">
           <CopyButton />
           <Button
-            className="w-full max-w-[166px] md:max-w-[154px]"
+            className="plausible-event-name=Click+RequestADemoBtn+BookACall w-full max-w-[166px] md:max-w-[154px]"
             href={ROUTES.DOCUMENTATION}
             size="lg"
             theme="outline"

src/components/pages/pricing/benefits/benefits.tsx

@@ -21,7 +21,7 @@ function Benefits({ heading, description, buttonText, buttonLink, cards }: Benef
             {description}
           </p>
           <Button
-            className="mt-8 h-[46px] w-full max-w-[188px] lg:mt-7 md:absolute md:left-1/2 md:top-full md:-translate-x-1/2 md:transform sm:mt-[22px]"
+            className="plausible-event-name=Click+RequestADemoBtn+RequestADesignerDemo mt-8 h-[46px] w-full max-w-[188px] lg:mt-7 md:absolute md:left-1/2 md:top-full md:-translate-x-1/2 md:transform sm:mt-[22px]"
             size="lg"
             theme="red-filled"
             href={buttonLink}

src/components/pages/pricing/plans/plans.tsx

@@ -1,4 +1,7 @@
+import { ROUTES } from '@/constants/routes';
+
 import Heading from '@/components/pages/pricing/heading';
+import Button from '@/components/shared/button';
 
 import { PlansProps } from '@/types/pricing-page';
 
@@ -14,6 +17,14 @@ function Plans({ heading, card1, card2, card3 }: PlansProps) {
           <PricingVariant type="business" cardData={card2} />
           <PricingVariant type="enterprise" cardData={card3} />
         </div>
+        <Button
+          className="plausible-event-name=Click+GetAQuoteBtn+RequestAQuote md:font-14 relative mt-2.5 w-full max-w-[180px] leading-snug lg:mt-1 md:mt-2 md:max-w-[160px]"
+          href={ROUTES.REQUEST_A_QUOTE}
+          size="lg"
+          theme="red-filled"
+        >
+          Get a quote
+        </Button>
       </div>
     </section>
   );

src/components/shared/calendar/calendar.tsx

@@ -1,12 +1,44 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
+import type { PrefillAndIframeAttrsConfig } from '@calcom/embed-core';
 import Cal from '@calcom/embed-react';
 
+/* eslint-disable */
 function Calendar({ calLink }: { calLink: string }) {
+  // TODO: in case of more tasks with getting utm from url, move the logic into hooks
+  const [analyticsData, setAnalyticsData] = useState<PrefillAndIframeAttrsConfig>({
+    initialPagePath: '',
+    'utm-campaign': '',
+    'utm-medium': '',
+    'utm-source': '',
+    'utm-content': '',
+    'utm-term': '',
+  });
+
+  useEffect(() => {
+    const initialPageUrl = localStorage.getItem('initialPageUrl');
+    if (initialPageUrl) {
+      const url = new URL(initialPageUrl);
+      const urlParams = new URLSearchParams(url.search);
+
+      setAnalyticsData((prev) => ({
+        ...prev,
+        initialPagePath: url.pathname,
+        'utm-campaign': urlParams.get('utm_campaign') || '',
+        'utm-medium': urlParams.get('utm_medium') || '',
+        'utm-source': urlParams.get('utm_source') || '',
+        'utm-content': urlParams.get('utm_content') || '',
+        'utm-term': urlParams.get('utm_term') || '',
+      }));
+    }
+  }, []);
+
   return (
     <section className="calendar mt-[72px] lg:mt-16 md:mt-14">
       <div className="container min-h-[490px]">
-        <Cal calLink={calLink} config={{ theme: 'dark' }} />
+        <Cal calLink={calLink} config={{ ...analyticsData, theme: 'dark' }} />
       </div>
     </section>
   );