From 6a3347f84309c20d4ea1dbd2e1a135d1eddc3e2d Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <sjhobson@gmail.com>
Date: Wed, 31 Jul 2024 14:28:43 -0700
Subject: [PATCH] Convert buttons with data-link-type="download" into CTAs Fix
 #14062

---
 .../banners/mobile/firefox-app-store.html     |   4 +-
 .../banners/mobile/focus-app-store.html       |   4 +-
 bedrock/base/templates/macros.html            |  18 +-
 .../templates/firefox/all-unified.html        |   2 +-
 .../firefox/browsers/chromebook.html          |   4 +-
 .../firefox/browsers/mobile/index.html        |   8 +-
 .../templates/firefox/enterprise/index.html   |  20 +-
 .../includes/download-button-thanks.html      |   4 +-
 .../firefox/includes/download-button.html     |  19 +-
 .../firefox/includes/download-list.html       |   4 +-
 .../includes/download-unsupported.html        |   6 +-
 .../templates/firefox/includes/macros.html    |  21 +-
 bedrock/firefox/templates/firefox/index.html  |   6 +-
 bedrock/firefox/tests/test_helpers.py         |   8 +-
 bedrock/firefox/tests/test_views.py           |  15 +-
 .../mozorg/analytics-tests/ga-index.html      |   4 +-
 ...ews.py::TestFirefoxGA::test_firefox_new_GA | 770 ++++++++++++++++++
 media/css/firefox/browsers-products.scss      |   2 +-
 media/js/base/core-datalayer.js               |   2 +-
 media/js/base/mozilla-utils.js                |   5 +-
 tests/pages/firefox/family/landing.py         |   4 +-
 tests/unit/spec/base/core-datalayer.js        |   2 +-
 tests/unit/spec/firefox/new/common/thanks.js  |   2 +-
 23 files changed, 863 insertions(+), 71 deletions(-)
 create mode 100644 firefox/tests/test_views.py::TestFirefoxGA::test_firefox_new_GA

diff --git a/bedrock/base/templates/includes/banners/mobile/firefox-app-store.html b/bedrock/base/templates/includes/banners/mobile/firefox-app-store.html
index 21b725143a3..5eb1b0d62d0 100644
--- a/bedrock/base/templates/includes/banners/mobile/firefox-app-store.html
+++ b/bedrock/base/templates/includes/banners/mobile/firefox-app-store.html
@@ -21,8 +21,8 @@ <h2 class="c-banner-title">{{ ftl('banner-firefox-app-store-title') }}</h2>
             <p class="show-android">{{ ftl('banner-firefox-app-store-free-google-play') }}</p>
             <p class="show-ios">{{ ftl('banner-firefox-app-store-free-app-store') }}</p>
           </div>
-          <a class="c-banner-button show-android ga-product-download" href="{{ android_url }}" data-link-type="download" data-download-os="Android" data-download-location="Banner">{{ ftl('ui-view') }}</a>
-          <a class="c-banner-link show-ios ga-product-download" href="{{ ios_url }}" data-link-type="download" data-download-os="iOS" data-download-location="Banner">{{ ftl('ui-view') }}</a>
+          <a class="c-banner-button show-android ga-product-download" href="{{ android_url }}" data-cta-text="View (Android)" data-cta-type="firefox_mobile" data-cta-position="banner">{{ ftl('ui-view') }}</a>
+          <a class="c-banner-link show-ios ga-product-download" href="{{ ios_url }}" data-cta-text="View (iOS)" data-cta-type="firefox_mobile" data-cta-position="banner">{{ ftl('ui-view') }}</a>
       </div>
     </div>
   </div>
diff --git a/bedrock/base/templates/includes/banners/mobile/focus-app-store.html b/bedrock/base/templates/includes/banners/mobile/focus-app-store.html
index 5329b2818d8..ad78f47cf12 100644
--- a/bedrock/base/templates/includes/banners/mobile/focus-app-store.html
+++ b/bedrock/base/templates/includes/banners/mobile/focus-app-store.html
@@ -21,8 +21,8 @@ <h2 class="c-banner-title">{{ ftl('banner-firefox-focus-app-store-title') }}</h2
             <p class="show-android">{{ ftl('banner-firefox-app-store-free-google-play') }}</p>
             <p class="show-ios">{{ ftl('banner-firefox-app-store-free-app-store') }}</p>
           </div>
-          <a class="c-banner-button show-android ga-product-download" href="{{ android_url }}" data-link-type="download" data-download-os="Android" data-download-location="Banner">{{ ftl('ui-view') }}</a>
-          <a class="c-banner-link show-ios ga-product-download" href="{{ ios_url }}" data-link-type="download" data-download-os="iOS" data-download-location="Banner">{{ ftl('ui-view') }}</a>
+          <a class="c-banner-button show-android ga-product-download" href="{{ android_url }}" data-cta-text="View (Android)" data-cta-type="firefox_focus" data-cta-position="banner">{{ ftl('ui-view') }}</a>
+          <a class="c-banner-link show-ios ga-product-download" href="{{ ios_url }}" data-cta-text="View (iOS)" data-cta-type="firefox_focus" data-cta-position="banner">{{ ftl('ui-view') }}</a>
       </div>
     </div>
   </div>
diff --git a/bedrock/base/templates/macros.html b/bedrock/base/templates/macros.html
index f309f67f917..49ec1a191b6 100644
--- a/bedrock/base/templates/macros.html
+++ b/bedrock/base/templates/macros.html
@@ -48,7 +48,14 @@
 {% macro google_play_button(class_name='', extra_data_attributes={}, extra_img_attributes={}, href=settings.GOOGLE_PLAY_FIREFOX_LINK_UTMS, id='', product='Firefox', target='') -%}
 {% set optional_img_attributes = {'alt': ftl('download-button-google-play'), 'width': '152', 'height': '45', 'l10n': True} %}
 {% do optional_img_attributes.update(extra_img_attributes) %}
