Merge pull request #4028 from analytics-pros/bug-1248040-mobile-downl…

…oad-buttons [bug 1248040] Update GTM data attributes on mobile download buttons
mozilla · Apr 4, 2016 · 31be09b · 31be09b
2 parents ddcaf0b + 53aea01
commit 31be09b
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 49 deletions.
diff --git a/bedrock/firefox/templates/firefox/accounts.html b/bedrock/firefox/templates/firefox/accounts.html
@@ -42,10 +42,10 @@ <h1>{{_('Sign up, sign in, stay in sync.')}}</h1>
       <a class="button-flat-dark firefox-android more" rel="external" href="https://support.mozilla.org/kb/sync-bookmarks-tabs-history-and-passwords-android">{{_('Set up Sync on your <br>Android device')}}</a>
       <div class="non-firefox">
         <p>{{_('Download Firefox to start using Sync.')}}</p>
-        <a href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">
+        <a href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
           {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
         </a>
-        <a href="{{ firefox_ios_url('mozorg-sync_page-appstore-button') }}">
+        <a href="{{ firefox_ios_url('mozorg-sync_page-appstore-button') }}" data-link-type="download" data-download-os="iOS">
           <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
         </a>
       </div>

diff --git a/bedrock/firefox/templates/firefox/ios.html b/bedrock/firefox/templates/firefox/ios.html
@@ -25,7 +25,7 @@
 {% block site_header %}
     {% call fxfamilynav('ios', 'index') %}
       <div class="{% if has_widget %}show-widget{% endif %}">
-        <a class="dl-button" rel="external" href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}">
+        <a class="dl-button" rel="external" href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}" data-link-type="download" data-download-os="iOS">
           <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}">
         </a>
         <button class="send-to button-flat-dark" type="button" data-button-name="Get Firefox for iOS">{{ _('Get Firefox for iOS') }}</button>

diff --git a/bedrock/firefox/templates/firefox/mobile-download.html b/bedrock/firefox/templates/firefox/mobile-download.html
@@ -50,12 +50,12 @@ <h1 class="large" id="main-headline">
       <div class="mobile-download-buttons">
         <ul>
           <li class="android">
