1054410 - Create and deploy interactive Social API Snippet(s)

Status: RESOLVED FIXED

(Snippets Graveyard :: HTML5, defect)

Description

[Chris More [:cmore]]

Per design bug 1038974 and help from :mixedpuppy, we have a social API snippet that needs to be added to the snippets server, tested, and deployed.

Shane created these:

https://raw.githubusercontent.com/mixedpuppy/snippet-test/gh-pages/snippet1.html
https://raw.githubusercontent.com/mixedpuppy/snippet-test/gh-pages/snippet2.html

Mkelly fixed up the code and put them on prod for testing:

https://snippets.mozilla.com/admin/base/snippet/4505/
https://snippets.mozilla.com/admin/base/snippet/4506/

Comment 1

[Chris More [:cmore]]

Feedback by mkelly:

Shane: The changes I made were:

- Added "//<![CDATA[" and "//]]>" comments to the script tags so that
they were treated as raw character data.
- Replaced &raquo; with &#187;, as the XML well-formedness test doesn't
recognize HTML entities and they fail validation.

One big note though, I notice that these two snippets are using font
files downloaded from mozilla.org. It seems they're only used on the
button; I'd highly recommend removing these fonts and sticking with the
normal font, as we generally try to avoid external resources as much as
possible.

Also, what review/QA process have these snippets gone through yet, or is
that yet to happen and I've put them on the wrong snippets server by
mistake? :P

Comment 2

[Chris More [:cmore]]

Feedback from Shane:

This hasn't gone through any reviews. I agree, the fonts should just be
removed, they are a lot of extra bandwidth.

Comment 3

[Shane Caraveo (:mixedpuppy)]

Working mockup versions can be viewed at:

http://mixedpuppy.github.io/snippet-test/pocketHomeTest4.html
http://mixedpuppy.github.io/snippet-test/pocketHomeTest5.html

Comment 4

[Chris More [:cmore]]

osmose: can you remove the fonts? 

We should probably move it back to stage while testing and making these changes.

Comment 5

[Osmose [:osmose, :mkelly]]

I've removed the fonts and put the snippets up on the staging server:

https://snippets.allizom.org/admin/base/snippet/42/
https://snippets.allizom.org/admin/base/snippet/41/

I also fixed a bug where the snippets had `style="display: block"`, which disabled hiding them while other snippets were shown. The staging server has a simple snippet sent with all snippets now, so that we can test how they interact with other snippets.

For testing, the following URL in browser.aboutHomeSnippets.updateUrl in about:config will set you up to get the pocket snippets:

https://snippets.mozilla.com/%STARTPAGE_VERSION%/%NAME%/%VERSION%/%APPBUILDID%/%BUILD_TARGET%/%LOCALE%/release/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/

That, plus the manual refresh instructions in https://wiki.mozilla.org/Websites/Snippets/about:home_101#Manually_Forcing_a_Snippet_Refresh should be enough to test this.

Talking to Shane, this snippet is intended for Beta, so I tested on Beta and Nightly and found them to function normally and not hurt any other snippets. cmore, can you confirm?

Comment 6

[Osmose [:osmose, :mkelly]]

Attachment: Code for Pocket Snippet 1

Adding the code for both snippets so that I can review them.

Comment 7

[Osmose [:osmose, :mkelly]]

Attachment: Code for Pocket Snippet 2

Comment 8

[Osmose [:osmose, :mkelly]]

Comment on attachment 8475363 [details] [diff] [review]
Code for Pocket Snippet 1

Removing review, instead mixedpuppy is going to submit a PR to the github snippets repo.

Comment 9

[Osmose [:osmose, :mkelly]]

Attachment: Github pull request

Comment 10

[Jean Collings]

Hi there! Just a friendly ping to see where we're at with this! Thank you!

Comment 11

[Shane Caraveo (:mixedpuppy)]