-<a class="ga-product-download {{ class_name }}"{% if id %} id="{{ id }}"{% endif %}{% if target %} target="{{ target }}" rel="external noopener noreferrer"{% else %} rel="external"{% endif %} href="{{ href }}"{% if product in ['Firefox', 'Focus'] %} data-link-type="download" data-download-os="Android"{% endif %}{% for attr, val in extra_data_attributes.items() %} data-{{ attr }}="{{ val }}"{% endfor %}>
+<a class="ga-product-download {{ class_name }}"
+    {% if id %}id="{{ id }}"{% endif %}
+    {% if target %}target="{{ target }}" rel="external noopener noreferrer"{% else %} rel="external"{% endif %}
+    href="{{ href }}"
+    data-cta-text="Play Store"
+    {% if product in ['Firefox'] %}data-cta-type="firefox_mobile"{% elif product in ['Focus', 'Klar'] %}data-cta-type="firefox_focus"{% endif %}
+    {% for attr, val in extra_data_attributes.items() %} data-{{ attr }}="{{ val }}"{% endfor %}
+    >
   {{ resp_img(
     url='img/firefox/android/btn-google-play.png',
     srcset={
@@ -61,7 +68,14 @@
 
 {% macro apple_app_store_button(class_name='', extra_data_attributes={}, extra_img_attributes={}, href=settings.APPLE_APPSTORE_FIREFOX_LINK, id='', product='Firefox', target='') -%}
 {% set optional_img_attributes = {'width': '152', 'height': '45'} %}
-<a class="ga-product-download {{ class_name }}"{% if id %} id="{{ id }}"{% endif %}{% if target %} target="{{ target }}" rel="external noopener noreferrer"{% else %} rel="external"{% endif %} href="{{ href }}"{% if product in ['Firefox', 'Focus'] %} data-link-type="download" data-download-os="iOS"{% endif %}{% if product == 'Firefox' %} {% endif %}{% for attr, val in extra_data_attributes.items() %} data-{{ attr }}="{{ val }}"{% endfor %}>
+<a class="ga-product-download {{ class_name }}"
+    {% if id %} id="{{ id }}"{% endif %}
+    {% if target %} target="{{ target }}" rel="external noopener noreferrer"{% else %} rel="external"{% endif %}
+    href="{{ href }}"
+    data-cta-text="App Store"
+    {% if product in ['Firefox'] %}data-cta-type="firefox_mobile"{% elif product in ['Focus', 'Klar'] %}data-cta-type="firefox_focus"{% endif %}
+    {% for attr, val in extra_data_attributes.items() %} data-{{ attr }}="{{ val }}"{% endfor %}
+    >
   <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ ftl('download-button-download-app-store') }}"{% for attr, val in optional_img_attributes.items() %} {{ attr }}="{{ val }}"{% endfor %}>
 </a>
 {%- endmacro %}
diff --git a/bedrock/firefox/templates/firefox/all-unified.html b/bedrock/firefox/templates/firefox/all-unified.html
index ab968cbfc95..243fce3575c 100644
--- a/bedrock/firefox/templates/firefox/all-unified.html
+++ b/bedrock/firefox/templates/firefox/all-unified.html
@@ -158,7 +158,7 @@ <h1 class="c-intro-heading">{{ ftl('firefox-all-choose-which-firefox') }}</h1>
             {{ ftl('firefox-all-sorry-we-couldnt-find') }}
           </p>
 
-          <a href="#all-downloads" id="download-button-primary" class="mzp-c-button mzp-t-product c-download-button" data-link-type="download" data-download-location="primary cta" data-testid="firefox-all-download-button">
+          <a href="#all-downloads" id="download-button-primary" class="mzp-c-button mzp-t-product c-download-button" data-link-type="download" data-cta-position="primary cta" data-testid="firefox-all-download-button">
             {{ ftl('download-button-download-now') }}
           </a>
 
diff --git a/bedrock/firefox/templates/firefox/browsers/chromebook.html b/bedrock/firefox/templates/firefox/browsers/chromebook.html
index a8730a0cd5d..9419bf8ee63 100644
--- a/bedrock/firefox/templates/firefox/browsers/chromebook.html
+++ b/bedrock/firefox/templates/firefox/browsers/chromebook.html
@@ -49,13 +49,13 @@ <h1 class="mzp-u-title-xl">{{ ftl('browsers-chromebook-get-firefox-browser') }}<
     <h4 class="mzp-c-menu-list-title">{{ ftl('browsers-chromebook-dropdown-copy') }}</h4>
     <ul class="mzp-c-menu-list-list download-platform-list">
       <li class="mzp-c-menu-list-item">
-        <a href="{{ android_url }}" rel="external noopener" class="ga-product-download" data-link-type="download" data-display-name="Android" data-download-version="android" data-download-os="Android">
+        <a href="{{ android_url }}" rel="external noopener" class="ga-product-download" data-download-version="android" data-cta-text="Get Firefox for Android" data-cta-type="firefox_mobile" >
           {{ ftl('browsers-chromebook-browsers-chromebook-get-firefox-for') }}
           <p><small>{{ ftl('browsers-chromebook-x86-based-chromebook') }}</small></p>
         </a>
       </li>
       <li class="mzp-c-menu-list-item t-sumo">
-        <a href="https://support.mozilla.org/kb/run-firefox-chromeos?utm_source=www.mozilla.org-firefox-browsers-chromebook&amp;utm_medium=referral&amp;utm_campaign=seo" rel="external noopener" data-cta-text="Install Firefox for Chromebook" data-cta-type="link">
+        <a href="https://support.mozilla.org/kb/run-firefox-chromeos?utm_source=www.mozilla.org-firefox-browsers-chromebook&amp;utm_medium=referral&amp;utm_campaign=seo" rel="external noopener" data-cta-text="Install Firefox for Chromebook">
           {{ ftl('browsers-chromebook-get-firefox-desktop') }}
         </a>
       </li>
diff --git a/bedrock/firefox/templates/firefox/browsers/mobile/index.html b/bedrock/firefox/templates/firefox/browsers/mobile/index.html
index 23e186fdbb5..baa02063bc8 100644
--- a/bedrock/firefox/templates/firefox/browsers/mobile/index.html
+++ b/bedrock/firefox/templates/firefox/browsers/mobile/index.html
@@ -87,7 +87,7 @@ <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.androi
       <p>{{ ftl('browsers-mobile-infinitely-customizable-private') }}</p>
 
       <p id="android-download">
-        <a class="mzp-c-cta-link ga-product-download" href="{{ android_url }}" rel="external noopener" data-link-type="download" data-display-name="Download" data-download-version="android" data-download-os="Android">{{ ftl('browsers-mobile-download') }}</a>
+        <a class="mzp-c-cta-link ga-product-download" href="{{ android_url }}" rel="external noopener" data-cta-text="Download (Android)" data-cta-type="firefox_mobile">{{ ftl('browsers-mobile-download') }}</a>
       </p>
 
       <p><a class="mzp-c-cta-link ga-product-download" href="{{ url('firefox.browsers.mobile.android') }}" data-cta-type="link" data-cta-text="Android Learn More">{{ ftl('ui-learn-more') }}</a></p>
@@ -109,7 +109,7 @@ <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.ios')
       <p>{{ ftl('browsers-mobile-get-enhanced-tracking-protection') }}</p>
 
       <p id="ios-download">
-        <a class="mzp-c-cta-link ga-product-download" href="{{ ios_url }}" rel="external noopener" data-link-type="download" data-display-name="Download" data-download-version="ios" data-download-os="iOS">{{ ftl('browsers-mobile-download') }}</a>
+        <a class="mzp-c-cta-link ga-product-download" href="{{ ios_url }}" rel="external noopener" data-cta-text="Download (iOS)" data-cta-type="firefox_mobile">{{ ftl('browsers-mobile-download') }}</a>
       </p>
 
       <p><a class="mzp-c-cta-link ga-product-download" href="{{ url('firefox.browsers.mobile.ios') }}" data-cta-type="link" data-cta-text="iOS Learn More">{{ ftl('ui-learn-more') }}</a></p>
@@ -134,8 +134,8 @@ <h2 class="c-landing-grid-title"><a href="{{ url('firefox.browsers.mobile.focus'
       <div id="menu-focus-wrapper"  class="mzp-c-menu-list mzp-t-cta mzp-t-download">
         <h3 class="mzp-c-menu-list-title">{{ ftl('browsers-mobile-download') }}</h3>
         <ul class="mzp-c-menu-list-list" id="menu-mobile">
-          <li class="mzp-c-menu-list-item"><a href="{{ play_store_url('focus', 'firefox-browsers-mobile') }}" rel="external noopener" class="ga-product-download" data-link-type="download" data-display-name="Android" data-download-version="android" data-download-os="Android">{{ ftl('browsers-mobile-android') }}</a></li>
-          <li class="mzp-c-menu-list-item"><a href="{{ app_store_url('focus', 'firefox-browsers-mobile') }}" rel="external noopener" class="ga-product-download" data-link-type="download" data-display-name="iOS" data-download-version="ios" data-download-os="iOS">{{ ftl('browsers-mobile-ios') }}</a></li>
+          <li class="mzp-c-menu-list-item"><a href="{{ play_store_url('focus', 'firefox-browsers-mobile') }}" rel="external noopener" class="ga-product-download" data-cta-text="Download - Android (Focus)" data-cta-type="firefox_focus">{{ ftl('browsers-mobile-android') }}</a></li>
+          <li class="mzp-c-menu-list-item"><a href="{{ app_store_url('focus', 'firefox-browsers-mobile') }}" rel="external noopener" class="ga-product-download"data-cta-text="Download - iOS (Focus)" data-cta-type="firefox_focus">{{ ftl('browsers-mobile-ios') }}</a></li>
         </ul>
       </div>
 
diff --git a/bedrock/firefox/templates/firefox/enterprise/index.html b/bedrock/firefox/templates/firefox/enterprise/index.html
index 8b92f8696eb..6c9626e96a9 100644
--- a/bedrock/firefox/templates/firefox/enterprise/index.html
+++ b/bedrock/firefox/templates/firefox/enterprise/index.html
@@ -122,22 +122,22 @@ <h3 class="enterprise-download-title">{{ ftl('firefox-enterprise-windows-64-bit'
             <h4 class="mzp-c-menu-list-title" data-testid="firefox-enterprise-win64-menu-button">{{ ftl('firefox-enterprise-select-your-download') }}</h4>
             <ul class="mzp-c-menu-list-list download-platform-list">
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win64" data-display-name="Firefox" data-testid="firefox-enterprise-win64-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang={{ LANG }}" data-download-version="win64" data-cta-text="Win64 - Download - Firefox" data-testid="firefox-enterprise-win64-menu-link">
                   {{ ftl('firefox-enterprise-firefox-browser') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-msi-latest-ssl&os=win64&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win64-msi" data-display-name="Firefox" data-testid="firefox-enterprise-win64-msi-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-msi-latest-ssl&os=win64&lang={{ LANG }}" data-download-version="win64-msi" data-cta-text="Win64 - Download - Firefox MSI" data-testid="firefox-enterprise-win64-msi-menu-link">
                   {{ ftl('firefox-enterprise-firefox-browser-msi-installer') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win64&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win64" data-display-name="Firefox Extended Support Release" data-testid="firefox-enterprise-win64-esr-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win64&lang={{ LANG }}" data-download-version="win64" data-cta-text="Win64 - Download - Firefox ESR" data-testid="firefox-enterprise-win64-esr-menu-link">
                   {{ ftl('firefox-enterprise-firefox-extended-support-release') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-msi-latest-ssl&os=win64&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win64-msi" data-display-name="Firefox Extended Support Release" data-testid="firefox-enterprise-win64-esr-msi-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-msi-latest-ssl&os=win64&lang={{ LANG }}" data-download-version="win64-msi" data-cta-text="Win64 - Download - Firefox ESR MSI" data-testid="firefox-enterprise-win64-esr-msi-menu-link">
                   {{ ftl('firefox-enterprise-firefox-extended-support-release-msi') }}
                 </a>
               </li>
@@ -165,12 +165,12 @@ <h3 class="enterprise-download-title">{{ ftl('firefox-enterprise-macos') }}</h3>
             <h4 class="mzp-c-menu-list-title" data-testid="firefox-enterprise-mac-menu-button">{{ ftl('firefox-enterprise-select-your-download') }}</h4>
             <ul class="mzp-c-menu-list-list download-platform-list">
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=osx&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="osx" data-display-name="Firefox" data-testid="firefox-enterprise-mac-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=osx&lang={{ LANG }}" data-download-version="osx" data-cta-text="MacOS - Download - Firefox" data-testid="firefox-enterprise-mac-menu-link">
                   {{ ftl('firefox-enterprise-firefox-browser') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=osx&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="osx" data-display-name="Firefox Extended Support Release" data-testid="firefox-enterprise-mac-esr-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=osx&lang={{ LANG }}" data-download-version="osx" data-cta-text="MacOS - Download - Firefox ESR" data-testid="firefox-enterprise-mac-esr-menu-link">
                   {{ ftl('firefox-enterprise-firefox-extended-support-release') }}
                 </a>
               </li>
@@ -197,22 +197,22 @@ <h3 class="enterprise-download-title">{{ ftl('firefox-enterprise-windows-32-bit'
             <h4 class="mzp-c-menu-list-title" data-testid="firefox-enterprise-win32-menu-button">{{ ftl('firefox-enterprise-select-your-download') }}</h4>
             <ul class="mzp-c-menu-list-list download-platform-list">
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win" data-display-name="Firefox" data-testid="firefox-enterprise-win32-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win&lang={{ LANG }}" data-download-version="win" data-cta-text="Win32 - Download - Firefox" data-testid="firefox-enterprise-win32-menu-link">
                   {{ ftl('firefox-enterprise-firefox-browser') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-msi-latest-ssl&os=win&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win-msi" data-display-name="Firefox" data-testid="firefox-enterprise-win32-msi-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-msi-latest-ssl&os=win&lang={{ LANG }}" data-download-version="win-msi" data-cta-text="Win32 - Download - Firefox MSI" data-testid="firefox-enterprise-win32-msi-menu-link">
                   {{ ftl('firefox-enterprise-firefox-browser-msi-installer') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win" data-display-name="Firefox Extended Support Release" data-testid="firefox-enterprise-win32-esr-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win&lang={{ LANG }}" data-download-version="win" data-cta-text="Win32 - Download - Firefox ESR" data-testid="firefox-enterprise-win32-esr-menu-link">
                   {{ ftl('firefox-enterprise-firefox-extended-support-release') }}
                 </a>
               </li>
               <li class="mzp-c-menu-list-item">
-                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-msi-latest-ssl&os=win&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win-msi" data-display-name="Firefox Extended Support Release" data-testid="firefox-enterprise-win32-esr-msi-menu-link">
+                <a class="download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-msi-latest-ssl&os=win&lang={{ LANG }}" data-download-version="win-msi" data-cta-text="Win32 - Download - Firefox ESR MSI" data-testid="firefox-enterprise-win32-esr-msi-menu-link">
                   {{ ftl('firefox-enterprise-firefox-extended-support-release-msi') }}
                 </a>
               </li>
diff --git a/bedrock/firefox/templates/firefox/includes/download-button-thanks.html b/bedrock/firefox/templates/firefox/includes/download-button-thanks.html
index 38e22c505e7..c3a07d5c3c2 100644
--- a/bedrock/firefox/templates/firefox/includes/download-button-thanks.html
+++ b/bedrock/firefox/templates/firefox/includes/download-button-thanks.html
@@ -8,9 +8,9 @@
   <a href="{{ transition_url }}"
      class="download-link c-button-download-thanks-link mzp-c-button mzp-t-product {% if button_class %}{{ button_class }}{% else %}mzp-t-xl{% endif %}"
      data-direct-link="{{ download_link_direct }}"
-     data-link-type="download"
      data-testid="{{ id }}"
-     {% if download_location %}data-download-location="{{ download_location }}"{% endif %}>
+     data-cta-text="Download Firefox"
+     {% if download_location %}data-cta-position="{{ download_location }}"{% endif %}>
     {% if alt_copy %}
       {{ alt_copy }}
     {% else %}
diff --git a/bedrock/firefox/templates/firefox/includes/download-button.html b/bedrock/firefox/templates/firefox/includes/download-button.html
index e00480bde2a..bed229b6365 100644
--- a/bedrock/firefox/templates/firefox/includes/download-button.html
+++ b/bedrock/firefox/templates/firefox/includes/download-button.html
@@ -21,11 +21,11 @@
       {% for plat in builds -%}
         <li><a href="{{ plat.download_link_direct or plat.download_link }}"
                class="download-link mzp-c-button mzp-t-product ga-product-download"
-               data-link-type="download"
                data-download-version="{{ plat.os }}"
-               {% if plat.os == 'android' %}data-download-os="Android"
-               {% elif plat.os == 'ios' %}data-download-os="iOS"
-               {% else %}data-download-os="Desktop"{% endif %}>{{ plat.os_arch_pretty or plat.os_pretty }}</a>
+               data-cta-text="Download Firefox for {{ plat.os_arch_pretty or plat.os_pretty }}"
+               {% if plat.os == 'android' %}data-cta-type="firefox_mobile"
+               {% elif plat.os == 'ios' %}data-cta-type="firefox_mobile"
+               {% else %}data-cta-type="firefox"{% endif %}>{{ plat.os_arch_pretty or plat.os_pretty }}</a>
         </li>
       {%- endfor %}
     </ul>
@@ -61,14 +61,13 @@
            id="{{ id }}-{{ plat.os }}"
            href="{{ plat.download_link }}"{% if plat.download_link_direct %}
            data-direct-link="{{ plat.download_link_direct }}"{% endif %}
-           data-link-type="download"
-           data-display-name="{{ plat.os_arch_pretty or plat.os_pretty }}"
            data-download-version="{{ plat.os }}"
+           data-cta-text="Download Firefox for {{ plat.os_arch_pretty or plat.os_pretty }}"
            data-testid="{{ id }}-{{ plat.os }}"
-           {% if plat.os == 'android' %}data-download-os="Android"
-           {% elif plat.os == 'ios' %}data-download-os="iOS"
-           {% else %}data-download-os="Desktop"{% endif %}
-           {% if download_location %}data-download-location="{{ download_location }}"{% endif %}>
+           {% if plat.os == 'android' %}data-cta-type="firefox_mobile"
+           {% elif plat.os == 'ios' %}data-cta-type="firefox_mobile"
+           {% else %}data-cta-type="firefox"{% endif %}
+           {% if download_location %}data-cta-position="{{ download_location }}"{% endif %}>
           <strong class="download-title">
             {% if alt_copy and 'linux' not in plat.os %}
               {{ alt_copy }}
diff --git a/bedrock/firefox/templates/firefox/includes/download-list.html b/bedrock/firefox/templates/firefox/includes/download-list.html
index e640d07d7e6..322dbb1a605 100644
--- a/bedrock/firefox/templates/firefox/includes/download-list.html
+++ b/bedrock/firefox/templates/firefox/includes/download-list.html
@@ -11,9 +11,9 @@
         <li class="os_{{ plat.os }}{% if plat.arch %} {{ plat.arch }}{% endif %}">
           <a href="{{ plat.download_link_direct or plat.download_link }}"
             class="download-link"
-            data-link-type="download"
             data-download-version="{{ plat.os }}"
-            data-download-os="Desktop">{{ plat.os_arch_pretty or plat.os_pretty }}</a>
+            data-cta-text="Download Firefox for {{ plat.os_arch_pretty or plat.os_pretty }}"
+            data-cta-type="firefox">{{ plat.os_arch_pretty or plat.os_pretty }}</a>
         </li>
       {%- endfor %}
     </ul>
diff --git a/bedrock/firefox/templates/firefox/includes/download-unsupported.html b/bedrock/firefox/templates/firefox/includes/download-unsupported.html
index 429c8d6511a..0c00159b97c 100644
--- a/bedrock/firefox/templates/firefox/includes/download-unsupported.html
+++ b/bedrock/firefox/templates/firefox/includes/download-unsupported.html
@@ -19,12 +19,12 @@
   <p>{{ ftl('download-button-please-download-esr') }}</p>
   <div class="download-platform-list">
     <p>
-      <a class="mzp-c-button mzp-t-product download-link os_win64 ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win64&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win64" data-display-name="Firefox Extended Support Release">
+      <a class="mzp-c-button mzp-t-product download-link os_win64 ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win64&lang={{ LANG }}" data-cta-text="Download Firefox Extended Support Release 64-bit" data-cta-type="firefox">
         {{ ftl('download-firefox-esr-64') }}
       </a>
     </p>
     <p>
-      <a class="mzp-c-button mzp-t-product download-link os_win ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="win" data-display-name="Firefox Extended Support Release">
+      <a class="mzp-c-button mzp-t-product download-link os_win ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=win&lang={{ LANG }}" data-cta-text="Download Firefox Extended Support Release 32-bit" data-cta-type="firefox">
         {{ ftl('download-firefox-esr-32') }}
       </a>
     </p>
@@ -42,7 +42,7 @@
   <p>{{ ftl('download-button-please-download-esr') }}</p>
 
   <div class="download-platform-list">
-    <a class="mzp-c-button mzp-t-product download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=osx&lang={{ LANG }}" data-link-type="download" data-download-os="Desktop" data-download-version="osx" data-display-name="Firefox Extended Support Release">
+    <a class="mzp-c-button mzp-t-product download-link ga-product-download" href="https://download.mozilla.org/?product=firefox-esr-latest-ssl&os=osx&lang={{ LANG }}" data-cta-text="Firefox Extended Support Release MacOS" data-cta-type="firefox">
       {{ ftl('download-firefox-esr') }}
     </a>
   </div>
diff --git a/bedrock/firefox/templates/firefox/includes/macros.html b/bedrock/firefox/templates/firefox/includes/macros.html
index 7b85cd98128..3a14d3d4549 100644
--- a/bedrock/firefox/templates/firefox/includes/macros.html
+++ b/bedrock/firefox/templates/firefox/includes/macros.html
@@ -9,7 +9,14 @@
   {% set os = 'win' if build == '32' else 'win64' %}
   <div class="firefox-platform-button-windows">
     <div class="firefox-platform-button">
-      <a class="download-link {{ class_name }} mzp-t-xl mzp-c-button mzp-t-product ga-product-download" id="{{ id }}" href="{{ settings.BOUNCER_URL }}?product=firefox-stub&os={{ os }}&lang={{ LANG }}" data-link-type="download" data-display-name="Windows {{ build }}-bit" data-download-version="{{ os }}" data-download-os="Desktop" data-download-location="{{ position }}">
+      <a class="download-link {{ class_name }} mzp-t-xl mzp-c-button mzp-t-product ga-product-download"
+        id="{{ id }}"
+        href="{{ settings.BOUNCER_URL }}?product=firefox-stub&os={{ os }}&lang={{ LANG }}"
+        data-download-version="{{ os }}"
+        data-cta-text="Download Now"
+        data-cta-type="firefox"
+        data-cta-position="{{ position }}"
+        >
         <strong class="download-title">
           {{ cta_copy }}
         </strong>
@@ -33,7 +40,13 @@
 {% macro firefox_download_desktop_button_mac(cta_copy=ftl('download-button-download-now'), id='download-button-desktop-release-osx', position='primary cta') -%}
   <div class="firefox-platform-button-mac">
     <div class="firefox-platform-button">
-      <a class="download-link os_osx mzp-t-xl mzp-c-button mzp-t-product ga-product-download" id="{{ id }}" href="{{ settings.BOUNCER_URL }}?product=firefox-latest-ssl&os=osx&lang={{ LANG }}" data-link-type="download" data-display-name="macOS" data-download-version="osx" data-download-os="Desktop" data-download-location="{{ position }}">
+      <a class="download-link os_osx mzp-t-xl mzp-c-button mzp-t-product ga-product-download"
+        id="{{ id }}" href="{{ settings.BOUNCER_URL }}?product=firefox-latest-ssl&os=osx&lang={{ LANG }}"
+        data-download-version="osx"
+        data-cta-text="Download Now"
+        data-cta-type="firefox"
+        data-cta-position="{{ position }}"
+        >
         <strong class="download-title">
           {{ cta_copy }}
         </strong>
@@ -57,13 +70,13 @@
 {% macro firefox_download_desktop_button_linux(cta_copy=ftl('download-button-download-now'), id='download-button-desktop-release-linux', position='primary cta') -%}
   <div class="firefox-platform-button-linux">
     <div class="firefox-platform-button">
-      <a class="download-link os_linux mzp-t-xl mzp-c-button mzp-t-product ga-product-download" id="{{ id }}" href="{{ settings.BOUNCER_URL }}?product=firefox-latest-ssl&os=linux&lang={{ LANG }}" data-link-type="download" data-display-name="Linux 32-bit" data-download-version="linux" data-download-os="Desktop" data-download-location="{{ position }}">
+      <a class="download-link os_linux mzp-t-xl mzp-c-button mzp-t-product ga-product-download" id="{{ id }}" href="{{ settings.BOUNCER_URL }}?product=firefox-latest-ssl&os=linux&lang={{ LANG }}" data-download-version="linux" data-cta-text="Download for Linux 32-bit" data-cta-position="{{ position }}">
         <strong class="download-title">
           {{ ftl('download-button-linux-32-v2') }}
         </strong>
       </a>
 
-      <a class="download-link os_linux64 mzp-t-xl mzp-c-button mzp-t-product ga-product-download" id="{{ id }}-64" href="{{ settings.BOUNCER_URL }}?product=firefox-latest-ssl&os=linux64&lang={{ LANG }}" data-link-type="download" data-display-name="Linux 64-bit" data-download-version="linux64" data-download-os="Desktop" data-download-location="{{ position }}">
+      <a class="download-link os_linux64 mzp-t-xl mzp-c-button mzp-t-product ga-product-download" id="{{ id }}-64" href="{{ settings.BOUNCER_URL }}?product=firefox-latest-ssl&os=linux64&lang={{ LANG }}" data-download-version="linux64" data-cta-text="Download for Linux 64-bit" data-cta-position="{{ position }}">
         <strong class="download-title">
           {{ ftl('download-button-linux-64-v2') }}
         </strong>
diff --git a/bedrock/firefox/templates/firefox/index.html b/bedrock/firefox/templates/firefox/index.html
index 4d1ed68d665..ba451623fe0 100644
--- a/bedrock/firefox/templates/firefox/index.html
+++ b/bedrock/firefox/templates/firefox/index.html
@@ -85,7 +85,7 @@ <h2 class="c-landing-grid-title"><a href="{{ url('firefox.new') }}" data-cta-typ
         <![endif]-->
         <!--[if !IE]><!-->
           {# Download link should be locale neutral see issue 7982 #}
-          <a id="qa-desktop-download" class="mzp-c-cta-link cta-download" href="/firefox/download/thanks/" data-link-type="Desktop" data-download-os="Desktop" data-download-version="standard" data-testid="firefox-desktop-download">{{ ftl('firefox-browsers-download-for-desktop') }}</a>
+          <a id="qa-desktop-download" class="mzp-c-cta-link cta-download" href="/firefox/download/thanks/" data-cta-text="Download for Desktop" data-cta-type="firefox" data-download-version="standard" data-testid="firefox-desktop-download">{{ ftl('firefox-browsers-download-for-desktop') }}</a>
         <!--<![endif]-->
       </p>
 
@@ -116,8 +116,8 @@ <h2 class="c-landing-grid-title "><a class="mzp-c-cta-link" href="{{ url('firefo
       <div id="menu-mobile-wrapper"  class="mzp-c-menu-list mzp-t-cta mzp-t-download">
         <h3 class="mzp-c-menu-list-title" data-testid="firefox-mobile-download-menu-button">{{ ftl('firefox-browsers-download-for-mobile') }}</h3>
         <ul class="mzp-c-menu-list-list" id="menu-mobile">
-          <li class="mzp-c-menu-list-item"><a href="{{ android_url }}" rel="external noopener" class="ga-product-download" data-link-type="download" data-display-name="Android" data-download-version="android" data-download-os="Android" data-testid="firefox-android-menu-link">{{ ftl('firefox-browsers-android') }}</a></li>
-          <li class="mzp-c-menu-list-item"><a href="{{ ios_url }}" rel="external noopener" class="ga-product-download" data-link-type="download" data-display-name="iOS" data-download-version="ios" data-download-os="iOS" data-testid="firefox-ios-menu-link">{{ ftl('firefox-browsers-ios') }}</a></li>
+          <li class="mzp-c-menu-list-item"><a href="{{ android_url }}" rel="external noopener" class="ga-product-download" data-download-version="android" data-cta-text="Download for Mobile - Android" data-cta-type="firefox_mobile" data-testid="firefox-android-menu-link">{{ ftl('firefox-browsers-android') }}</a></li>
+          <li class="mzp-c-menu-list-item"><a href="{{ ios_url }}" rel="external noopener" class="ga-product-download" data-download-version="ios" data-cta-text="Download for Mobile - iOS" data-cta-type="firefox_mobile" data-testid="firefox-ios-menu-link">{{ ftl('firefox-browsers-ios') }}</a></li>
           <li class="mzp-c-menu-list-item t-getapp"><a href="{{ url('firefox.browsers.mobile.get-app') }}" data-cta-type="link" data-cta-text="Get App Mobile">{{ ftl('firefox-browsers-send-me-a-link') }}</a></li>
         </ul>
       </div>
diff --git a/bedrock/firefox/tests/test_helpers.py b/bedrock/firefox/tests/test_helpers.py
index 16d129fd4cd..5c6002776f2 100644
--- a/bedrock/firefox/tests/test_helpers.py
+++ b/bedrock/firefox/tests/test_helpers.py
@@ -129,7 +129,7 @@ def test_download_location_attribute(self):
 
         for link in links:
             link = pq(link)
-            assert link.attr("data-download-location") == "primary cta"
+            assert link.attr("data-cta-position") == "primary cta"
 
         doc = pq(render("{{ download_firefox() }}", {"request": get_request, "fluent_l10n": self.get_l10n(get_request.locale)}))
 
@@ -137,7 +137,7 @@ def test_download_location_attribute(self):
 
         for link in links[1:5]:
             link = pq(link)
-            assert link.attr("data-download-location") is None
+            assert link.attr("data-cta-position") is None
 
     def test_download_nosnippet_attribute(self):
         """
@@ -339,7 +339,7 @@ def test_download_firefox_thanks_button(self):
 
         assert href == "/firefox/download/thanks/"
         assert button.attr("id") == "download-button-thanks"
-        assert link.attr("data-link-type") == "download"
+        assert link.attr("data-cta-text") == "Download Firefox"
 
         # Direct attribute for legacy IE browsers should always be win 32bit
         assert link.attr("data-direct-link") == f"{settings.BOUNCER_URL}?product=firefox-stub&os=win&lang=en-US"
@@ -368,7 +368,7 @@ def test_download_firefox_thanks_attributes(self):
 
         assert href == "/en-US/firefox/download/thanks/"
         assert button.attr("id") == "test-download"
-        assert link.attr("data-download-location") == "primary cta"
+        assert link.attr("data-cta-position") == "primary cta"
         assert "test-css-class" in link.attr("class")
 
 
diff --git a/bedrock/firefox/tests/test_views.py b/bedrock/firefox/tests/test_views.py
index accd99a0f63..1833a90e75c 100644
--- a/bedrock/firefox/tests/test_views.py
+++ b/bedrock/firefox/tests/test_views.py
@@ -507,17 +507,14 @@ class TestFirefoxGA(TestCase):
     def assert_ga_attr(self, response):
         doc = pq(response.content)
         links = doc(".mzp-c-button")
+        # test buttons all have appropriate attribute to trigger tracking in GA
         for link in links.items():
-            cta_data = link.attr("data-cta-type")
-            cta_link = link.attr("data-link-type")
-            if cta_data:
-                contains_cta = any(cta_data in item for item in ["link", "button"])
-                assert contains_cta or "fxa-" in cta_data
-            elif cta_link:
-                cta_link_types = ["download", "button", "link"]
-                assert cta_link in cta_link_types
+            cta_text = link.attr("data-cta-text")
+            link_text = link.attr("data-link-text")
+            if cta_text or link_text:
+                assert True
             else:
-                assert False, f"{link} does not contain attr cta-type or link-type"
+                assert False, f"{link} does not contain attr data-cta-text or data-link-text"
 
     def test_firefox_home_GA(self):
         req = RequestFactory().get("/en-US/firefox/")
diff --git a/bedrock/mozorg/templates/mozorg/analytics-tests/ga-index.html b/bedrock/mozorg/templates/mozorg/analytics-tests/ga-index.html
index ab36d4276de..775bfe4360a 100644
--- a/bedrock/mozorg/templates/mozorg/analytics-tests/ga-index.html
+++ b/bedrock/mozorg/templates/mozorg/analytics-tests/ga-index.html
@@ -12,8 +12,8 @@
 {% block content %}
 <main class="mzp-l-content">
   <p>This file is used only for automated testing for google tag manager</p>
-  <button class="mzp-c-button mzp-t-product" data-link-type="download-test" data-download-os="Desktop" data-download-location="test">download firefox</button>
-  <button class="mzp-c-button" data-cta-type="button-test" data-cta-text="click here to test" data-download-location="test">click here to test</button>
+  <button class="mzp-c-button mzp-t-product" data-link-type="download-test" data-cta-type="firefox" data-cta-position="test">download firefox</button>
+  <button class="mzp-c-button" data-cta-type="button-test" data-cta-text="click here to test" data-cta-position="test">click here to test</button>
   <button class="mzp-c-button" data-cta-type="fxa-sync-test" data-cta-text="fxa-button" data-cta-position="test">fxa button</button>
 </main>
 {% endblock %}
diff --git a/firefox/tests/test_views.py::TestFirefoxGA::test_firefox_new_GA b/firefox/tests/test_views.py::TestFirefoxGA::test_firefox_new_GA
new file mode 100644
index 00000000000..450b31da0a0
--- /dev/null
+++ b/firefox/tests/test_views.py::TestFirefoxGA::test_firefox_new_GA
@@ -0,0 +1,770 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title id="head-title">test_views.py::TestFirefoxGA::test_firefox_new_GA</title>
+      <link href="assets/style.css" rel="stylesheet" type="text/css"/>
+  </head>
+  <body>
+    <h1 id="title">test_views.py::TestFirefoxGA::test_firefox_new_GA</h1>
+    <p>Report generated on 22-Aug-2024 at 09:27:46 by <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a>
+        v4.1.1</p>
+    <div id="environment-header">
+      <h2>Environment</h2>
+    </div>
+    <table id="environment"></table>
+    <!-- TEMPLATES -->
+      <template id="template_environment_row">
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+    </template>
+    <template id="template_results-table__body--empty">
+      <tbody class="results-table-row">
+        <tr id="not-found-message">
+          <td colspan="4">No results found. Check the filters.</th>
+        </tr>
+    </template>
+    <template id="template_results-table__tbody">
+      <tbody class="results-table-row">
+        <tr class="collapsible">
+        </tr>
+        <tr class="extras-row">
+          <td class="extra" colspan="4">
+            <div class="extraHTML"></div>
+            <div class="media">
+              <div class="media-container">
+                  <div class="media-container__nav--left"><</div>
+                  <div class="media-container__viewport">
+                    <img src="" />
+                    <video controls>
+                      <source src="" type="video/mp4">
+                    </video>
+                  </div>
+                  <div class="media-container__nav--right">></div>
+                </div>
+                <div class="media__name"></div>
+                <div class="media__counter"></div>
+            </div>
+            <div class="logwrapper">
+              <div class="logexpander"></div>
+              <div class="log"></div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </template>
+    <!-- END TEMPLATES -->
+    <div class="summary">
+      <div class="summary__data">
+        <h2>Summary</h2>
+        <div class="additional-summary prefix">
+        </div>
+        <p class="run-count">0 test took 0 ms.</p>
+        <p class="filter">(Un)check the boxes to filter the results.</p>
+        <div class="summary__reload">
+          <div class="summary__reload__button hidden" onclick="location.reload()">
+            <div>There are still tests running. <br />Reload this page to get the latest results!</div>
+          </div>
+        </div>
+        <div class="summary__spacer"></div>
+        <div class="controls">
+          <div class="filters">
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="failed" disabled/>
+            <span class="failed">0 Failed,</span>
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="passed" disabled/>
+            <span class="passed">0 Passed,</span>
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="skipped" disabled/>
+            <span class="skipped">0 Skipped,</span>
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="xfailed" disabled/>
+            <span class="xfailed">0 Expected failures,</span>
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="xpassed" disabled/>
+            <span class="xpassed">0 Unexpected passes,</span>
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="error" />
+            <span class="error">1 Errors,</span>
+            <input checked="true" class="filter" name="filter_checkbox" type="checkbox" data-test-result="rerun" disabled/>
+            <span class="rerun">0 Reruns</span>
+          </div>
+          <div class="collapse">
+            <button id="show_all_details">Show all details</button>&nbsp;/&nbsp;<button id="hide_all_details">Hide all details</button>
+          </div>
+        </div>
+      </div>
+      <div class="additional-summary summary">
+      </div>
+      <div class="additional-summary postfix">
+      </div>
+    </div>
+    <table id="results-table">
+      <thead id="results-table-head">
+        <tr>
+          <th class="sortable" data-column-type="result">Result</th>
+          <th class="sortable" data-column-type="testId">Test</th>
+          <th class="sortable" data-column-type="duration">Duration</th>
+          <th>Links</th>
+        </tr>
+      </thead>
+    </table>
+  </body>
+  <footer>
+    <div id="data-container" data-jsonblob="{&#34;environment&#34;: {&#34;Python&#34;: &#34;3.11.8&#34;, &#34;Platform&#34;: &#34;macOS-14.5-arm64-arm-64bit&#34;, &#34;Packages&#34;: {&#34;pytest&#34;: &#34;7.4.4&#34;, &#34;pluggy&#34;: &#34;1.5.0&#34;}, &#34;Plugins&#34;: {&#34;selenium&#34;: &#34;4.0.1&#34;, &#34;Faker&#34;: &#34;26.0.0&#34;, &#34;markus&#34;: &#34;5.0.0&#34;, &#34;datadir&#34;: &#34;1.5.0&#34;, &#34;cov&#34;: &#34;5.0.0&#34;, &#34;variables&#34;: &#34;3.1.0&#34;, &#34;html&#34;: &#34;4.1.1&#34;, &#34;parallel&#34;: &#34;0.1.1&#34;, &#34;metadata&#34;: &#34;3.1.1&#34;, &#34;rerunfailures&#34;: &#34;14.0&#34;, &#34;anyio&#34;: &#34;4.4.0&#34;, &#34;django&#34;: &#34;4.8.0&#34;, &#34;base-url&#34;: &#34;2.1.0&#34;, &#34;mock&#34;: &#34;3.14.0&#34;}, &#34;Base URL&#34;: &#34;http://localhost:8000&#34;, &#34;Driver&#34;: &#34;Firefox&#34;, &#34;Capabilities&#34;: {}}, &#34;tests&#34;: {&#34;&#34;: [{&#34;extras&#34;: [], &#34;result&#34;: &#34;Error&#34;, &#34;testId&#34;: &#34;::collect&#34;, &#34;duration&#34;: &#34;0 ms&#34;, &#34;resultsTableRow&#34;: [&#34;&lt;td class=\&#34;col-result\&#34;&gt;Error&lt;/td&gt;&#34;, &#34;&lt;td class=\&#34;col-testId\&#34;&gt;::collect&lt;/td&gt;&#34;, &#34;&lt;td class=\&#34;col-duration\&#34;&gt;0 ms&lt;/td&gt;&#34;, &#34;&lt;td class=\&#34;col-links\&#34;&gt;&lt;/td&gt;&#34;], &#34;log&#34;: &#34;../../.pyenv/versions/3.11.8/lib/python3.11/importlib/__init__.py:126: in import_module\n    return _bootstrap._gcd_import(name[level:], package, level)\n&amp;lt;frozen importlib._bootstrap&amp;gt;:1204: in _gcd_import\n    ???\n&amp;lt;frozen importlib._bootstrap&amp;gt;:1176: in _find_and_load\n    ???\n&amp;lt;frozen importlib._bootstrap&amp;gt;:1147: in _find_and_load_unlocked\n    ???\n&amp;lt;frozen importlib._bootstrap&amp;gt;:690: in _load_unlocked\n    ???\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/_pytest/assertion/rewrite.py:186: in exec_module\n    exec(co, module.__dict__)\nbedrock/cms/tests/conftest.py:6: in &amp;lt;module&amp;gt;\n    import wagtail_factories\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/wagtail_factories/__init__.py:1: in &amp;lt;module&amp;gt;\n    from .blocks import *  # noqa\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/wagtail_factories/blocks.py:5: in &amp;lt;module&amp;gt;\n    from wagtail import blocks\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/wagtail/blocks/__init__.py:2: in &amp;lt;module&amp;gt;\n    from .base import *  # NOQA: F403\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/wagtail/blocks/base.py:19: in &amp;lt;module&amp;gt;\n    from wagtail.admin.staticfiles import versioned_static\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/wagtail/admin/staticfiles.py:15: in &amp;lt;module&amp;gt;\n    use_version_strings = settings.WAGTAILADMIN_STATIC_FILE_VERSION_STRINGS\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/django/conf/__init__.py:102: in __getattr__\n    self._setup(name)\n../../.pyenv/versions/3.11.8/envs/bedrock/lib/python3.11/site-packages/django/conf/__init__.py:82: in _setup\n    raise ImproperlyConfigured(\nE   django.core.exceptions.ImproperlyConfigured: Requested setting WAGTAILADMIN_STATIC_FILE_VERSION_STRINGS, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_MODULE or call settings.configure() before accessing settings.\n&#34;}]}, &#34;renderCollapsed&#34;: [&#34;passed&#34;], &#34;initialSort&#34;: &#34;result&#34;, &#34;title&#34;: &#34;test_views.py::TestFirefoxGA::test_firefox_new_GA&#34;}"></div>
+    <script>
+      (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+const { getCollapsedCategory, setCollapsedIds } = require('./storage.js')
+
+class DataManager {
+    setManager(data) {
+        const collapsedCategories = [...getCollapsedCategory(data.renderCollapsed)]
+        const collapsedIds = []
+        const tests = Object.values(data.tests).flat().map((test, index) => {
+            const collapsed = collapsedCategories.includes(test.result.toLowerCase())
+            const id = `test_${index}`
+            if (collapsed) {
+                collapsedIds.push(id)
+            }
+            return {
+                ...test,
+                id,
+                collapsed,
+            }
+        })
+        const dataBlob = { ...data, tests }
+        this.data = { ...dataBlob }
+        this.renderData = { ...dataBlob }
+        setCollapsedIds(collapsedIds)
+    }
+
+    get allData() {
+        return { ...this.data }
+    }
+
+    resetRender() {
+        this.renderData = { ...this.data }
+    }
+
+    setRender(data) {
+        this.renderData.tests = [...data]
+    }
+
+    toggleCollapsedItem(id) {
+        this.renderData.tests = this.renderData.tests.map((test) =>
+            test.id === id ? { ...test, collapsed: !test.collapsed } : test,
+        )
+    }
+
+    set allCollapsed(collapsed) {
+        this.renderData = { ...this.renderData, tests: [...this.renderData.tests.map((test) => (
+            { ...test, collapsed }
+        ))] }
+    }
+
+    get testSubset() {
+        return [...this.renderData.tests]
+    }
+
+    get environment() {
+        return this.renderData.environment
+    }
+
+    get initialSort() {
+        return this.data.initialSort
+    }
+}
+
+module.exports = {
+    manager: new DataManager(),
+}
+
+},{"./storage.js":8}],2:[function(require,module,exports){
+const mediaViewer = require('./mediaviewer.js')
+const templateEnvRow = document.getElementById('template_environment_row')
+const templateResult = document.getElementById('template_results-table__tbody')
+
+function htmlToElements(html) {
+    const temp = document.createElement('template')
+    temp.innerHTML = html
+    return temp.content.childNodes
+}
+
+const find = (selector, elem) => {
+    if (!elem) {
+        elem = document
+    }
+    return elem.querySelector(selector)
+}
+
+const findAll = (selector, elem) => {
+    if (!elem) {
+        elem = document
+    }
+    return [...elem.querySelectorAll(selector)]
+}
+
+const dom = {
+    getStaticRow: (key, value) => {
+        const envRow = templateEnvRow.content.cloneNode(true)
+        const isObj = typeof value === 'object' && value !== null
+        const values = isObj ? Object.keys(value).map((k) => `${k}: ${value[k]}`) : null
+
+        const valuesElement = htmlToElements(
+            values ? `<ul>${values.map((val) => `<li>${val}</li>`).join('')}<ul>` : `<div>${value}</div>`)[0]
+        const td = findAll('td', envRow)
+        td[0].textContent = key
+        td[1].appendChild(valuesElement)
+
+        return envRow
+    },
+    getResultTBody: ({ testId, id, log, extras, resultsTableRow, tableHtml, result, collapsed }) => {
+        const resultBody = templateResult.content.cloneNode(true)
+        resultBody.querySelector('tbody').classList.add(result.toLowerCase())
+        resultBody.querySelector('tbody').id = testId
+        resultBody.querySelector('.collapsible').dataset.id = id
+
+        resultsTableRow.forEach((html) => {
+            const t = document.createElement('template')
+            t.innerHTML = html
+            resultBody.querySelector('.collapsible').appendChild(t.content)
+        })
+
+        if (log) {
+            // Wrap lines starting with "E" with span.error to color those lines red
+            const wrappedLog = log.replace(/^E.*$/gm, (match) => `<span class="error">${match}</span>`)
+            resultBody.querySelector('.log').innerHTML = wrappedLog
+        } else {
+            resultBody.querySelector('.log').remove()
+        }
+
+        if (collapsed) {
+            resultBody.querySelector('.collapsible > td')?.classList.add('collapsed')
+            resultBody.querySelector('.extras-row').classList.add('hidden')
+        } else {
+            resultBody.querySelector('.collapsible > td')?.classList.remove('collapsed')
+        }
+
+        const media = []
+        extras?.forEach(({ name, format_type, content }) => {
+            if (['image', 'video'].includes(format_type)) {
+                media.push({ path: content, name, format_type })
+            }
+
+            if (format_type === 'html') {
+                resultBody.querySelector('.extraHTML').insertAdjacentHTML('beforeend', `<div>${content}</div>`)
+            }
+        })
+        mediaViewer.setup(resultBody, media)
+
+        // Add custom html from the pytest_html_results_table_html hook
+        tableHtml?.forEach((item) => {
+            resultBody.querySelector('td[class="extra"]').insertAdjacentHTML('beforeend', item)
+        })
+
+        return resultBody
+    },
+}
+
+module.exports = {
+    dom,
+    htmlToElements,
+    find,
+    findAll,
+}
+
+},{"./mediaviewer.js":6}],3:[function(require,module,exports){
+const { manager } = require('./datamanager.js')
+const { doSort } = require('./sort.js')
+const storageModule = require('./storage.js')
+
+const getFilteredSubSet = (filter) =>
+    manager.allData.tests.filter(({ result }) => filter.includes(result.toLowerCase()))
+
+const doInitFilter = () => {
+    const currentFilter = storageModule.getVisible()
+    const filteredSubset = getFilteredSubSet(currentFilter)
+    manager.setRender(filteredSubset)
+}
+
+const doFilter = (type, show) => {
+    if (show) {
+        storageModule.showCategory(type)
+    } else {
+        storageModule.hideCategory(type)
+    }
+
+    const currentFilter = storageModule.getVisible()
+    const filteredSubset = getFilteredSubSet(currentFilter)
+    manager.setRender(filteredSubset)
+
+    const sortColumn = storageModule.getSort()
+    doSort(sortColumn, true)
+}
+
+module.exports = {
+    doFilter,
+    doInitFilter,
+}
+
+},{"./datamanager.js":1,"./sort.js":7,"./storage.js":8}],4:[function(require,module,exports){
+const { redraw, bindEvents, renderStatic } = require('./main.js')
+const { doInitFilter } = require('./filter.js')
+const { doInitSort } = require('./sort.js')
+const { manager } = require('./datamanager.js')
+const data = JSON.parse(document.getElementById('data-container').dataset.jsonblob)
+
+function init() {
+    manager.setManager(data)
+    doInitFilter()
+    doInitSort()
+    renderStatic()
+    redraw()
+    bindEvents()
+}
+
+init()
+
+},{"./datamanager.js":1,"./filter.js":3,"./main.js":5,"./sort.js":7}],5:[function(require,module,exports){
+const { dom, find, findAll } = require('./dom.js')
+const { manager } = require('./datamanager.js')
+const { doSort } = require('./sort.js')
+const { doFilter } = require('./filter.js')
+const {
+    getVisible,
+    getCollapsedIds,
+    setCollapsedIds,
+    getSort,
+    getSortDirection,
+    possibleFilters,
+} = require('./storage.js')
+
+const removeChildren = (node) => {
+    while (node.firstChild) {
+        node.removeChild(node.firstChild)
+    }
+}
+
+const renderStatic = () => {
+    const renderEnvironmentTable = () => {
+        const environment = manager.environment
+        const rows = Object.keys(environment).map((key) => dom.getStaticRow(key, environment[key]))
+        const table = document.getElementById('environment')
+        removeChildren(table)
+        rows.forEach((row) => table.appendChild(row))
+    }
+    renderEnvironmentTable()
+}
+
+const addItemToggleListener = (elem) => {
+    elem.addEventListener('click', ({ target }) => {
+        const id = target.parentElement.dataset.id
+        manager.toggleCollapsedItem(id)
+
+        const collapsedIds = getCollapsedIds()
+        if (collapsedIds.includes(id)) {
+            const updated = collapsedIds.filter((item) => item !== id)
+            setCollapsedIds(updated)
+        } else {
+            collapsedIds.push(id)
+            setCollapsedIds(collapsedIds)
+        }
+        redraw()
+    })
+}
+
+const renderContent = (tests) => {
+    const sortAttr = getSort(manager.initialSort)
+    const sortAsc = JSON.parse(getSortDirection())
+    const rows = tests.map(dom.getResultTBody)
+    const table = document.getElementById('results-table')
+    const tableHeader = document.getElementById('results-table-head')
+
+    const newTable = document.createElement('table')
+    newTable.id = 'results-table'
+
+    // remove all sorting classes and set the relevant
+    findAll('.sortable', tableHeader).forEach((elem) => elem.classList.remove('asc', 'desc'))
+    tableHeader.querySelector(`.sortable[data-column-type="${sortAttr}"]`)?.classList.add(sortAsc ? 'desc' : 'asc')
+    newTable.appendChild(tableHeader)
+
+    if (!rows.length) {
+        const emptyTable = document.getElementById('template_results-table__body--empty').content.cloneNode(true)
+        newTable.appendChild(emptyTable)
+    } else {
+        rows.forEach((row) => {
+            if (!!row) {
+                findAll('.collapsible td:not(.col-links', row).forEach(addItemToggleListener)
+                find('.logexpander', row).addEventListener('click',
+                    (evt) => evt.target.parentNode.classList.toggle('expanded'),
+                )
+                newTable.appendChild(row)
+            }
+        })
+    }
+
+    table.replaceWith(newTable)
+}
+
+const renderDerived = () => {
+    const currentFilter = getVisible()
+    possibleFilters.forEach((result) => {
+        const input = document.querySelector(`input[data-test-result="${result}"]`)
+        input.checked = currentFilter.includes(result)
+    })
+}
+
+const bindEvents = () => {
+    const filterColumn = (evt) => {
+        const { target: element } = evt
+        const { testResult } = element.dataset
+
+        doFilter(testResult, element.checked)
+        const collapsedIds = getCollapsedIds()
+        const updated = manager.renderData.tests.map((test) => {
+            return {
+                ...test,
+                collapsed: collapsedIds.includes(test.id),
+            }
+        })
+        manager.setRender(updated)
+        redraw()
+    }
+
+    const header = document.getElementById('environment-header')
+    header.addEventListener('click', () => {
+        const table = document.getElementById('environment')
+        table.classList.toggle('hidden')
+        header.classList.toggle('collapsed')
+    })
+
+    findAll('input[name="filter_checkbox"]').forEach((elem) => {
+        elem.addEventListener('click', filterColumn)
+    })
+
+    findAll('.sortable').forEach((elem) => {
+        elem.addEventListener('click', (evt) => {
+            const { target: element } = evt
+            const { columnType } = element.dataset
+            doSort(columnType)
+            redraw()
+        })
+    })
+
+    document.getElementById('show_all_details').addEventListener('click', () => {
+        manager.allCollapsed = false
+        setCollapsedIds([])
+        redraw()
+    })
+    document.getElementById('hide_all_details').addEventListener('click', () => {
+        manager.allCollapsed = true
+        const allIds = manager.renderData.tests.map((test) => test.id)
+        setCollapsedIds(allIds)
+        redraw()
+    })
+}
+
+const redraw = () => {
+    const { testSubset } = manager
+
+    renderContent(testSubset)
+    renderDerived()
+}
+
+module.exports = {
+    redraw,
+    bindEvents,
+    renderStatic,
+}
+
+},{"./datamanager.js":1,"./dom.js":2,"./filter.js":3,"./sort.js":7,"./storage.js":8}],6:[function(require,module,exports){
+class MediaViewer {
+    constructor(assets) {
+        this.assets = assets
+        this.index = 0
+    }
+
+    nextActive() {
+        this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1
+        return [this.activeFile, this.index]
+    }
+
+    prevActive() {
+        this.index = this.index === 0 ? this.assets.length - 1 : this.index -1
+        return [this.activeFile, this.index]
+    }
+
+    get currentIndex() {
+        return this.index
+    }
+
+    get activeFile() {
+        return this.assets[this.index]
+    }
+}
+
+
+const setup = (resultBody, assets) => {
+    if (!assets.length) {
+        resultBody.querySelector('.media').classList.add('hidden')
+        return
+    }
+
+    const mediaViewer = new MediaViewer(assets)
+    const container = resultBody.querySelector('.media-container')
+    const leftArrow = resultBody.querySelector('.media-container__nav--left')
+    const rightArrow = resultBody.querySelector('.media-container__nav--right')
+    const mediaName = resultBody.querySelector('.media__name')
+    const counter = resultBody.querySelector('.media__counter')
+    const imageEl = resultBody.querySelector('img')
+    const sourceEl = resultBody.querySelector('source')
+    const videoEl = resultBody.querySelector('video')
+
+    const setImg = (media, index) => {
+        if (media?.format_type === 'image') {
+            imageEl.src = media.path
+
+            imageEl.classList.remove('hidden')
+            videoEl.classList.add('hidden')
+        } else if (media?.format_type === 'video') {
+            sourceEl.src = media.path
+
+            videoEl.classList.remove('hidden')
+            imageEl.classList.add('hidden')
+        }
+
+        mediaName.innerText = media?.name
+        counter.innerText = `${index + 1} / ${assets.length}`
+    }
+    setImg(mediaViewer.activeFile, mediaViewer.currentIndex)
+
+    const moveLeft = () => {
+        const [media, index] = mediaViewer.prevActive()
+        setImg(media, index)
+    }
+    const doRight = () => {
+        const [media, index] = mediaViewer.nextActive()
+        setImg(media, index)
+    }
+    const openImg = () => {
+        window.open(mediaViewer.activeFile.path, '_blank')
+    }
+    if (assets.length === 1) {
+        container.classList.add('media-container--fullscreen')
+    } else {
+        leftArrow.addEventListener('click', moveLeft)
+        rightArrow.addEventListener('click', doRight)
+    }
+    imageEl.addEventListener('click', openImg)
+}
+
+module.exports = {
+    setup,
+}
+
+},{}],7:[function(require,module,exports){
+const { manager } = require('./datamanager.js')
+const storageModule = require('./storage.js')
+
+const genericSort = (list, key, ascending, customOrder) => {
+    let sorted
+    if (customOrder) {
+        sorted = list.sort((a, b) => {
+            const aValue = a.result.toLowerCase()
+            const bValue = b.result.toLowerCase()
+
+            const aIndex = customOrder.findIndex((item) => item.toLowerCase() === aValue)
+            const bIndex = customOrder.findIndex((item) => item.toLowerCase() === bValue)
+
+            // Compare the indices to determine the sort order
+            return aIndex - bIndex
+        })
+    } else {
+        sorted = list.sort((a, b) => a[key] === b[key] ? 0 : a[key] > b[key] ? 1 : -1)
+    }
+
+    if (ascending) {
+        sorted.reverse()
+    }
+    return sorted
+}
+
+const durationSort = (list, ascending) => {
+    const parseDuration = (duration) => {
+        if (duration.includes(':')) {
+            // If it's in the format "HH:mm:ss"
+            const [hours, minutes, seconds] = duration.split(':').map(Number)
+            return (hours * 3600 + minutes * 60 + seconds) * 1000
+        } else {
+            // If it's in the format "nnn ms"
+            return parseInt(duration)
+        }
+    }
+    const sorted = list.sort((a, b) => parseDuration(a['duration']) - parseDuration(b['duration']))
+    if (ascending) {
+        sorted.reverse()
+    }
+    return sorted
+}
+
+const doInitSort = () => {
+    const type = storageModule.getSort(manager.initialSort)
+    const ascending = storageModule.getSortDirection()
+    const list = manager.testSubset
+    const initialOrder = ['Error', 'Failed', 'Rerun', 'XFailed', 'XPassed', 'Skipped', 'Passed']
+
+    storageModule.setSort(type)
+    storageModule.setSortDirection(ascending)
+
+    if (type?.toLowerCase() === 'original') {
+        manager.setRender(list)
+    } else {
+        let sortedList
+        switch (type) {
+        case 'duration':
+            sortedList = durationSort(list, ascending)
+            break
+        case 'result':
+            sortedList = genericSort(list, type, ascending, initialOrder)
+            break
+        default:
+            sortedList = genericSort(list, type, ascending)
+            break
+        }
+        manager.setRender(sortedList)
+    }
+}
+
+const doSort = (type, skipDirection) => {
+    const newSortType = storageModule.getSort(manager.initialSort) !== type
+    const currentAsc = storageModule.getSortDirection()
+    let ascending
+    if (skipDirection) {
+        ascending = currentAsc
+    } else {
+        ascending = newSortType ? false : !currentAsc
+    }
+    storageModule.setSort(type)
+    storageModule.setSortDirection(ascending)
+
+    const list = manager.testSubset
+    const sortedList = type === 'duration' ? durationSort(list, ascending) : genericSort(list, type, ascending)
+    manager.setRender(sortedList)
+}
+
+module.exports = {
+    doInitSort,
+    doSort,
+}
+
+},{"./datamanager.js":1,"./storage.js":8}],8:[function(require,module,exports){
+const possibleFilters = [
+    'passed',
+    'skipped',
+    'failed',
+    'error',
+    'xfailed',
+    'xpassed',
+    'rerun',
+]
+
+const getVisible = () => {
+    const url = new URL(window.location.href)
+    const settings = new URLSearchParams(url.search).get('visible')
+    const lower = (item) => {
+        const lowerItem = item.toLowerCase()
+        if (possibleFilters.includes(lowerItem)) {
+            return lowerItem
+        }
+        return null
+    }
+    return settings === null ?
+        possibleFilters :
+        [...new Set(settings?.split(',').map(lower).filter((item) => item))]
+}
+
+const hideCategory = (categoryToHide) => {
+    const url = new URL(window.location.href)
+    const visibleParams = new URLSearchParams(url.search).get('visible')
+    const currentVisible = visibleParams ? visibleParams.split(',') : [...possibleFilters]
+    const settings = [...new Set(currentVisible)].filter((f) => f !== categoryToHide).join(',')
+
+    url.searchParams.set('visible', settings)
+    window.history.pushState({}, null, unescape(url.href))
+}
+
+const showCategory = (categoryToShow) => {
+    if (typeof window === 'undefined') {
+        return
+    }
+    const url = new URL(window.location.href)
+    const currentVisible = new URLSearchParams(url.search).get('visible')?.split(',').filter(Boolean) ||
+        [...possibleFilters]
+    const settings = [...new Set([categoryToShow, ...currentVisible])]
+    const noFilter = possibleFilters.length === settings.length || !settings.length
+
+    noFilter ? url.searchParams.delete('visible') : url.searchParams.set('visible', settings.join(','))
+    window.history.pushState({}, null, unescape(url.href))
+}
+
+const getSort = (initialSort) => {
+    const url = new URL(window.location.href)
+    let sort = new URLSearchParams(url.search).get('sort')
+    if (!sort) {
+        sort = initialSort || 'result'
+    }
+    return sort
+}
+
+const setSort = (type) => {
+    const url = new URL(window.location.href)
+    url.searchParams.set('sort', type)
+    window.history.pushState({}, null, unescape(url.href))
+}
+
+const getCollapsedCategory = (renderCollapsed) => {
+    let categories
+    if (typeof window !== 'undefined') {
+        const url = new URL(window.location.href)
+        const collapsedItems = new URLSearchParams(url.search).get('collapsed')
+        switch (true) {
+        case !renderCollapsed && collapsedItems === null:
+            categories = ['passed']
+            break
+        case collapsedItems?.length === 0 || /^["']{2}$/.test(collapsedItems):
+            categories = []
+            break
+        case /^all$/.test(collapsedItems) || collapsedItems === null && /^all$/.test(renderCollapsed):
+            categories = [...possibleFilters]
+            break
+        default:
+            categories = collapsedItems?.split(',').map((item) => item.toLowerCase()) || renderCollapsed
+            break
+        }
+    } else {
+        categories = []
+    }
+    return categories
+}
+
+const getSortDirection = () => JSON.parse(sessionStorage.getItem('sortAsc')) || false
+const setSortDirection = (ascending) => sessionStorage.setItem('sortAsc', ascending)
+
+const getCollapsedIds = () => JSON.parse(sessionStorage.getItem('collapsedIds')) || []
+const setCollapsedIds = (list) => sessionStorage.setItem('collapsedIds', JSON.stringify(list))
+
+module.exports = {
+    getVisible,
+    hideCategory,
+    showCategory,
+    getCollapsedIds,
+    setCollapsedIds,
+    getSort,
+    setSort,
+    getSortDirection,
+    setSortDirection,
+    getCollapsedCategory,
+    possibleFilters,
+}
+
+},{}]},{},[4]);
+    </script>
+  </footer>
+</html>
diff --git a/media/css/firefox/browsers-products.scss b/media/css/firefox/browsers-products.scss
index 8f54490c215..6c9117340a6 100644
--- a/media/css/firefox/browsers-products.scss
+++ b/media/css/firefox/browsers-products.scss
@@ -296,7 +296,7 @@ $url-download-link-hover: svg-url($download-link-hover);
 }
 
 // issue 13317
-.fx-unsupported .cta-download[data-download-os="Desktop"]{
+.fx-unsupported .cta-download[data-cta-type="firefox"]{
     display: none;
 }
 
diff --git a/media/js/base/core-datalayer.js b/media/js/base/core-datalayer.js
index 232116e72de..84bca868e18 100644
--- a/media/js/base/core-datalayer.js
+++ b/media/js/base/core-datalayer.js
@@ -27,7 +27,7 @@ if (typeof window.Mozilla.Analytics === 'undefined') {
         if (!isModernBrowser) {
             return 'false';
         }
-        return document.querySelector('[data-download-os]') !== null
+        return document.querySelector('[data-download-version]') !== null
             ? 'true'
             : 'false';
     };
diff --git a/media/js/base/mozilla-utils.js b/media/js/base/mozilla-utils.js
index 07135a39a69..24a45e127c7 100644
--- a/media/js/base/mozilla-utils.js
+++ b/media/js/base/mozilla-utils.js
@@ -70,6 +70,7 @@ if (typeof window.Mozilla === 'undefined') {
 
     /**
      * Set platfrom specific GA data attributes for download_firefox_thanks() buttons.
+     * TKTK: do we still need this for stub attribution if this fucntion is only here for GA? CAN WE DELETE?
      */
     Utils.trackDownloadThanksButton = function () {
         var downloadButton = document.querySelectorAll(
@@ -78,9 +79,7 @@ if (typeof window.Mozilla === 'undefined') {
         var data = Utils.getDownloadAttributionValues(window.site);
 
         for (var i = 0; i < downloadButton.length; ++i) {
-            if (data && data.os && data.name && data.version) {
-                downloadButton[i].setAttribute('data-download-os', data.os);
-                downloadButton[i].setAttribute('data-display-name', data.name);
+            if (data && data.version) {
                 downloadButton[i].setAttribute(
                     'data-download-version',
                     data.version
diff --git a/tests/pages/firefox/family/landing.py b/tests/pages/firefox/family/landing.py
index 31f35428b28..0b4716e6e4b 100644
--- a/tests/pages/firefox/family/landing.py
+++ b/tests/pages/firefox/family/landing.py
@@ -14,9 +14,9 @@ class FamilyPage(BasePage):
 
     _firefox_nav_cta_locator = (By.CSS_SELECTOR, ".c-navigation-shoulder")
 
-    _firefox_nav_download_button_locator = (By.CSS_SELECTOR, "[data-download-location='nav']")
+    _firefox_nav_download_button_locator = (By.CSS_SELECTOR, "[data-cta-position='nav']")
 
-    _firefox_desktop_download_button_locator = (By.CSS_SELECTOR, "[data-download-location='download section']")
+    _firefox_desktop_download_button_locator = (By.CSS_SELECTOR, "[data-cta-position='download section']")
 
     _firefox_make_default_button_locator = (By.CSS_SELECTOR, "[data-cta-text='Set Firefox as your default browser']")
 
diff --git a/tests/unit/spec/base/core-datalayer.js b/tests/unit/spec/base/core-datalayer.js
index 4916e549719..05bf73eec48 100644
--- a/tests/unit/spec/base/core-datalayer.js
+++ b/tests/unit/spec/base/core-datalayer.js
@@ -13,7 +13,7 @@ describe('core-datalayer.js', function () {
     describe('pageHasDownload', function () {
         it('will return "true" when download button is present on page.', function () {
             const downloadMarkup =
-                '<a class="download" href="#" data-link-type="download" data-download-os="Desktop">';
+                '<a class="download" href="#" data-download-version="osx" data-cta-type="firefox">';
 
             document.body.insertAdjacentHTML('beforeend', downloadMarkup);
             expect(Mozilla.Analytics.pageHasDownload()).toBe('true');
diff --git a/tests/unit/spec/firefox/new/common/thanks.js b/tests/unit/spec/firefox/new/common/thanks.js
index 2083c7e8ebe..6bc452d4dea 100644
--- a/tests/unit/spec/firefox/new/common/thanks.js
+++ b/tests/unit/spec/firefox/new/common/thanks.js
@@ -63,7 +63,7 @@ describe('thanks.js', function () {
                     <li><a id="thanks-download-button-linux64" href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=linux64&amp;lang=en-US">Download Firefox</a></li>
                     <li><a id="thanks-download-button-linux" href="https://download.mozilla.org/?product=firefox-latest-ssl&amp;os=linux&amp;lang=en-US">Download Firefox</a></li>
                     <li><a id="thanks-download-button-android" href="https://play.google.com/store/apps/details?id=org.mozilla.firefox">Firefox for Android</a></li>
-                    <li><a id="thanks-download-button-ios" href="https://itunes.apple.com/us/app/firefox-private-safe-browser/id989804926" data-link-type="download" data-display-name="iOS" data-download-version="ios" data-download-os="iOS">Firefox for iOS</a></li>
+                    <li><a id="thanks-download-button-ios" href="https://itunes.apple.com/us/app/firefox-private-safe-browser/id989804926" data-download-version="ios" data-cta-text="Firefox for iOS" data-cta-type="firefox_mobile">Firefox for iOS</a></li>
                 </ul>`;
 
             document.body.insertAdjacentHTML('beforeend', button);