-            <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">
+            <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
               {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
             </a>
           </li>
           <li class="ios">
-            <a href="{{ firefox_ios_url('mozorg-heartbeat_landing-button') }}">
+            <a href="{{ firefox_ios_url('mozorg-heartbeat_landing-button') }}" data-link-type="download" data-download-os="iOS">
               <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
             </a>
           </li>

diff --git a/bedrock/firefox/templates/firefox/new/scene1.html b/bedrock/firefox/templates/firefox/new/scene1.html
@@ -91,9 +91,9 @@ <h1 class="large" id="main-headline">
       <li class="hide-for-refresh"><a href="{{ url('firefox.desktop.index') }}">{{_('Learn more about Firefox for desktop')}}</a></li>
       <li><a href="https://support.mozilla.org/products/firefox?utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_campaign=need-help-link">{{_('Need help?')}}</a></li>
       {% if l10n_has_tag('mobile_links') %}
-      <li class="hide-for-refresh"><a href="{{settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{_('Get Firefox on your Android device')}}</a></li>
+      <li class="hide-for-refresh"><a href="{{settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">{{_('Get Firefox on your Android device')}}</a></li>
       {% if l10n_has_tag('firefox_ios') %}
-      <li class="hide-for-refresh"><a href="{{ firefox_ios_url('mozorg-uptodate-appstore-link') }}">{{ _('Add Firefox to your iPhone, iPad and iPod touch') }}</a></li>
+      <li class="hide-for-refresh"><a href="{{ firefox_ios_url('mozorg-uptodate-appstore-link') }}" data-link-type="download" data-download-os="iOS">{{ _('Add Firefox to your iPhone, iPad and iPod touch') }}</a></li>
       {% endif %}
       <li class="hide-for-refresh"><a href="{{ url('firefox.os.index') }}">{{_('Learn about Firefox OS')}}</a></li>
       {% endif %}

diff --git a/bedrock/firefox/templates/firefox/new/scene2.html b/bedrock/firefox/templates/firefox/new/scene2.html
@@ -75,12 +75,12 @@ <h1 class="large" id="main-headline">
     <div class="mobile-download-buttons">
       <ul>
         <li class="android">
-          <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">
+          <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
             {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
           </a>
         </li>
         <li class="ios">
-          <a href="{{ firefox_ios_url('mozorg-scene_2-appstore-button') }}">
+          <a href="{{ firefox_ios_url('mozorg-scene_2-appstore-button') }}" data-link-type="download" data-download-os="iOS">
             <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
           </a>
         </li>

diff --git a/bedrock/firefox/templates/firefox/new/variants/scene1/base.html b/bedrock/firefox/templates/firefox/new/variants/scene1/base.html
@@ -86,8 +86,8 @@ <h1>{{ _('Go beyond the others. <br>Choose Firefox.') }}</h1>
             <ul>
               <li class="hide-for-refresh"><a href="{{ url('firefox.desktop.index') }}">{{_('Learn more about Firefox for desktop')}}</a></li>
               <li><a href="https://support.mozilla.org/products/firefox?utm_source=mozilla.org&amp;utm_medium=referral&amp;utm_campaign=need-help-link">{{_('Need help?')}}</a></li>
-              <li class="hide-for-refresh"><a href="{{settings.GOOGLE_PLAY_FIREFOX_LINK }}">{{_('Get Firefox on your Android device')}}</a></li>
-              <li class="hide-for-refresh"><a href="{{ firefox_ios_url('mozorg-uptodate-appstore-link') }}">{{ _('Add Firefox to your iPhone, iPad and iPod touch') }}</a></li>
+              <li class="hide-for-refresh"><a href="{{settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">{{_('Get Firefox on your Android device')}}</a></li>
+              <li class="hide-for-refresh"><a href="{{ firefox_ios_url('mozorg-uptodate-appstore-link') }}" data-link-type="download" data-download-os="iOS">{{ _('Add Firefox to your iPhone, iPad and iPod touch') }}</a></li>
               <li class="hide-for-refresh"><a href="{{ url('firefox.os.index') }}">{{_('Learn about Firefox OS')}}</a></li>
               <li><a href="{{ firefox_url('desktop', 'all') }}#{{ LANG }}">{{_('Download a fresh copy')}}</a></li>
             </ul>

diff --git a/bedrock/firefox/templates/firefox/new/variants/scene2/base.html b/bedrock/firefox/templates/firefox/new/variants/scene2/base.html
@@ -70,12 +70,12 @@ <h1>{{ _('Thanks for joining the mission.') }}</h1>
             <h2>{{ _('Get Firefox everywhere. Add it now to your Android and iOS devices.') }}</h3>
             <ul>
               <li class="android">
-                <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">
+                <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
                   {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
                 </a>
               </li>
               <li class="ios">
-                <a href="{{ firefox_ios_url('mozorg-scene_2-appstore-button') }}">
+                <a href="{{ firefox_ios_url('mozorg-scene_2-appstore-button') }}" data-link-type="download" data-download-os="iOS">
                   <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
                 </a>
               </li>

diff --git a/bedrock/firefox/templates/firefox/private-browsing.html b/bedrock/firefox/templates/firefox/private-browsing.html
@@ -39,12 +39,12 @@ <h1>{{ _('More protection. <br>The most privacy. <br>Only from Firefox.') }}</h1
               {{ download_firefox(small=True, icon=False) }}
             </div>
             <div class="android-download-button">
-              <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-button-type="download" data-interaction="download click" data-download-version="Firefox for Android">
+              <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
                 {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
               </a>
             </div>
             <div class="ios-download-button">
-              <a href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}">
+              <a href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}" data-link-type="download" data-download-os="iOS">
                 <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}">
               </a>
             </div>
@@ -150,12 +150,12 @@ <h2>{{ _('To give the new Private Browsing a try, download Firefox.') }}</h2>
             {{ download_firefox(small=True, icon=False) }}
           </div>
           <div class="android-download-button">
-            <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-button-type="download" data-interaction="download click" data-download-version="Firefox for Android">
+            <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
               {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
             </a>
           </div>
           <div class="ios-download-button">
-            <a href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}">
+            <a href="{{ firefox_ios_url('mozorg-ios_page-appstore-button') }}" data-link-type="download" data-download-os="iOS">
               <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}">
             </a>
           </div>

diff --git a/bedrock/firefox/templates/firefox/releases/release-notes.html b/bedrock/firefox/templates/firefox/releases/release-notes.html
@@ -264,12 +264,12 @@ <h4>{{ _('unresolved') }}</h4>
               {{ download_firefox(small=True, icon=False) }}
             </div>
             <div class="android-download-button">
-              <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-button-type="download" data-interaction="download click" data-download-version="Firefox for Android">
+              <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android">
                 {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
               </a>
             </div>
             <div class="ios-download-button">
-              <a rel="external" href="{{ firefox_ios_url('mozorg-releasenotes_page-appstore-button') }}">
+              <a rel="external" href="{{ firefox_ios_url('mozorg-releasenotes_page-appstore-button') }}" data-link-type="download" data-download-os="iOS">
                 <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}">
               </a>
             </div>

