Create and deploy interactive Social API Snippet(s)

RESOLVED FIXED

Status

Snippets
HTML5
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: cmore, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 2 obsolete attachments)

(Reporter)

Description

4 years ago
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/
(Reporter)

Comment 1

4 years ago
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
(Reporter)

Comment 2

4 years ago
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.
(Reporter)

Comment 4

4 years ago
osmose: can you remove the fonts? 

We should probably move it back to stage while testing and making these changes.
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?
Flags: needinfo?(chrismore.bugzilla)
Created attachment 8475363 [details] [diff] [review]
Code for Pocket Snippet 1

Adding the code for both snippets so that I can review them.
Attachment #8475363 - Flags: review?(mkelly)
Created attachment 8475364 [details]
Code for Pocket Snippet 2
Attachment #8475364 - Flags: review?(mkelly)
Attachment #8475363 - Attachment is patch: true
Attachment #8475363 - Attachment mime type: text/html → text/plain
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.
Attachment #8475363 - Flags: review?(mkelly)
Attachment #8475364 - Flags: review?(mkelly)
Created attachment 8475380 [details] [review]
Github pull request
Attachment #8475363 - Attachment is obsolete: true
Attachment #8475364 - Attachment is obsolete: true
Hi there! Just a friendly ping to see where we're at with this! Thank you!
(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.
I just updated the snippets in the pull request to address the comments.
Just another friendly ping on the next steps and timing! Thanks.
(Reporter)

Comment 14

4 years ago
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?
Flags: needinfo?(chrismore.bugzilla)
I submitted a last pull request, then out of sight, out of mind.  I think it's ready to accept.
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.
Flags: needinfo?(chrismore.bugzilla)
(Reporter)

Comment 17

4 years ago
(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.
Flags: needinfo?(chrismore.bugzilla)
(Reporter)

Comment 18

4 years ago
Created attachment 8483611 [details]
Screenshot of clicking activate on one of the snippets
(Reporter)

Comment 19

4 years ago
Created attachment 8483612 [details]
Screenshot of what shows up after clicking activate

I also was able to open up the pocket menu.
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!
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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.
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"?
Flags: needinfo?(mkelly)
Flags: needinfo?(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.
Flags: needinfo?(mixedpuppy)
(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.
(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.
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
Flags: needinfo?(jcollings)
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.
Created attachment 8484336 [details] [review]
PR for activation URL changes
Attachment #8484336 - Flags: review?(mkelly)
Flags: needinfo?(mkelly)
Flags: needinfo?(jcollings)
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
Attachment #8484336 - Flags: review?(mkelly) → review+
Created attachment 8485017 [details]
Pull request for custom "Learn more" click tracking
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

4 years ago
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.
No longer depends on: 1063002
The fix for tracking has been pushed, these snippets should be good to go.
Status: REOPENED → RESOLVED
Last Resolved: 4 years ago4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.