v4.0.0.3

src/lib/components/HeroSection.svelte

@@ -54,7 +54,7 @@
   }
 </script>
 
-<section id="hero">
+<section id="hero" data-track-location="hero">
   <!-- hero-img is a direct child of #hero so it can be absolutely
        positioned relative to the section on mobile without being
        constrained by hero-inner's stacking context -->
@@ -124,6 +124,9 @@
               target={reviewCta.external ? '_blank' : undefined}
               rel={reviewCta.external ? 'noopener' : undefined}
               aria-label="Read our five-star Google reviews"
+              data-track-event="social_proof_click"
+              data-track-type="hero_reviews"
+              data-track-label={reviewCta.label}
             >
               <span class="hero-trust-mark" aria-hidden="true">
                 <img
@@ -152,6 +155,9 @@
           rel={linkRel(primaryCta.external)}
           class="btn btn-yellow btn-with-arrow btn-hide-arrow-mobile"
           on:click={handlePrimaryCtaClick}
+          data-track-event="cta_click"
+          data-track-type="hero_primary"
+          data-track-label={primaryCta.label}
         >
           {primaryCta.label}
           <Icon name="fas fa-arrow-right" />
@@ -161,6 +167,9 @@
           target={linkTarget(hero.secondaryCta.external)}
           rel={linkRel(hero.secondaryCta.external)}
           class="hero-secondary-link"
+          data-track-event="cta_click"
+          data-track-type="hero_secondary"
+          data-track-label={hero.secondaryCta.label}
         >
           {hero.secondaryCta.label}
           <Icon name="fas fa-arrow-down" className="hero-cta-arrow" />