Convert buttons with data-link-type="download" into CTAs (#14955)

* Convert buttons with data-link-type="download" into CTAs Fix #14062
mozilla · Sep 11, 2024 · 6657abd · 6657abd
1 parent 3e34323
commit 6657abd
Show file tree

Hide file tree

Showing 21 changed files with 104 additions and 110 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
@@ -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
@@ -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
@@ -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/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-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
@@ -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
@@ -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
@@ -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 %}