eoyfr 2014 homepage overlay design and implementation bug

RESOLVED FIXED

Status

www.mozilla.org
Pages & Content
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: jbertsch, Assigned: craigcook)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [kb=1608822] )

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
Hello All-

So, way back in mid-November we talked here about designing a homepage takeover/overlay for the EOYFR campaign on the homepage that would be live after Xmas thru New Years:
https://bugzilla.mozilla.org/show_bug.cgi?id=1086950#c26

We have an early design here:  https://bug1086950.bugzilla.mozilla.org/attachment.cgi?id=8521770

I've asked Ty to look at the design again to see how it could look w/out passing any data through.

And I'm going to ask Craig if he's available to code it.

Thanks all,
Jen
(Reporter)

Comment 1

2 years ago
Hello Andrea-

Here's our new proposed design for the EOYFR home page overlay:

http://cl.ly/image/1P2F0A0d131w

Could you please review and provide any feedback by EOD Monday?

And by any chance do you have any copy for the subhead? :)

Thx,
Jen
Flags: needinfo?(andrea)
(Reporter)

Comment 2

2 years ago
PSD https://www.dropbox.com/s/3pvwbwty7zz345f/MozOrg_Homepage-EOYFundraiser2014_Takeover-PromoTiles.psd?dl=0
This is beautiful! 

The average gift from the homepage right now is $22 USD, so we should use 35,25,15 for amounts. 

Here is language we've tested and know works, let me know if this works or if you want to hack together:

"Your gift helps us build the Internet the world needs."
"Our relationship to the Web has changed, but Mozilla’s mission is as important as ever."
"People everywhere are helping us build the Internet the world needs — an Internet where the public good comes first."

I'm adding Scott Downe to this bug as he can answer any Qs about carrying amounts over to our sequential form. I'll also provide a URL for this overlay.
Flags: needinfo?(andrea)
(Reporter)

Comment 4

2 years ago
Hi MJ and Matej-

Any thoughts on copy?

Thx,
Jen
Flags: needinfo?(mjkelly)
Flags: needinfo?(Mnovak)
(Reporter)

Comment 5

2 years ago
Also:  Ty - any thoughts on the copy suggested in comment 3?

Comment 6

2 years ago
Based on the copy in comment 3, here's an idea for what we could do on this promo:

Your Gift Helps
People everywhere are helping us build the Internet the world needs — an Internet where the public good comes first.
Flags: needinfo?(Mnovak)

Comment 7

2 years ago
+1 to Matej's copy.
Flags: needinfo?(mjkelly)
+1 to Matej's copy, and please keep the red "Donate" button (it's always won our tests).
(Reporter)

Comment 9

2 years ago
Alright, +1 to Matej's copy.

Craig - do you need anything else before implementing?

Thanks all!
Flags: needinfo?(craigcook.bugz)
(Assignee)

Comment 10

