Add GA4 cta_click event tracking and Write the Docs announcement banner

src/components/shared/AnalyticsClickTracker.astro

@@ -0,0 +1,36 @@
+<script is:inline>
+(function initClickTracker() {
+  function attachListener() {
+    document.addEventListener('click', function (event) {
+      var target = event.target;
+      if (!(target instanceof Element)) return;
+      var tracked = target.closest('[data-track-action]');
+      if (!tracked) return;
+
+      var action = tracked.getAttribute('data-track-action') || '';
+      var funnel = tracked.getAttribute('data-track-funnel') || '';
+      var location = tracked.getAttribute('data-track-location') || '';
+      var campaign = tracked.getAttribute('data-track-campaign') || '';
+      var linkUrl = tracked.getAttribute('href') || '';
+
+      if (typeof gtag === 'function') {
+        gtag('event', 'cta_click', {
+          funnel_stage: funnel,
+          action: action,
+          location: location,
+          campaign: campaign,
+          link_url: linkUrl,
+        });
+      }
+    }, true);
+  }
+
+  if (document.readyState !== 'loading') {
+    attachListener();
+  } else {
+    document.addEventListener('DOMContentLoaded', attachListener);
+  }
+
+  document.addEventListener('astro:page-load', attachListener);
+})();
+</script>

src/components/shared/AnnouncementBanner.astro

