Remove Donation Flow 2023 AB Test. (Fixes #408) (#409)

- Clean up some now unneeded code
- Comment out the rest that may be useful later
- Enable redirect to downloads page after download has begun
- Move FRU specific donation url generation to our build process (Python)
- Removed JavaScript from start page for now

Author: MelissaAutumn

assets/js/common/ab-testing.js

@@ -8,8 +8,8 @@ if (typeof Mozilla === 'undefined') {
 
     /**
      * Super simple ABTest module, it puts you in one of the buckets.
-     * Bucket === 0 - FundraiseUp
-     * Bucket === 1 - give.thunderbird.net
+     * Bucket === 0 - A
+     * Bucket === 1 - B
      */
     const ABTest = {};
     ABTest.bucket = null;
@@ -23,18 +23,21 @@ if (typeof Mozilla === 'undefined') {
      * Once a bucket has been chosen, this function does nothing.
      */
     ABTest.Choose = function() {
+        /*
         if (ABTest.bucket !== null) {
             return;
         }
 
         ABTest.bucket = ABTest.RandomInt(0, 1);
+        */
     }
 
     /**
      * Tracks our bucket choice.
      * Called from matomo.js, registers a bucket if no bucket has been chosen.
      */
     ABTest.Track = function() {
+        /*
         if (ABTest.bucket === null) {
             ABTest.Choose();
         }
@@ -43,75 +46,33 @@ if (typeof Mozilla === 'undefined') {
         const _paq = window._paq = window._paq || [];
 
         // TrackEvent: Category, Action, Name
-        _paq.push(['trackEvent', 'AB-Test - Donation Flow 2023', 'Bucket Registration', ABTest.bucket === 0 ? 'fru' : 'give']);
+        _paq.push(['trackEvent', 'AB-Test - Test Name Here', 'Bucket Registration', ABTest.bucket === 0 ? 'a' : 'b']);
+        */
     }
 
     /**
      * Are we in the FundraiseUp bucket?
      * @returns {boolean}
      */
-    ABTest.IsInFundraiseUpBucket = function() {
+    ABTest.IsInBucketA = function() {
         return ABTest.bucket === 0;
     }
 
     /**
      * Are we in the legacy give.thunderbird.net bucket?
      * @returns {boolean}
      */
-    ABTest.IsInGiveBucket = function() {
+    ABTest.IsInBucketB = function() {
         return ABTest.bucket === 1;
     }
 
-    /**
-     * FundraiseUp's download functionality. This will simply raise the Donation form.
-     * @param download_url
-     * @private
-     * @deprecated Might be removed in a later release
-     */
-    ABTest._FundraiseUpDownload = function(download_url) {
-        window.Mozilla.Donation.DisplayDownloadForm(download_url);
-    }
-
-    /**
-     * Legacy give.thunderbird.net download functionality.
-     * This will redirect them to the donation url, which will start the download.
-     * @param download_url
-     * @param donate_url
-     * @private
-     */
-    ABTest._GiveDownload = function(download_url, donate_url) {
-        // Don't redirect if we're on the failed download page.
-        if ($("body").attr('id') !== 'thunderbird-download') {
-            // MSIE and Edge cancel the download prompt on redirect, so just leave them out.
-            if (!(/msie\s|trident\/|edge\//i.test(navigator.userAgent))) {
-                setTimeout(function() {
-                    window.location.href = donate_url;
-                }, 5000);
-            }
-        }
-        window.Mozilla.Utils.triggerIEDownload(download_url);
-    }
-
-    /**
-     * Start the Download, it will handle determining what bucket we're in and what download path we need to go down.
-     * @param event : Event
-     */
-    ABTest.Download = function(event) {
-        const element = event.target;
-        const download_url = element.href;
-        const donate_url = element.dataset.donateLink || null;
-
-        if (ABTest.IsInGiveBucket()) {
-            ABTest._GiveDownload(download_url, donate_url);
-        }
-    }
-
     /**
      * Replaces a 'HTMLAnchorElement' href tag with the bucket's (only FRU right now) equivalent url.
      * @param element : HTMLAnchorElement
      */
     ABTest.ReplaceDonateLinks = function(element) {
-        if (ABTest.IsInFundraiseUpBucket()) {
+        /*
+        if (ABTest.IsInBucketA()) {
             // If we somehow don't have an element, we can exit and still start any redirects.
             if (!element) {
                 return;
@@ -126,6 +87,7 @@ if (typeof Mozilla === 'undefined') {
 
             element.href = window.Mozilla.Donation.MakeDonateUrl(utmContent, utmSource, utmMedium, utmCampaign, redirect);
         }
+        */
     }
 
     /**
@@ -135,27 +97,6 @@ if (typeof Mozilla === 'undefined') {
     ABTest.Init = function() {
         // Pick one!
         ABTest.Choose();
-
-        // Replace the donation button's links with the correct one.
-        const donate_buttons = document.querySelectorAll('[data-donate-btn]');
-        for (const donate_button of donate_buttons) {
-            ABTest.ReplaceDonateLinks(donate_button);
-        }
-
-        // Replace the download button's links with our download redirect
-        // But only do that if we're not already on the download page
-        if (window.location.href.indexOf('/download/') === -1) {
-            const download_buttons = document.querySelectorAll('.download-link');
-            for (const download_button of download_buttons) {
-                ABTest.ReplaceDonateLinks(download_button);
-
-                // If we're in FRU bucket, don't trigger download events for our non-download page buttons
-                // Otherwise we'll be getting download==thunderbird.net instead of download==download.mozilla.org
-                if (ABTest.IsInFundraiseUpBucket()) {
-                    download_button.className = download_button.className.replace('matomo-track-download', '');
-                }
-            }
-        }
     }
 
     window.Mozilla.ABTest = ABTest;

assets/js/common/donations.js

@@ -7,8 +7,6 @@ if (typeof Mozilla === 'undefined') {
     'use strict';
 
     var Donation = {};
-    Donation.ANIMATION_DURATION = 250;
-    Donation.WINDOW_POS_KEY = '_tb_donation_position';
     Donation.NEWSLETTER_URL = `/${window.siteLocale}/newsletter`;
     /**
      * Is the download form visible?
@@ -48,8 +46,6 @@ if (typeof Mozilla === 'undefined') {
             // Retrieve the current download link before we close the form (as that clears it)
             const download_link = Donation.CurrentDownloadLink;
 
-            Donation.CloseForm();
-
             // No download link? Exit.
             if (!download_link) {
                 return;
@@ -103,8 +99,10 @@ if (typeof Mozilla === 'undefined') {
      * @param utmMedium {?string}
      * @param utmCampaign {?string}
      * @param redirect {?string} - Whether we should redirect the user to another page
+     * @deprecated Donation url code has been migrated to static build process. This is left here in case of further AB tests.
      */
-    Donation.MakeDonateUrl = function(utmContent = null, utmSource = 'thunderbird.net', utmMedium = 'fru', utmCampaign = 'donation_flow_2023', redirect = null) {
+    Donation.MakeDonateUrl = function(utmContent = null, utmSource = 'thunderbird.net', utmMedium = 'fru', utmCampaign = 'donation_2023', redirect = null) {
+        /*
         const is_donate_redirect = redirect === 'donate';
         const is_download_redirect = redirect && redirect.indexOf('download-') !== -1;
 
@@ -137,76 +135,9 @@ if (typeof Mozilla === 'undefined') {
         }
 
         return query_params;
+        */
     }
 
-    /**
-     * Close the donation form
-     * This will clear any currently set download link.
-     */
-    Donation.CloseForm = function() {
-        $('#amount-modal').fadeOut(Donation.ANIMATION_DURATION);
-        $('#modal-overlay').fadeOut(Donation.ANIMATION_DURATION);
-        $(document.body).removeClass('overflow-hidden');
-        Donation.IsVisible = false;
-        Donation.CurrentDownloadLink = null;
-    }
-
-    /**
-     * Display the donation download modal for fundraise up
-     * @param download_url - Link to the actual file download
-     */
-    Donation.DisplayDownloadForm = function(download_url) {
-        // Show the donation form.
-        $('#amount-modal').fadeIn(Donation.ANIMATION_DURATION);
-        $('#modal-overlay').fadeIn(Donation.ANIMATION_DURATION);
-        $(document.body).addClass('overflow-hidden');
-        Donation.IsVisible = true;
-        Donation.CurrentDownloadLink = download_url;
-
-        // Set the "No thanks, just download" button's link
-        if ($("#amount-cancel")[0]) {
-            $("#amount-cancel")[0].href = download_url;
-        }
-
-        // Define cancel and close button on the donation form.
-        $('#amount-cancel').click(function(e) {
-            // No prevent default
-            Donation.CloseForm();
-        });
-        $('#close-modal').click(function(e) {
-            e.preventDefault();
-            Donation.CloseForm();
-        });
-
-        // Close modal when clicking the overlay
-        $('#modal-overlay').click(function(e) {
-            e.preventDefault();
-            Donation.CloseForm();
-        });
-
-        // Close modal when pressing escaoe
-        $(document).keyup(function(e) {
-            if (e.key === "Escape") {
-                Donation.CloseForm();
-            }
-        });
-
-        // Define active amount in amount selection.
-        $('#amount-selection > label').click(function() {
-            $('#amount-selection > label.active').removeClass('active');
-            $(this).addClass('active');
-        });
-        $('#amount-other-selection').click(function() {
-            $('#amount-other').focus();
-        });
-        $('#amount-other').click(function() {
-            $('#amount-other-selection').prop('checked', true);
-        });
-        $('#amount-other').on('input', function() {
-            $('#amount-other-selection').val($(this).val());
-        });
-    };
-
     window.Mozilla.Donation = Donation;
     Donation.Init();
 })();

assets/js/common/mozilla-utils.js

@@ -38,14 +38,34 @@ if (typeof Mozilla === 'undefined') {
         }
     };
 
+    /**
+     * Redirects the user to a donation url. This should be triggered after a download.
+     * @param {HTMLAnchorElement} element
+     */
+    Utils.redirectAfterDownload = function(element) {
+        const download_url = element.href;
+        const donate_url = element.getAttribute('data-donate-link') || null;
+
+        // Don't redirect if we're on the failed download page.
+        if ($("body").attr('id') !== 'thunderbird-download') {
+            // MSIE and Edge cancel the download prompt on redirect, so just leave them out.
+            if (!(/msie\s|trident\/|edge\//i.test(navigator.userAgent))) {
+                setTimeout(function() {
+                    window.location.href = donate_url;
+                }, 5000);
+            }
+        }
+        window.Mozilla.Utils.triggerIEDownload(download_url);
+    }
+
     // attach an event to all the download buttons to trigger the special
     // ie functionality if on ie
     Utils.initDownloadLinks = function() {
         $('#submit-button').hide();
         $('.download-link').each(function() {
             var $el = $(this);
             $el.click(function(e) {
-                window.Mozilla.ABTest.Download(e);
+                Utils.redirectAfterDownload(e.currentTarget);
             });
         });
         $('.download-list').attr('role', 'presentation');

build-site.py

@@ -27,7 +27,7 @@
 
 if args.startpage:
     print('Rendering start page ' + langmsg)
-    site = builder.Site(languages, settings.START_PATH, settings.START_RENDERPATH, settings.START_CSS, js_bundles=settings.START_JS, debug=args.debug)
+    site = builder.Site(languages, settings.START_PATH, settings.START_RENDERPATH, settings.START_CSS, debug=args.debug)
     site.build_startpage()
 else:
     print('Rendering www.thunderbird.net ' + langmsg)

helper.py

@@ -1,6 +1,8 @@
 from __future__ import unicode_literals
 
 import inspect
+import urllib
+
 import jinja2
 import json
 import markdown
@@ -318,19 +320,43 @@ def thunderbird_url(page, channel='None'):
 
 
 @jinja2.contextfunction
-def donate_url(ctx, content='', source='thunderbird.net', medium='give', campaign='donation_flow_2023', download=False):
-    # If this link is from a download button, donate.mozilla.org has thank you text.
-    download_string = ''
-    if download:
-        download_string = '&tbdownload=true'
-
-    # Add utm_campaign if we are using it.
-    campaign_string = ''
-    if campaign:
-        campaign_string = '&utm_campaign={0}'.format(campaign)
-
-    return (settings.DONATE_LINK.format(content=content, source=source, medium=medium)
-            + campaign_string + download_string)
+def donate_url(ctx, content='', source='thunderbird.net', medium='fru', campaign='donation_2023', show_donation_modal=True, download=None, download_channel=None):
+    """Forms a donation url with the given parameters. If you pass in None for any of the fields they will be excluded from the url
+    :param content: UTM Content tag
+    :param source: UTM Source tag
+    :param medium: UTM Medium tag
+    :param campaign: UTM Campaign tag
+    :param show_donation_modal: Whether we want to append form=support that will automatically load the FRU modal
+    :param download: Whether we have already downloaded Thunderbird (Download button specific.) Boolean or None.
+    :param download_channel: What download channel to append to the url (Download button specific.) String or None.
+    """
+    form = None
+    if show_donation_modal:
+        form = 'support'
+
+    query = {
+        'form': form,
+        'utm_content': content,
+        'utm_source': source,
+        'utm_medium': medium,
+        'utm_campaign': campaign,
+        'downloaded': download,
+        'download_channel': download_channel
+    }
+
+    filtered_query = {k: v for k, v in query.items() if v is not None}
+
+    return "?{}".format(urllib.urlencode(filtered_query))
+
+
+@jinja2.contextfunction
+def redirect_donate_url(ctx, location='thunderbird.download', make_full_url=False, **kwargs):
+    """Helper function to piece together the full donation url. Defaults to the settings for our Download button."""
+    base_url = ''
+    if make_full_url:
+        base_url = settings.CANONICAL_URL
+
+    return "{url}{path}{query}".format(url=base_url, path=url(ctx, location), query=donate_url(ctx, **kwargs))
 
 
 def safe_markdown(text):

settings.py

@@ -134,6 +134,7 @@
     'thunderbird.donate.faq': '/donate#faq',
     'thunderbird.donate.ways-to-give': '/donate#ways-to-give',
     'thunderbird.donate.ways-to-give.check': '/donate#ways-to-give-check',
+    'thunderbird.download': '/download',
     'thunderbird.download-beta': '/download/beta',
     'thunderbird.enterprise': 'https://wiki.mozilla.org/Thunderbird/tb-enterprise',
     'thunderbird.enterprise.documentation': 'https://enterprise.thunderbird.net/',
@@ -157,11 +158,6 @@
     'thunderbird.organizations',
 ]
 
-DONATE_LINK = (
-    'https://give.thunderbird.net/'
-    '?utm_source={source}&utm_medium={medium}&utm_content={content}'
-)
-
 # WEBSITE_CSS = {
 #     'calendar-bundle': ['less/thunderbird/calendar.less', 'less/base/menu-resp.less'],
 #     'responsive-bundle': ['less/sandstone/sandstone-resp.less', 'less/base/global-nav.less'],

start-page/_base-resp.html

@@ -18,6 +18,5 @@
     <main>
       {% block main %}{% endblock %}
     </main>
-    <script type="text/javascript" src="/media/js/common-bundle.js" charset="utf-8"></script>
   </body>
 </html>