diff --git a/bedrock/firefox/templates/firefox/sync.html b/bedrock/firefox/templates/firefox/sync.html
@@ -87,12 +87,12 @@ <h1>{{ _('Take your Web with you') }}</h1>
         {% endif %}
           <ul class="primary-buttons">
             <li>
-              <a href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-interaction="button click" data-element-action="Sync CTA" id="cta-android">
+              <a href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android" id="cta-android">
                 {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
               </a>
             </li>
             <li>
-              <a href="{{ firefox_ios_url('mozorg-sync_page-appstore-button') }}" data-interaction="button click" data-element-action="Sync CTA" id="cta-ios">
+              <a href="{{ firefox_ios_url('mozorg-sync_page-appstore-button') }}" data-link-type="download" data-download-os="iOS" id="cta-ios">
                 <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
               </a>
             </li>
@@ -247,10 +247,10 @@ <h3>{{ _('On the go') }}</h3>
     <div class="container">
       <header>
         <h3>{{ _('Get Firefox everywhere') }}</h3>
-        <a href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-interaction="button click" data-element-action="Sync CTA" id="cta-android-footer">
+        <a href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" data-link-type="download" data-download-os="Android" id="cta-android-footer">
           {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '152', 'height': '45', 'l10n': True}) }}
         </a>
-        <a href="{{ firefox_ios_url('mozorg-sync_page-appstore-button-footer') }}" data-interaction="button click" data-element-action="Sync CTA" id="cta-ios-footer">
+        <a href="{{ firefox_ios_url('mozorg-sync_page-appstore-button-footer') }}" data-link-type="download" data-download-os="iOS" id="cta-ios-footer">
           <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
         </a>
       </header>

diff --git a/bedrock/mozorg/templates/mozorg/contribute/tasks/v1/firefox-mobile.html b/bedrock/mozorg/templates/mozorg/contribute/tasks/v1/firefox-mobile.html
@@ -17,7 +17,7 @@ <h3>{{ _('Add Firefox to your Android and iOS devices') }}</h3>
       </header>
       <div class="step-content">
         <div class="download-button-wrapper firefox-mobile">
-          <a rel="external" class="download-link" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" target="_blank">
+          <a rel="external" class="download-link" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" target="_blank" data-link-type="download" data-download-os="Android">
             {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '129', 'height': '45', 'l10n': True, 'data-action': 'install', 'data-task': 'firefox-mobile', 'data-step': 'one', 'data-complete': 'true', 'data-variation': '1', 'data-mobileversion': 'Android'}) }}
           </a>
           <a rel="external" class="download-link" href="{{settings.APPLE_APPSTORE_FIREFOX_LINK}}" target="_blank">

diff --git a/bedrock/mozorg/templates/mozorg/contribute/tasks/v2/firefox-mobile.html b/bedrock/mozorg/templates/mozorg/contribute/tasks/v2/firefox-mobile.html
@@ -19,7 +19,7 @@ <h3>{{ _('Install Firefox for iOS or Android') }}</h3>
       </header>
       <div class="step-content">
         <div class="download-button-wrapper firefox-mobile">
-          <a rel="external"  class="download-link" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" target="_blank">
+          <a rel="external"  class="download-link" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}" target="_blank" data-link-type="download" data-download-os="Android">
             {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '129', 'height': '45', 'l10n': True, 'data-action': 'install', 'data-task': 'firefox-mobile', 'data-step': 'one', 'data-complete': 'false', 'data-variation': '2', 'data-mobileversion': 'Android'}) }}
           </a>
           <a rel="external" class="download-link" href="{{settings.APPLE_APPSTORE_FIREFOX_LINK}}" target="_blank">

diff --git a/media/js/firefox/sync.js b/media/js/firefox/sync.js
@@ -109,30 +109,6 @@
         });
     }
 
-    // Setup GA tracking for Firefox download button
-    $('#cta-firefox, .download-button .download-link').attr({
-        'data-interaction': 'download click',
-        'data-download-version': 'Firefox'
-    });
-
-    // Setup GA tracking for Firefox update button
-    $('#cta-update').attr({
-        'data-interaction': 'update click',
-        'data-download-version': 'Firefox'
-    });
-
-    // Setup GA tracking for Firefox for primary Android download button
-    $('#cta-android').attr({
-        'data-interaction': 'top',
-        'data-download-version': 'Firefox for Android'
-    });
-
-    // Setup GA tracking for Firefox for Android footer download button
-    $('#cta-android-footer').attr({
-        'data-interaction': 'bottom',
-        'data-download-version': 'Firefox for Android'
-    });
-
     // Firefox Sync sign in flow button
     $('#cta-sync').on('click', function(e) {
         e.preventDefault();