1026703 - Build snippet test landing page

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Matt Thompson (@OpenMatt :OpenMatt)]

* Take the page design from bug 1026700 and turn it into a landing page hosted on Webmaker.org

* Need a front-end dev to create the HTML / CSS

* JP is on deck to ensure the page is stood up to withstand snippet traffic

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Design will probably be done by EOD Wed or early Thursday

* Could assign this to Aali, Kate, Aki or Gavin

* Then they co-ordinate with JP to ensure page is set up correctly, etc.

Comment 2

[Matt Thompson (@OpenMatt :OpenMatt)]

* The page will need to include whatever Adam requires for tracking purposes as well
* Adam: please include relevant info / tickets here

Comment 3

[Matt Thompson (@OpenMatt :OpenMatt)]

* We're ready to start building the page.

* Design is here: 
https://redpen.io/ot3679dc4ffb1a6603

* Copy is here:
https://etherpad.mozilla.org/snippet-test-landing-page

Comment 4

[Adam Lofting (:adamlofting)]

Here are the tracking requirements for the build: https://wiki.mozilla.org/Foundation/Metrics/Landing_Page_Tracking

(It's 3 snippets to include on the page: GA, WebmakerRID, Optimizely).

I'm working on conversion tracking and will add relevant bugs here.

Comment 5

[Adam Lofting (:adamlofting)]

To finish the setup for tracking conversions, I need some info about the implementation here: Bug 1027045

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

* Aali is beginning work on this

* JP: can you guys co-ordinate?

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

More details, based on IRC questions:

* Page is due EOD Friday (if at all possible -- if not, let's surface that now and let Andrea know)

* We'll be pointing snippet traffic at it. JP is briefed and expecting this.

* Sign-up data should get passed to BSD. Let's create a new segment for it called "Snippet test sign-ups"

* Localization is not required

Comment 8

[Matt Thompson (@OpenMatt :OpenMatt)]

* Aali: you have what you need to proceed?

Comment 9

[Andrea Wood [:andreawood]]

In creating any segments or groups in BSD, I'd suggest a more granular segment naming convention. Something like: 20140620_snippettest_MPlandingpageTEST01

As we add tests it gets very important to track them closely in our data. Adam I'd welcome your recommendation on proper naming conventions to track the entire funnel across all the software we're using.

Comment 10

[JP Schneider :jp]

So if we're passing this to BSD...are we just pointing the welcome page to redirect to the snippet?  It'd be very useful for someone to clarify the user flow we desire here.

Comment 11

[Andrea Wood [:andreawood]]

Here is the user flow I've had in my head, but I'm open to hacking it:

Firefox user sees snippet > clicks on snippet > lands on this page, get's inspired > enters email address > upon "submit" gets redirected to the Maker Party events page + an auto-reply email from BSD will launch with more information about Maker Party (standard email auto-reply signed by maybe Amira or Brett).

Comment 12

[Jon Buckley [:jbuck]]

Andrea: what's the URL of the Maker Party events page? https://party.webmaker.org?

Comment 13

[Andrea Wood [:andreawood]]

Jon that's what I was thinking, it is a nice landing page after someone says "i'm interested" and they can explore and easily sign up for an event right then. I'd make sure this jives with Matt though.

Comment 14

[Jon Buckley [:jbuck]]

I think that's a great idea. We could even have some sort of a flag that displays a "Thanks for signing up message" on party.wm.o as a follow-up bug here.

Comment 15

[Matt Thompson (@OpenMatt :OpenMatt)]

love

Comment 16

[Jon Buckley [:jbuck]]

:Andrea - One last thing we'll need is a URL to submit the email addresses to, with the correct segment. Could you create a new BSD page that only accepts an email address as an input, is set to the correct segment ( 20140620_snippettest_MPlandingpageTEST01 ), sends the email autoreply, and drop the URL of that BSD page in this bug? If this request makes no sense, happy to Vidyo!

Comment 17

[Jon Buckley [:jbuck]]

The last needinfo we'll need on this bug, I swear

Comment 18

[Andrea Wood [:andreawood]]

Just sent an email to our consulting firm to see if they can create this. If not, we can do it in house. Stay tuned.

Comment 19

[Ali Al Dallal [:alicoding]]

Attachment: https://github.com/mozilla/webmaker-snippet-landing-page/pull/1

This is just the first part for the page itself.

Still need:

1. GA/Tracking codes (Going to do another commit very soon (Maybe tomorrow morning you will see it added)
2. Part for form submission. I'm still waiting for the last part for the URL.


Matt, I have included screenshot for the page itself so you can comment on them.


https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/-x9mbp63.png
https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/a4swj3y1.png
https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/poyrn0p1.png

Comment 20

[Ali Al Dallal [:alicoding]]

Added the first 3 parts for the GA/Tracking and still left for the last part where I still need to get the URL for the form first.

Comment 21

[JP Schneider :jp]

Ali, you can push your html and such up to the S3 bucket and view the results on https://d30a4e6ljyjb1j.cloudfront.net/

Comment 22

[Jon Buckley [:jbuck]]

Comment on attachment 8442597 [details] [review]
https://github.com/mozilla/webmaker-snippet-landing-page/pull/1

r+, nice work ali. Quick turnaround too :O

I left some comments in Github that should be easy to fix up

Comment 23

[[github robot]]

Commit pushed to master at https://github.com/mozilla/webmaker-snippet-landing-page

https://github.com/mozilla/webmaker-snippet-landing-page/commit/bd70b68c0c77d8a85b4b5158ba52c98215f47e2d
Bug 1026703 - Build snippet test landing page

Comment 24

[Matt Thompson (@OpenMatt :OpenMatt)]

* Awesome work Aali. A few small fixes:

https://dl.dropboxusercontent.com/spa/n5v3bx9nnjkdpzf/-x9mbp63.png

1) change "3 month" to "three-month"

2) correct "teachin" to "teaching"

3) change "web" to "Web" for consistency (upper case)

Comment 25

[Matt Thompson (@OpenMatt :OpenMatt)]

* Sorry Ali: revision to (1) above

* Should just read:

"Learn more about Mozilla Webmaker and our global Maker Party, a celebration of teaching and learning the Web."

Comment 26

[Ali Al Dallal [:alicoding]]

Done @OpenMatt :D

https://github.com/mozilla/webmaker-snippet-landing-page/commit/23ffe35abef96171686c699ae3ac058772d80d70

Comment 27

[Matt Thompson (@OpenMatt :OpenMatt)]

* Sweet! JP: can we get this on production?

Comment 28

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cancel that -- that's happening in bug 1027150
https://bugzilla.mozilla.org/show_bug.cgi?id=1027150

Comment 29

[JP Schneider :jp]

It is already there in prod !  
https://welcome.webmaker.org/

Comment 30

[Matt Thompson (@OpenMatt :OpenMatt)]

* sweet! marking this one resolved