(In reply to Jean Collings from comment #10)
> Hi there! Just a friendly ping to see where we're at with this! Thank you!

I've been bogged down with other stuff and haven't had time to come back to this.  I should have some time on Monday.  Sorry for the delay, it was unavoidable.

Comment 12

[Shane Caraveo (:mixedpuppy)]

I just updated the snippets in the pull request to address the comments.

Comment 13

[Jean Collings]

Just another friendly ping on the next steps and timing! Thanks.

Comment 14

[Chris More [:cmore]]

Are you waiting on me? I have to pull back on snippets to focus on the Firefox growth team. Don't let me block anywhere here.

Osmose/mixedpuppy: What do you two need?

Comment 15

[Shane Caraveo (:mixedpuppy)]

I submitted a last pull request, then out of sight, out of mind.  I think it's ready to accept.

Comment 16

[Osmose [:osmose, :mkelly]]

Review is done and I've added these two snippets to staging for testing.

cmore: Are you able to test that these snippets work? The about:config URL you should use for testing is:

https://snippets.allizom.org/%STARTPAGE_VERSION%/pocket/%VERSION%/%APPBUILDID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/%DISTRIBUTION_VERSION%/

(The snippet switcher addon is still a bit fragile, thus I'm not quite ready to use it for real testing, sadly.)

There should be two snippets. One has a link that launches a small modal with more info about pocket and a button for enabling the social API for it, the other has the modal inline. There should also be a normal snippet in the mix to make sure the others don't interfere.

This only really needs testing on Firefox Beta, and maybe Nightly if you're feeling generous.

Comment 17

[Chris More [:cmore]]

(In reply to Michael Kelly [:mkelly,:Osmose] from comment #16)
> Review is done and I've added these two snippets to staging for testing.
> 
> cmore: Are you able to test that these snippets work? The about:config URL
> you should use for testing is:
> 
> https://snippets.allizom.org/%STARTPAGE_VERSION%/pocket/%VERSION%/
> %APPBUILDID%/%BUILD_TARGET%/%LOCALE%/%CHANNEL%/%OS_VERSION%/%DISTRIBUTION%/
> %DISTRIBUTION_VERSION%/
> 
> (The snippet switcher addon is still a bit fragile, thus I'm not quite ready
> to use it for real testing, sadly.)
> 
> There should be two snippets. One has a link that launches a small modal
> with more info about pocket and a button for enabling the social API for it,
> the other has the modal inline. There should also be a normal snippet in the
> mix to make sure the others don't interfere.
> 
> This only really needs testing on Firefox Beta, and maybe Nightly if you're
> feeling generous.

I was able to see and interact with both snippets. The social API was activated in both type of snippets and the tab opened up after the API was installed. I tested this in Firefox Beta. I was able to see the simple snippet in the mix too and didn't see any problems with that.

Comment 18

[Chris More [:cmore]]

Attachment: Screenshot of clicking activate on one of the snippets

Comment 19

[Chris More [:cmore]]

Attachment: Screenshot of what shows up after clicking activate

I also was able to open up the pocket menu.

Comment 20

[Osmose [:osmose, :mkelly]]

I've added these two snippets to production:

https://snippets.mozilla.com/admin/base/snippet/4520/
https://snippets.mozilla.com/admin/base/snippet/4521/

They're disabled right now. I set them to go to Beta and added all the en-* locales. I also added a client match rule to each of them for versions >= 32. Make sure this rule is always on these snippets, as they don't work on versions below 32.

Thanks all!

Comment 21

[Osmose [:osmose, :mkelly]]

Just found a bug in one of the snippets; the surrounding div outside of the snippet div causes an error in the code that sends a stats ping for impression metrics, so it reports as a snippet with an ID of "undefined" instead of it's actual snippet ID. 

I think we can fix this with an improvement to the snippet service itself and am attempting to do so.

Comment 22

[Osmose [:osmose, :mkelly]]

To be clear, if you're okay with not getting proper metrics for one of the snippets, it's okay to send these snippets to production, as they'll work fine. Once we merge the fix to the snippets service and deploy it the metrics will start coming in properly for the affected snippet.

Comment 23

[Jean Collings]

I think it's important we get proper metrics for both snippets if possible. 

While we're on this note of metrics, (aside from snippet impressions), are there ways we can track their clicks within the experience? 

For example the inline modal - can we track when they click on "Activate" or "Learn More"
For the drop down one - can we track when they click on the copy to drop down and then the "Activate" or "learn more"?

Comment 24

[Shane Caraveo (:mixedpuppy)]

We'll know that users have landed on the post activation page, and "learn more" lands on the activation page itself.  Both of those pages have GA on them, so you should be able to add snippet variables to the urls.

Comment 25

[Jean Collings]

(In reply to Shane Caraveo (:mixedpuppy) from comment #24)
> We'll know that users have landed on the post activation page, and "learn
> more" lands on the activation page itself.  Both of those pages have GA on
> them, so you should be able to add snippet variables to the urls.

For the inline modal I see the code as:
<div class="description">Add the Pocket button to Firefox. It's a convenient way to save items with one click.</div>
    <a class="activatebutton" onclick="ps2.activate(this)">Activate now <span>&#187;</span></a>
    <br/><a href="https://activations.cdn.mozilla.net/en-US/pocket.html" class="moreinfo">Learn more</a>
  </div>

I know for "Learn more" I can add tags to "https://activations.cdn.mozilla.net/en-US/pocket.html" but what about the "Activate now". Sorry bear with me as I'm learning on the go.

Comment 26

[Shane Caraveo (:mixedpuppy)]

(In reply to Jean Collings from comment #25)
> (In reply to Shane Caraveo (:mixedpuppy) from comment #24)
> > We'll know that users have landed on the post activation page, and "learn
> > more" lands on the activation page itself.  Both of those pages have GA on
> > them, so you should be able to add snippet variables to the urls.
> 
> For the inline modal I see the code as:
> <div class="description">Add the Pocket button to Firefox. It's a convenient
> way to save items with one click.</div>
>     <a class="activatebutton" onclick="ps2.activate(this)">Activate now
> <span>&#187;</span></a>
>     <br/><a href="https://activations.cdn.mozilla.net/en-US/pocket.html"
> class="moreinfo">Learn more</a>
>   </div>
> 
> I know for "Learn more" I can add tags to
> "https://activations.cdn.mozilla.net/en-US/pocket.html" but what about the
> "Activate now". Sorry bear with me as I'm learning on the go.

no problem.  I actually just got a request from pocket to add a param so they can see the difference between snippet activations and otherwise.  If you can give me a sample of the params needed for the postactivation hit, I'll do a pull request with the changes.

Comment 27

[Shane Caraveo (:mixedpuppy)]

I've created another pull request with a minor update.  You would add the params you need here:

https://github.com/mixedpuppy/snippets/blob/master/pocket_1.html#L171

Comment 28

[Shane Caraveo (:mixedpuppy)]

It occurs to me, that will only catch people who actually activate (have said ok on the activation panel that appears).  I have no tracking in the snippet for the actual click on the button as I do on the directory site.

Comment 29

[Osmose [:osmose, :mkelly]]

Attachment: PR for activation URL changes

Comment 30

[Jean Collings]

For Mkelly: 

This is what's needed for tracking.

Inline:
1)"Activate Now" button
2)"Learn more" line

Popout:
1)"Learn more" link within the copy that creates the pop out (I believe this can be a string?)
2)"Activate Now" button
3)"Learn more" line

Comment 31

[Osmose [:osmose, :mkelly]]

Attachment: Pull request for custom "Learn more" click tracking

Comment 32

[Osmose [:osmose, :mkelly]]

Tracking for the "Learn More" link in the popup snippet is on prod. The only thing we're waiting for now is the service updates to fix impression tracking for the popup snippet (which is waiting for giorgos to return from PTO to review, which should be Monday).

The snippet can still safely go out to users at any time, we just won't be able to track impressions on that particular snippet. Will update once that code gets reviewed and pushed.

Comment 33

[[github robot]]

Commit pushed to master at https://github.com/mozilla/snippets-service

https://github.com/mozilla/snippets-service/commit/102a88ff26358d25939d61acdb0f3be9ab52e9c2
Bug 1054410: Accommodate snippets with root tags w/o “snippet” class.

The JavaScript previously assumed that the parent element of the 
“snippet”-classed element had the metadata for a snippet, such as its
ID. Raw snippets may have an extra surrounding element for styling or
other reasons, and instead of mandating that the root element of a 
snippet be the snippet-classed element, this updates the JavaScript to
search for the closest parent element with the “snippet-metadata” class.

Comment 34

[Osmose [:osmose, :mkelly]]

The fix for tracking has been pushed, these snippets should be good to go.