Testing a sponsored section flow #5197

ScottDowne · 2019-07-23T20:25:22Z

I added comments to help explain the code.
if you give it a try, I've setup some test data in the hardcoded layout.
what happens in there is trying different combinations of sponsored collections, campaign collections, same with components. If it's a DSDismiss stub, it's wrapped in light green!

ScottDowne · 2019-07-23T20:25:51Z

common/Reducers.jsm

@@ -63,6 +63,7 @@ const INITIAL_STATE = {
    spocs: {
      spocs_endpoint: "",
      lastUpdated: null,
+      showSpocs: false,


This is needed so the jsx gets a better more explicit handle on if spocs are on or not.

ScottDowne · 2019-07-23T20:26:04Z

common/Reducers.jsm

@@ -606,6 +607,7 @@ function DiscoveryStream(prevState = INITIAL_STATE.DiscoveryStream, action) {
          ...prevState,
          spocs: {
            ...prevState.spocs,
+            showSpocs: action.data.showSpocs,


This is just part of the above.

ScottDowne · 2019-07-23T20:26:34Z

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

-            className={`ds-column ds-column-${row.width}`}
-          >
+        {layoutRender.map((row, rowIndex) => {
+          const contents = (


Changes in this file are wrapping a collection or component if it has a campaign_id in DSDismiss stub.

clarifying collection or component , Only possible component allowed here are LIST, GRID, HERO, COLLECTION ,TEXT BANNER and TOP_SITE or there can be more?

Any component can be in a collection, and would be something that if the collection is dismissed, it would take everything with it, so for example, if a collection contains a component that's not something that can be sponsored, for the sake of that collection, it's sponsored because it's used along with a collection that is only sponsored.

In the case of a single component that's sponsored, any component that's got a campaign id (is a promo) would become dismiss-able. I don't think this is something we need to enforce on our end.

A component or collection can be dismiss-able via a campaign id (or some other id) it then wraps it in a dsdismiss component. It's up to the server side data to use these components in a way that creates a logical experience to the user.

ScottDowne · 2019-07-23T20:27:15Z

content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx

@@ -25,6 +25,7 @@ export class DSMessage extends React.PureComponent {
            </SafeAnchor>
          )}
        </header>
+        {this.props.subtitle && (<div className="subtitle">{this.props.subtitle}</div>)}


just bringing back subtitle of some sort.

ScottDowne · 2019-07-23T20:27:56Z

content-src/lib/selectLayoutRender.js

@@ -139,19 +139,29 @@ export const selectLayoutRender = (state, prefs, rickRollCache) => {
    return { ...component, data };
  };

+  const filterComponent = (c) => {


Changes in this file are removing any components or collections that are sponsored if spocs are disabled.

ScottDowne · 2019-07-23T20:28:23Z

lib/DiscoveryStreamFeed.jsm

@@ -1286,10 +1287,90 @@ defaultLayoutResp = {
    {
      width: 12,
      components: [
+        {


This is all test data.

ScottDowne · 2019-07-23T20:28:39Z

lib/DiscoveryStreamFeed.jsm

@@ -527,6 +527,7 @@ this.DiscoveryStreamFeed = class DiscoveryStreamFeed {
    sendUpdate({
      type: at.DISCOVERY_STREAM_SPOCS_UPDATE,
      data: {
+        showSpocs: this.showSpocs,


This is needed to make the jsx better understand if spocs are on or off.

punamdahiya · 2019-07-30T16:43:20Z

content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss.jsx

+export class DSDismiss extends React.PureComponent {
+  render() {
+    // TODO:
+    // This needs an x button that dismisses the campaign_id passed to it.


Clarifying campaign_id, are we saying any LIST, GRID, HERO, COLLECTION TEXT BANNER and TOP_SITE that has campaign_id is promotion?
And if any of these above component has paid record/item (even one) it becomes paid promotion or do we need all items to be sponsored ?
May be @wolasi question, are non-paid promotion dismissable?

At this stage a sponsored collection can house content components that either have paid items or non-paid items. We should be able to test both options.

Non-paid collection does not have to be dismissable for v70.

I think the work involved in making non paid dismiss-able is the same, and we should just do both in 70.

I think there may be confusion around the naming of campaign_id. From what I'm seeing, we don't really care if a campaign is paid or not, maybe it makes more sense to change some of the existing names in the code, but how I see it without changing the names in the code.

campaign === promo
sponsored === paid

So if something is sponsored and campaign, it's a paid promo.
If something is campaign and not sponsored, it's a non paid promo.
If something is not a campaign and not sponsored, it's an organic rec.
If something is not a campaign and sponsored, it's a bug and shouldn't happen.

To clarify what I meant by "we don't really care if a campaign is paid or not"

If something is a campaign, we make it dismiss-able, at this point we're done, and if it's paid or not, that's different functionality. It's logically split up.

If something is paid (sponsored), we turn it on or off based on if spocs are enabled or not.

We only really need campaign_id, so we can block it based on something.

If something is not a campaign and sponsored, it's a bug and shouldn't happen.

if something is not a campaign aka promo and sponsored , isn't that organic sponsored record or same as sponsored story we show now in nightly?

At this stage a sponsored collection can house content components that either have paid items or non-paid items. We should be able to test both options.

@wolasi clarifying your above comment with examples. By house content components you mean e.g. 2 Card Grids, one CardGrid has all paid promo items and second CardGrid has all non-paid promo items. Is there a possibility where one CardGrid will have to display both paid promo and non-paid promo item?

No not quite, here's an example of some different way a collection could be constructed https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=550%3A0

The basic idea is a collection can contain a single content component or a combination of them, with the ability to have paid promo item in the position we want it.

Happy to hop on a call to talk this thru if needed.

that helps, is it possible to update above collection promo figma with spoc UI variants from https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=76%3A167

Done! Is one example enough?

thanks @wolasi yes it suffice. @ScottDowne I think current patch doesn't support mixing promo and organic records in a CardGrid component as shown in collection figma. I think we assume all content inside a promo CardGrid component will be promotion only.

punamdahiya · 2019-07-30T16:46:25Z

content-src/lib/selectLayoutRender.js

+  const filterComponent = (c) => {
+    return (
+      !filterArray.includes(c.type) &&
+      (!c.sponsored || spocs.showSpocs)


ah I see you have sponsored property to indicate a campaign is paid promotion.

Yeah, I think one bit that's confusing is anything that comes from the old spocs endpoint, doesn't have the sponsored: true because it explicitly came from a sponsored endpoint so we can assume it's all spocs.

same is true for any feed data coming from a card grid in a sponsored collection. We can assume that's all sponsored content.

is it safe to assume any feed data coming from cardgrid in a sponsored collection, will have context property set , thats used in DSCard UI to display 'Sponsored by ...' label. Just want to highlight that my WIP Card UI variant patch looks for context property against an item and doesn't handle sponsored:true set against a component

punamdahiya · 2019-07-30T16:50:46Z

lib/DiscoveryStreamFeed.jsm

+      components: [
+        {
+          type: "Message",
+          campaign_id: "123456",


Is Message component has special handling by assigning campaign_id. Clarifying how campaign_id here is different from campaign_id in Line 1356 below

Line 1356 is to make a whole collection dismiss-able, and everything it wraps, line 1337 is to make just a single component dismiss-able.

In the above example of a component being dismiss-able, and that component being a message component, we basically have a wrapper for a promo text component.

punamdahiya · 2019-07-30T17:03:09Z

Overall this should work, I guess the biggest assumption this approach has is there is no way to individually identify a record is a promotion content or publisher content. All the items in a collection if it has campaign_id are promotion content and we are not allowing a collection e.g. with CardGrid have both promotion content and publisher content in it which definitely simplifies complexity.

Testing a sponsored section flow

76337a2

ScottDowne added the PR / In progress don't review yet label Jul 23, 2019

ScottDowne commented Jul 23, 2019

View reviewed changes

punamdahiya reviewed Jul 30, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Testing a sponsored section flow #5197

Testing a sponsored section flow #5197

ScottDowne commented Jul 23, 2019 •

edited

Loading

ScottDowne Jul 23, 2019

ScottDowne Jul 23, 2019

ScottDowne Jul 23, 2019 •

edited

Loading

punamdahiya Jul 30, 2019

ScottDowne Jul 31, 2019

ScottDowne Jul 23, 2019

ScottDowne Jul 23, 2019

ScottDowne Jul 23, 2019

ScottDowne Jul 23, 2019

punamdahiya Jul 30, 2019

wolasi Jul 30, 2019 •

edited

Loading

ScottDowne Jul 31, 2019 •

edited

Loading

ScottDowne Jul 31, 2019 •

edited

Loading

punamdahiya Jul 31, 2019

punamdahiya Jul 31, 2019

wolasi Jul 31, 2019

punamdahiya Jul 31, 2019

wolasi Aug 1, 2019

punamdahiya Aug 1, 2019

punamdahiya Jul 30, 2019

ScottDowne Jul 31, 2019

punamdahiya Jul 31, 2019

punamdahiya Jul 30, 2019

ScottDowne Jul 31, 2019 •

edited

Loading

ScottDowne Jul 31, 2019

punamdahiya commented Jul 30, 2019

Testing a sponsored section flow #5197

Are you sure you want to change the base?

Testing a sponsored section flow #5197

Conversation

ScottDowne commented Jul 23, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ScottDowne Jul 23, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wolasi Jul 30, 2019 • edited Loading

Choose a reason for hiding this comment

ScottDowne Jul 31, 2019 • edited Loading

Choose a reason for hiding this comment

ScottDowne Jul 31, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ScottDowne Jul 31, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

punamdahiya commented Jul 30, 2019

ScottDowne commented Jul 23, 2019 •

edited

Loading

ScottDowne Jul 23, 2019 •

edited

Loading

wolasi Jul 30, 2019 •

edited

Loading

ScottDowne Jul 31, 2019 •

edited

Loading

ScottDowne Jul 31, 2019 •

edited

Loading

ScottDowne Jul 31, 2019 •

edited

Loading