From 59cbc7fa1868f3e39c3076b17f9839a01576a062 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           | 14 +++++--------
 .../mozorg/analytics-tests/ga-index.html      |  4 ++--
 media/css/firefox/browsers-products.scss      |  2 +-
 media/js/base/core-datalayer.js               |  2 +-
 media/js/base/mozilla-utils.js                |  4 +---
 media/js/firefox/all/all-downloads-unified.js |  2 --
 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, 91 insertions(+), 73 deletions(-)

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..e8d6b59c155 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-type") == "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..f3bd429a45a 100644
--- a/bedrock/firefox/tests/test_views.py
+++ b/bedrock/firefox/tests/test_views.py
@@ -507,17 +507,13 @@ 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")
+            if cta_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"
 
     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/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..e035a82aee1 100644
--- a/media/js/base/mozilla-utils.js
+++ b/media/js/base/mozilla-utils.js
@@ -78,9 +78,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/media/js/firefox/all/all-downloads-unified.js b/media/js/firefox/all/all-downloads-unified.js
index af8c3442ab3..7b96051398b 100644
--- a/media/js/firefox/all/all-downloads-unified.js
+++ b/media/js/firefox/all/all-downloads-unified.js
@@ -263,14 +263,12 @@
         url,
         product,
         platform,
-        language,
         element
     ) {
         var el = element || downloadInfoButton;
         el.href = url;
         el.setAttribute('data-display-name', product.label);
         el.setAttribute('data-download-version', platform.id);
-        el.setAttribute('data-download-language', language.id);
 
         if (/^android/.test(platform.id)) {
             el.setAttribute('data-download-os', 'Android');
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..7c8fb589372 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-link-type="download" 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);