2 years ago
(In reply to Jennifer Bertsch [:jbertsch] from comment #9)
> Alright, +1 to Matej's copy.
> 
> Craig - do you need anything else before implementing?

Nope, I'm all set. I'll move this bug over to the www.mozilla.org component and assign it to myself for implementation.
Assignee: jbalaco → craigcook.bugz
Component: Design → Pages & Content
Flags: needinfo?(craigcook.bugz)
Product: Marketing → www.mozilla.org
(Assignee)

Updated

2 years ago
Whiteboard: [kb=1608822]
(Reporter)

Comment 11

2 years ago
Great!  Thanks, Craig!

Let's have it live Dec 28-Jan 2 or 5.
(Assignee)

Comment 12

2 years ago
I'm working on implementation and have discovered a small problem: If we select the donation amount on mozorg and submit to sendto.m.o, the form on sendto.m.o doesn't reflect the amount selected on mozorg.

We need to make the form on sendto.m.o get the amount from the URL query string and preselect it on the page. Furthermore, the amounts suggested in comment 3 don't appear as options in the form, so it'll need to preselect "other" and fill in the number. This shouldn't be too difficult but I don't know where the code for sendto.mozilla.org lives. Who might be able to help us with some quick dev work on that site?
Flags: needinfo?(andrea)
https://sendto.mozilla.org/page/contribute/givenow-seq#amount-35
https://sendto.mozilla.org/page/contribute/givenow-seq#amount-25
https://sendto.mozilla.org/page/contribute/givenow-seq#amount-15

Those three urls should open with other selected.
(Assignee)

Comment 14

2 years ago
(In reply to Scott [:thecount] Downe from comment #13)
 
> Those three urls should open with other selected.

That works!
(Assignee)

Comment 15

2 years ago
Given the short time and the holidays, getting this promo localized before launch isn't really feasible. Can someone confirm that this will be for English only? I vaguely recall hearing it would be but can't find it in any bugs or emails, maybe I'm imagining it.
(Assignee)

Comment 16

2 years ago
Created attachment 8540931 [details] [review]
Github pull request https://github.com/mozilla/bedrock/pull/2608

Comment 17

2 years ago
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/05874fbb11ce9ef5f6f998ea582f0365c4d80a19
Bug 1110966 - EOY fundraising home page takeover

https://github.com/mozilla/bedrock/commit/02ab4269b853f7f969a823e061071214ac8841cc
Merge pull request #2608 from craigcook/bug-1110966-fundraising-home-overlay

Bug 1110966 - EOY fundraising home page takeover

Comment 18

2 years ago
(In reply to Jennifer Bertsch [:jbertsch] from comment #11)
> Let's have it live Dec 28-Jan 2 or 5.

Similar to https://bugzilla.mozilla.org/show_bug.cgi?id=1115046#c6 I've scheduled the 'fundraiser-home-takeover' switch used in Craig's PR to be flipped on at midnight PST 2014-12-28 and then off at midnight 2015-01-02 using the following commands on the bedrock admin node:

export DIR=/data/bedrock/www/www.mozilla.org-django/bedrock
export SWITCH=fundraiser-home-takeover
echo "cd $DIR && ./manage.py switch $SWITCH on --create" | at 00:00 2014-12-28
echo "cd $DIR && ./manage.py switch $SWITCH off" | at 00:00 2015-01-02

Comment 19

2 years ago
Clearing :andreawood's needinfo; the info was provided by :thecount in comment #13.
Flags: needinfo?(andrea)

Updated

2 years ago
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
I'm seeing a little error on the "donate now" button image:
http://note.io/1JX8DCz

Using Chrome or FF

Pinging Craig with a needinfo
Flags: needinfo?(craigcook.bugz)
(Assignee)

Comment 21

2 years ago
(In reply to Andrea Wood [:andreawood] from comment #20)
> I'm seeing a little error on the "donate now" button image:
> http://note.io/1JX8DCz

I'm seeing the gift icon. I suspect you might just have a cached version of the icon font that's missing that particular icon. Try a shift-reload to force your browsers to fetch the updated font and if that doesn't fix it we'll have to dig deeper.
Flags: needinfo?(craigcook.bugz)
I now see the gift icon for Chrome, but after a hard refresh i'm still getting the img error in FF. It could just be me.
It's fine in Chrome, but I see the error icon even in a Firefox private tab.
Doesn't look like the url is connected to the button correctly.

The page has a form with the correct link as an action attribute:

"https://sendto.mozilla.org/page/contribute/givenow-seq?preset=2&source=mozillaorg_takeover&ref=EOYFR2014&utm_campaign=EOYFR2014&utm_source=mozilla.org&utm_medium=referral&utm_content=mozillaorg_takeover#amount-25"

However, clicking the button I get: https://sendto.mozilla.org/page/contribute/givenow-seq?amount=25#amount-25
(Assignee)

Comment 25

2 years ago
The icon is missing for me in some browsers but not in others. It's weirdly inconsistent. I also can't reproduce it at all locally, only in production, so I'm starting to think it might be a glitch with our CDN.

As for the URL, the form is currently using a GET method and I think it probably needs to be POST to preserve all the parameters. We'll do a bit more testing and if the fix is as simple as that we'll get it pushed to production ASAP.
(Assignee)

Comment 26

2 years ago
Both mysteries solved. 

The missing icon: The icon font is defined in the CSS in two different places, only one of which was updated and the other is still referencing a cached version of the font without the gift icon. Depending on the sequence in which the CSS loads and the CDN your browser is fetching from, you'll sometimes get the old font and sometimes the new one.

The changing URL: Because the form is a GET, all URL parameters are stripped from the action by the browser when it submits (thanks jgmize for pointing this out; TIL). We could switch to a POST but that's not really correct. We could make all those tracking parameters hidden fields so they submit with the form, but that's a fairly cheesy hack. But really this doesn't need to be a form at all since we're not actually submitting any data, it's merely a set of actions that change a URL. So instead of a submittable form I'll just turn the button into a link and change its href.

Code fixes for these two issues should land shortly and we'll get them into production today. Reopening this bug in the meantime just so we can track the fixes.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---

Comment 27

2 years ago
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/044cac8784bd2629077836ea3fd19bc78bb26b5a
Bug 1110966 - fixes for fundraiser home takeover

* Cachebusted the other icon font reference
* Changed from form submit to link
* Improved keyboard a11y

https://github.com/mozilla/bedrock/commit/305192aae8ee8e859aeac8d1b178dd72c96780cf
Merge pull request #2616 from craigcook/bug-1110966-fundraising-home-overlay

Bug 1110966 - fixes for fundraiser home takeover
(Reporter)

Comment 28

2 years ago
(In reply to Craig Cook (:craigcook) from comment #15)
> Given the short time and the holidays, getting this promo localized before
> launch isn't really feasible. Can someone confirm that this will be for
> English only? I vaguely recall hearing it would be but can't find it in any
> bugs or emails, maybe I'm imagining it.

Locales are welcome to localize if they choose to, given the limited live dates (Dec 28-Jan 2).
(Assignee)

Comment 29

2 years ago
The fixes for the icon and URL are live in production.
Status: REOPENED → RESOLVED
Last Resolved: 2 years ago2 years ago
Resolution: --- → FIXED

Comment 30

2 years ago
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/74d6b4d57d03693a79da5bc0e30aee939a032e68
Bug 1110966 - remove EOY fundraiser homepage takeover

https://github.com/mozilla/bedrock/commit/9d5cd41450859ef27ad74babdc4d2a24ab6233f6
Merge pull request #2622 from craigcook/bug-1110966-fundraising-home-overlay

Bug 1110966 - remove EOY fundraiser homepage takeover
You need to log in before you can comment on or make changes to this bug.