@@ -0,0 +1,125 @@
+---
+interface Props {
+  campaign: string;
+  href: string;
+  message: string;
+  linkText: string;
+  ctaAction?: string;
+}
+
+const { campaign, href, message, linkText, ctaAction = 'banner_cta' } = Astro.props;
+const storageKey = `pl_banner_dismissed_${campaign}`;
+---
+
+<div
+  class="pl-announcement-banner"
+  id="pl-announcement-banner"
+  data-storage-key={storageKey}
+  hidden
+>
+  <p class="pl-announcement-banner-content">
+    <span>{message}</span>
+    <a
+      href={href}
+      data-track-action={ctaAction}
+      data-track-funnel="conversion"
+      data-track-location="announcement_banner"
+      data-track-campaign={campaign}
+    >{linkText}</a>
+  </p>
+  <button
+    class="pl-announcement-banner-dismiss"
+    type="button"
+    aria-label="Dismiss announcement"
+  >&times;</button>
+</div>
+
+<script is:inline>
+(function initBanner() {
+  function setup() {
+    var banner = document.getElementById('pl-announcement-banner');
+    if (!banner) return;
+
+    var storageKey = banner.getAttribute('data-storage-key');
+    if (!storageKey) return;
+
+    if (localStorage.getItem(storageKey)) return;
+
+    banner.removeAttribute('hidden');
+
+    var root = document.documentElement;
+    var currentNavHeight = getComputedStyle(root).getPropertyValue('--sl-nav-height').trim();
+    var bannerHeight = banner.offsetHeight;
+    root.style.setProperty('--sl-nav-height', 'calc(' + currentNavHeight + ' + ' + bannerHeight + 'px)');
+
+    var dismissButton = banner.querySelector('.pl-announcement-banner-dismiss');
+    if (dismissButton) {
+      dismissButton.addEventListener('click', function () {
+        banner.setAttribute('hidden', '');
+        localStorage.setItem(storageKey, '1');
+        root.style.removeProperty('--sl-nav-height');
+      });
+    }
+  }
+
+  if (document.readyState !== 'loading') {
+    setup();
+  } else {
+    document.addEventListener('DOMContentLoaded', setup);
+  }
+
+  document.addEventListener('astro:page-load', setup);
+})();
+</script>
+
+<style>
+  @layer starlight.core {
+    .pl-announcement-banner {
+      align-items: center;
+      background: var(--pl-accent, #4f46e5);
+      color: #fff;
+      display: flex;
+      font-size: var(--sl-text-sm);
+      gap: 0.5rem;
+      justify-content: center;
+      padding: 0.5rem 1rem;
+      text-align: center;
+      width: 100%;
+    }
+
+    .pl-announcement-banner[hidden] {
+      display: none;
+    }
+
+    .pl-announcement-banner-content {
+      margin: 0;
+    }
+
+    .pl-announcement-banner-content a {
+      color: #fff;
+      font-weight: 600;
+      margin-inline-start: 0.35em;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    .pl-announcement-banner-content a:hover {
+      text-decoration-thickness: 2px;
+    }
+
+    .pl-announcement-banner-dismiss {
+      background: none;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+      font-size: 1.25rem;
+      line-height: 1;
+      opacity: 0.8;
+      padding: 0.25rem;
+    }
+
+    .pl-announcement-banner-dismiss:hover {
+      opacity: 1;
+    }
+  }
+</style>

src/components/shared/TopHeader.astro

@@ -19,8 +19,8 @@ const { activeSection = getActiveSection(Astro.url.pathname), showNavTools = fal
     </slot>
     {showNavTools ? <div class="pl-site-search sl-flex print:hidden"><slot name="nav-tools" /></div> : null}
     <div class="pl-site-cta-row">
-      <a class="pl-site-cta" href="https://accounts.gopromptless.ai/sign-up">Sign up</a>
-      <a class="pl-site-cta" href="/meet">Book demo</a>
+      <a class="pl-site-cta" href="https://accounts.gopromptless.ai/sign-up" data-track-action="sign_up" data-track-funnel="conversion" data-track-location="nav">Sign up</a>
+      <a class="pl-site-cta" href="/meet" data-track-action="book_demo" data-track-funnel="conversion" data-track-location="nav">Book demo</a>
     </div>
   </div>
 

src/components/site/BrokenLinkReportForm.astro

@@ -151,6 +151,16 @@ const apiBaseUrl = (rawApiBaseUrl || fallbackApiBaseUrl).replace(/\/+$/, '');
         return;
       }
 
+      if (typeof gtag === 'function') {
+        gtag('event', 'cta_click', {
+          funnel_stage: 'evaluation',
+          action: 'broken_link_report',
+          location: 'free_tools',
+          campaign: '',
+          link_url: apiBase + '/public/free-tools/broken-link-report',
+        });
+      }
+
       submitButton.disabled = true;
       submitButton.dataset.loading = 'true';
       setStatus('Submitting request...', 'neutral');

src/components/site/FreeToolCard.astro

@@ -10,7 +10,7 @@ interface Props {
 const { title, description, href } = Astro.props;
 ---
 
-<a class="pl-free-tool-card" href={href}>
+<a class="pl-free-tool-card" href={href} data-track-action="use_free_tool" data-track-funnel="evaluation" data-track-location="free_tools">
   <span class="pl-free-tool-card-icon" aria-hidden="true">
     <Link2 size={18} stroke-width={2} />
   </span>

src/components/site/HandDrawnArrow.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  class?: string;
+  color?: string;
+}
+
+const { class: className, color = '#4f46e5' } = Astro.props;
+---
+
+<svg class:list={[className]} width="127" height="101" viewBox="0 0 127 101" fill="none" aria-hidden="true">
+  <path d="M2.50049 94.6234C26.9646 99.436 45.8251 102.499 64.5449 83.779C73.4801 74.8439 75.6508 62.7747 69.3449 51.4235C57.8697 30.7671 36.1193 61.8794 52.1005 71.8679C81.3975 90.179 107.496 53.7373 111.656 28.3123C112.868 20.903 114.109 12.4521 114.5 5.02341C114.84 -1.42018 116.532 6.23107 117.345 8.57898C118.851 12.9287 121.384 16.416 122.856 20.6679C125.431 28.108 122.247 21.2914 121.256 17.8234C118.414 7.87528 118.225 -1.36804 108.1 8.22341C106.063 10.1536 94.8636 19.1838 96.9004 19.4234C102.675 20.1028 109.099 23.9057 114.5 24.2234C121.895 24.6584 125.964 27.1998 116.1 22.2678C112.882 20.6586 109.714 19.6074 106.5 18.179C101.204 15.8249 108.731 17.6875 109.345 18.179C111.129 19.6065 116.024 20.2783 111.3 18.179C110.084 17.6385 104.886 16.2234 106.5 16.2234C111.597 16.2234 118.304 21.3139 116.456 17.8234C114.903 14.8901 112.89 14.4358 109.7 14.6234C108.615 14.6873 104.666 17.8234 106.5 17.8234" stroke={color} stroke-width="5" stroke-linecap="round"/>
+</svg>

src/components/site/Hero.astro

@@ -60,6 +60,17 @@ const {
     form.addEventListener('submit', async (event) => {
       event.preventDefault();
 
+      const gtag = (window as any).gtag;
+      if (typeof gtag === 'function') {
+        gtag('event', 'cta_click', {
+          funnel_stage: 'conversion',
+          action: 'book_demo',
+          location: 'hero',
+          campaign: '',
+          link_url: form.action,
+        });
+      }
+
       if (submitButton instanceof HTMLButtonElement) {
         submitButton.disabled = true;
         submitButton.textContent = 'Submitting...';
@@ -99,3 +110,4 @@ const {
     });
   })();
 </script>
+

src/components/site/PricingCards.astro

@@ -35,6 +35,7 @@ const defaultGrowthBundle = GROWTH_BUNDLE_OPTIONS[0];
       features={STARTUP_FEATURES}
       ctaLabel={STARTUP_PLAN.ctaLabel}
       ctaHref={STARTUP_PLAN.ctaHref}
+      ctaAction={STARTUP_PLAN.ctaAction}
     />
 
     <PricingCard
@@ -46,6 +47,7 @@ const defaultGrowthBundle = GROWTH_BUNDLE_OPTIONS[0];
       features={GROWTH_FEATURES}
       ctaLabel={GROWTH_PLAN.ctaLabel}
       ctaHref={GROWTH_PLAN.ctaHref}
+      ctaAction={GROWTH_PLAN.ctaAction}
       priceDataAttr="data-growth-price"
     >
       <GrowthBundleSelector slot="selector" bundles={GROWTH_BUNDLE_OPTIONS} selectedBundleId={defaultGrowthBundle.id} />
@@ -61,6 +63,7 @@ const defaultGrowthBundle = GROWTH_BUNDLE_OPTIONS[0];
       features={ENTERPRISE_FEATURES}
       ctaLabel={ENTERPRISE_PLAN.ctaLabel}
       ctaHref={ENTERPRISE_PLAN.ctaHref}
+      ctaAction={ENTERPRISE_PLAN.ctaAction}
     />
   </div>
 

src/components/site/WtdCallout.astro

@@ -0,0 +1,102 @@
+---
+import HandDrawnArrow from './HandDrawnArrow.astro';
+---
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap" rel="stylesheet" />
+
+<div class="pl-wtd-callout" id="pl-wtd-callout" data-storage-key="pl_banner_dismissed_wtd_pre_conference" hidden>
+  <HandDrawnArrow class="pl-wtd-arrow" />
+  <p class="pl-wtd-callout-text">
+    <a
+      href="https://accounts.gopromptless.ai/sign-up"
+      data-track-action="wtd_sign_up"
+      data-track-funnel="conversion"
+      data-track-location="hero_callout"
+      data-track-campaign="wtd_pre_conference"
+    >Write the Docs attendees — sign up before May 2nd for a surprise gift at the conference!</a>
+  </p>
+</div>
+
+<script is:inline>
+(function () {
+  var callout = document.getElementById('pl-wtd-callout');
+  if (!callout) return;
+  var key = callout.getAttribute('data-storage-key');
+  if (key && localStorage.getItem(key)) return;
+  callout.removeAttribute('hidden');
+})();
+</script>
+
+<style>
+  .pl-wtd-callout {
+    margin-top: 0.75rem;
+    display: flex;
+    align-items: flex-end;
+    gap: 0.25rem;
+    padding-left: 10rem;
+  }
+
+  .pl-wtd-callout[hidden] {
+    display: none;
+  }
+
+  .pl-wtd-arrow {
+    flex-shrink: 0;
+    width: 90px;
+    height: auto;
+    transform: scaleX(-1);
+    margin-bottom: 0.5rem;
+  }
+
+  .pl-wtd-callout-text {
+    margin: 0;
+    max-width: 22rem;
+    padding-left: 0.5em;
+    font-family: 'Caveat', cursive;
+    font-size: 1.35rem;
+    font-weight: 700;
+    line-height: 1.3;
+    color: #4f46e5;
+  }
+
+  .pl-wtd-callout-text a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .pl-wtd-callout-text a:hover {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  @media (max-width: 767px) {
+    .pl-wtd-callout {
+      padding: 1.5em 0;
+      padding-left: 0;
+      flex-direction: row-reverse;
+      justify-content: center;
+      align-items: flex-end;
+    }
+
+    .pl-wtd-arrow {
+      width: 70px;
+      transform: none;
+      margin-bottom: 0;
+      margin-left: -1.5em;
+      padding-bottom: 0.5em;
+    }
+
+    .pl-wtd-callout-text {
+      font-size: 1.25rem;
+      max-width: 350px;
+    }
+  }
+
+  @media (max-width: 41px) {
+    .pl-wtd-arrow {
+      margin-left: 0;
+    }
+  }
+</style>

src/components/site/pricing/PricingCard.astro

@@ -12,6 +12,7 @@ interface Props {
   features: string[];
   ctaLabel: string;
   ctaHref: string;
+  ctaAction?: string;
   featured?: boolean;
   badge?: string;
   priceDataAttr?: string;
@@ -28,6 +29,7 @@ const {
   features,
   ctaLabel,
   ctaHref,
+  ctaAction,
   featured = false,
   badge,
   priceDataAttr,
@@ -79,5 +81,5 @@ const PlanIcon = PLAN_ICONS[planId];
     </ul>
   </div>
 
-  <a href={ctaHref}>{ctaLabel}</a>
+  <a href={ctaHref} data-track-action={ctaAction} data-track-funnel="conversion" data-track-location={`pricing_${planId}`}>{ctaLabel}</a>
 </article>