From b1f84485ee9d1c22ce53d51073abf163b9905e63 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 1 Jul 2025 12:46:18 -0500
Subject: [PATCH] Website: add HTML attributes to dropdown menu options
 (#30438)

Closes: https://github.com/fleetdm/confidential/issues/11169

Changes:
- Added HTML attributes to dropdown menu options to make it easier to
see what options users picked in Hotjar.
---
 website/views/layouts/layout.ejs          | 44 +++++++++---------
 website/views/pages/device-management.ejs | 32 ++++++-------
 website/views/pages/homepage.ejs          | 56 +++++++++++------------
 3 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index cd7df3e004..5267f7b49f 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -161,24 +161,24 @@
                 <div purpose="mobile-nav-container" id="mobileDropdowns">
                   <a purpose="mobile-dropdown-toggle" class="d-flex align-items-center collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleUseCases" aria-haspopup="true" aria-expanded="false">Multi platform</a>
                   <div id="mobileNavbarToggleUseCases" purpose="mobile-dropdown" class="collapse align-items-start" data-parent="#mobileDropdowns">
-                    <a purpose="mobile-dropdown-link" href="/device-management">Device management &nbsp; <small>(+ MDM)</small></a>
-                    <a purpose="mobile-dropdown-link" href="/observability">Orchestration &nbsp; <small>(+ monitoring)</small></a>
-                    <a purpose="mobile-dropdown-link" href="/software-management">Software management &nbsp; <small>(+ CVEs)</small></a>
-                    <a purpose="mobile-dropdown-link" href="/integrations">Integrations</a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="device-management" href="/device-management">Device management &nbsp; <small>(+ MDM)</small></a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="orchestration" href="/orchestration">Orchestration &nbsp; <small>(+ monitoring)</small></a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="software-management" href="/software-management">Software management &nbsp; <small>(+ CVEs)</small></a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="integrations" href="/integrations">Integrations</a>
                   </div>
                   <hr>
                   <a purpose="mobile-dropdown-link" class="d-flex align-items-center" href="/docs">Docs</a>
                   <hr>
                   <a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">Stories</a>
                   <div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
-                    <a purpose="mobile-dropdown-link" href="/announcements">News</a>
-                    <a purpose="mobile-dropdown-link" href="/support">Ask around</a>
-                    <a purpose="mobile-dropdown-link" href="/meetups">Meetups</a>
-                    <a purpose="mobile-dropdown-link" target="_blank" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml">Share your story</a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="announcements" href="/announcements">News</a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="support" href="/support">Ask around</a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="meetups" href="/meetups">Meetups</a>
+                    <a purpose="mobile-dropdown-link" data-dropdown-option="share-your-story" target="_blank" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml">Share your story</a>
                     <span class="mt-2 mb-2">COMPANY</span>
                     <div purpose="indented-mobile-links">
-                      <a purpose="mobile-dropdown-link" href="/handbook">The handbook</a>
-                      <a purpose="mobile-dropdown-link" href="/testimonials">Testimonials</a>
+                      <a purpose="mobile-dropdown-link" data-dropdown-option="handbook" href="/handbook">The handbook</a>
+                      <a purpose="mobile-dropdown-link" data-dropdown-option="testimonials" href="/testimonials">Testimonials</a>
                     </div>
                   </div>
                   <hr>
@@ -206,10 +206,10 @@
                 <div purpose="dropdown-button" class="btn-group">
                   <a purpose="header-nav-btn" class="dropdown-toggle  align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" href="/device-management" >Multi platform</a>
                   <div purpose="header-dropdown" class="dropdown-menu">
-                    <a class="dropdown-item" href="/device-management">Device management <small>+ MDM</small></a>
-                    <a class="dropdown-item" href="/observability">Orchestration <small>+ monitoring</small></a>
-                    <a class="dropdown-item" href="/software-management">Software management <small>+ CVEs, usage, app library</small></a>
-                    <a class="dropdown-item" href="/integrations">Integrations</a>
+                    <a class="dropdown-item" data-dropdown-option="device-management" href="/device-management">Device management <small>+ MDM</small></a>
+                    <a class="dropdown-item" data-dropdown-option="orchestration" href="/orchestration">Orchestration <small>+ monitoring</small></a>
+                    <a class="dropdown-item" data-dropdown-option="software-management" href="/software-management">Software management <small>+ CVEs, usage, app library</small></a>
+                    <a class="dropdown-item" data-dropdown-option="integrations" href="/integrations">Integrations</a>
                   </div>
                 </div>
                 <div purpose="dropdown-button" class="btn-group" style="width: 74px;">
@@ -218,14 +218,14 @@
                 <div purpose="dropdown-button" class="btn-group" style="width: 89px;">
                   <a purpose="header-nav-btn" button-text="Community" href="/testimonials" class="dropdown-toggle  align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" >Stories</a>
                   <div purpose="header-dropdown" class="dropdown-menu">
-                    <a class="dropdown-item" href="/announcements">News</a>
-                    <a class="dropdown-item" href="/support">Ask around</a>
-                    <a class="dropdown-item" href="/meetups">Meetups</a>
-                    <a class="dropdown-item" href="/contact">Schedule a demo</a><!-- «« included here in the desktop hover nav because unlike the mobile nav (which has 'Take a tour' as a primary CTA), there is no option to do that on desktop from other pages otherwise -->
-                    <a class="dropdown-item" target="_blank" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml">Share your story</a>
+                    <a class="dropdown-item" data-dropdown-option="announcements" href="/announcements">News</a>
+                    <a class="dropdown-item" data-dropdown-option="support" href="/support">Ask around</a>
+                    <a class="dropdown-item" data-dropdown-option="meetups" href="/meetups">Meetups</a>
+                    <a class="dropdown-item" data-dropdown-option="contact" href="/contact">Schedule a demo</a><!-- «« included here in the desktop hover nav because unlike the mobile nav (which has 'Take a tour' as a primary CTA), there is no option to do that on desktop from other pages otherwise -->
+                    <a class="dropdown-item" data-dropdown-option="share-your-story" target="_blank" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml">Share your story</a>
                     <span class="muted dropdown-header">COMPANY</span>
-                    <a class="dropdown-item" href="/handbook">The handbook</a>
-                    <a class="dropdown-item" href="/testimonials">Testimonials</a>
+                    <a class="dropdown-item" data-dropdown-option="handbook" href="/handbook">The handbook</a>
+                    <a class="dropdown-item" data-dropdown-option="testimonials" href="/testimonials">Testimonials</a>
                   </div>
                 </div>
                 <a purpose="header-nav-btn" button-text="Pricing" href="/pricing" class=" align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'pricing' ? 'current-section' : '' %>" style="text-decoration: none; line-height: 23px;">Pricing</a>
@@ -284,7 +284,7 @@
             <div purpose="footer-nav-column" class="d-flex flex-column col-lg-3 col-md-4 col-sm-6 col-12">
               <strong purpose="footer-nav-header">Multi platform</strong>
               <a href="/device-management">Device management</a>
-              <a href="/observability">Orchestration</a>
+              <a href="/orchestration">Orchestration</a>
               <a href="/software-management">Software management</a>
               <a href="/integrations">Integrations</a>
               <a href="/pricing">Pricing</a>
diff --git a/website/views/pages/device-management.ejs b/website/views/pages/device-management.ejs
index 8ed63d4a2f..e727e8725e 100644
--- a/website/views/pages/device-management.ejs
+++ b/website/views/pages/device-management.ejs
@@ -122,14 +122,14 @@
                 {{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
               </div>
               <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
+                <div class="dropdown-item" data-compare-with="sccm" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
+                <div class="dropdown-item" data-compare-with="omnissa" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
+                <div class="dropdown-item" data-compare-with="jamf" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
+                <div class="dropdown-item" data-compare-with="intune" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
+                <div class="dropdown-item" data-compare-with="ansible" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
+                <div class="dropdown-item" data-compare-with="tanium" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
+                <div class="dropdown-item" data-compare-with="puppet" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
+                <div class="dropdown-item" data-compare-with="chef" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
               </div>
             </div>
           </div>
@@ -410,14 +410,14 @@
             {{comparisonModeFriendlyNames[comparisonMode]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
           </div>
           <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
+            <div class="dropdown-item" data-compare-with="sccm" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
+            <div class="dropdown-item" data-compare-with="omnissa" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
+            <div class="dropdown-item" data-compare-with="jamf" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
+            <div class="dropdown-item" data-compare-with="intune" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
+            <div class="dropdown-item" data-compare-with="ansible" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
+            <div class="dropdown-item" data-compare-with="tanium" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
+            <div class="dropdown-item" data-compare-with="puppet" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
+            <div class="dropdown-item" data-compare-with="chef" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
           </div>
           <div purpose="feature-table">
             <div purpose="feature-name"><p>Cloud or self-host with no restrictions</p></div>
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index d2a8ba9337..447102301d 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -182,14 +182,14 @@
                 {{comparisonModeFriendlyNames[comparisonModeForIt]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
               </div>
               <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurpose">
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
+                <div class="dropdown-item" data-compare-with="sccm" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
+                <div class="dropdown-item" data-compare-with="omnissa" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
+                <div class="dropdown-item" data-compare-with="jamf" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
+                <div class="dropdown-item" data-compare-with="intune" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
+                <div class="dropdown-item" data-compare-with="ansible" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
+                <div class="dropdown-item" data-compare-with="tanium" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
+                <div class="dropdown-item" data-compare-with="puppet" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
+                <div class="dropdown-item" data-compare-with="chef" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
               </div>
             </div>
           </div>
@@ -473,14 +473,14 @@
             {{comparisonModeFriendlyNames[comparisonModeForIt]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
           </div>
           <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurpose">
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
+            <div class="dropdown-item" data-compare-with="sccm" @click="clickSwitchComparisonTableColumn('sccm')">SCCM</div>
+            <div class="dropdown-item" data-compare-with="omnissa" @click="clickSwitchComparisonTableColumn('omnissa')">Omnissa (WS1)</div>
+            <div class="dropdown-item" data-compare-with="jamf" @click="clickSwitchComparisonTableColumn('jamf')">Jamf Pro</div>
+            <div class="dropdown-item" data-compare-with="intune" @click="clickSwitchComparisonTableColumn('intune')">Intune</div>
+            <div class="dropdown-item" data-compare-with="ansible" @click="clickSwitchComparisonTableColumn('ansible')">Ansible</div>
+            <div class="dropdown-item" data-compare-with="tanium" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
+            <div class="dropdown-item" data-compare-with="puppet" @click="clickSwitchComparisonTableColumn('puppet')">Puppet</div>
+            <div class="dropdown-item" data-compare-with="chef" @click="clickSwitchComparisonTableColumn('chef')">Chef</div>
           </div>
 
           <div purpose="feature-table">
@@ -840,12 +840,12 @@
                 {{comparisonModeFriendlyNames[comparisonModeForSecurity]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small chevron pointing downwards">
               </div>
               <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="dropdownMenuSelectPurposeForSecurity">
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('defender')">Defender</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('rapid')">Rapid 7</div>
-                <!-- <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('crowdstrike')">Crowdstrike</div> -->
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('qualys')">Qualys</div>
-                <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tenable')">Tenable</div>
+                <div class="dropdown-item" data-compare-with="defender" @click="clickSwitchComparisonTableColumn('defender')">Defender</div>
+                <div class="dropdown-item" data-compare-with="rapid-7" @click="clickSwitchComparisonTableColumn('rapid')">Rapid 7</div>
+                <!-- <div class="dropdown-item" data-compare-with="crowdstrike" @click="clickSwitchComparisonTableColumn('crowdstrike')">Crowdstrike</div> -->
+                <div class="dropdown-item" data-compare-with="tanium" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
+                <div class="dropdown-item" data-compare-with="qualys" @click="clickSwitchComparisonTableColumn('qualys')">Qualys</div>
+                <div class="dropdown-item" data-compare-with="tenable" @click="clickSwitchComparisonTableColumn('tenable')">Tenable</div>
               </div>
             </div>
           </div>
@@ -1073,12 +1073,12 @@
             {{comparisonModeFriendlyNames[comparisonModeForSecurity]}}<img class="d-flex" style="width: 16px; height: 16px;" src="/images/chevron-down-16x16@2x.png" alt="a small shevron pointing downwards">
           </div>
           <div purpose="comparison-selector-dropwdown" class="dropdown-menu" aria-labelledby="mobileDropdownMenuSelectPurposeForSecurity">
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('defender')">Defender</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('rapid')">Rapid 7</div>
-            <!-- <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('crowdstrike')">Crowdstrike</div> -->
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('qualys')">Qualys</div>
-            <div class="dropdown-item" @click="clickSwitchComparisonTableColumn('tenable')">Tenable</div>
+            <div class="dropdown-item" data-compare-with="defender" @click="clickSwitchComparisonTableColumn('defender')">Defender</div>
+            <div class="dropdown-item" data-compare-with="rapid-7" @click="clickSwitchComparisonTableColumn('rapid')">Rapid 7</div>
+            <!-- <div class="dropdown-item" data-compare-with="" @click="clickSwitchComparisonTableColumn('crowdstrike')">Crowdstrike</div> -->
+            <div class="dropdown-item" data-compare-with="tanium" @click="clickSwitchComparisonTableColumn('tanium')">Tanium</div>
+            <div class="dropdown-item" data-compare-with="qualys" @click="clickSwitchComparisonTableColumn('qualys')">Qualys</div>
+            <div class="dropdown-item" data-compare-with="tenable" @click="clickSwitchComparisonTableColumn('tenable')">Tenable</div>
           </div>
           <div purpose="feature-table">
             <div purpose="feature-name"><p>Threat intelligence <img style="margin-left: 6px;" class="d-inline" purpose="tooltip-icon" src="/images/icon-more-info-14x14@2x.png" alt="More info"  data-toggle="tooltip" tabindex="0" data-placement="top" title="Integrate threat intelligence sources to detect, enrich, or investigate suspicious activity on devices."></p></div>