Skip to content

Load sticky ad after first viewport scroll#7478

Merged
zhouyx merged 5 commits intoampproject:masterfrom
zhouyx:display-after-scroll
Feb 15, 2017
Merged

Load sticky ad after first viewport scroll#7478
zhouyx merged 5 commits intoampproject:masterfrom
zhouyx:display-after-scroll

Conversation

@zhouyx
Copy link
Copy Markdown
Contributor

@zhouyx zhouyx commented Feb 10, 2017

Closes #6597
This PR introduces an experiment flag 'sticky-ad-early-load'
Now: load sticky ad after viewport scrolls down 1vp length
Experiment: load sticky ad after first viewport scroll

const getSizeSpy = sandbox.spy();
const getScrollHeightSpy = sandbox.spy();

impl.viewport_.getScrollTop = function() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const getScrollTopStub = sandbox.stub(impl.viewport_, 'getScrollTop');
getScrollTopStub.returns(1);

@jridgewell
Copy link
Copy Markdown
Contributor

Closes #6597? Please update the description to say so. 😀

} from '../../../src/style';

/** @const */
const TAG = 'sticky-ad-early-load';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TAG is not the right metaphor here, maybe EARLY_LOAD_EXPERIMENT ?

* Display and load sticky ad.
* @private
*/
displayAfterScroll_() {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just display_()

displayAfterScroll_() {
onScroll_() {
if (isExperimentOn(this.win, TAG)) {
this.displayAfterScroll_();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would show it as soon as scrolling starts, we want to show the ad when scrolling ends, resources-impl already has some logic for detecting scroll stop, it would be nice to refactor that into a common helper to use here as well. I think a var scrollEndUnlisten = this.viewport_.onScrollEnd() would be a nice API to have that can be used by this and resources-impl

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As agreed #6597 (comment) want to show the ad after first user interaction. As long as scroll slows down and resources manager can handle this mutate, it is OK to display before scroll fully stops.
#deferMutate already does the work for me.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoa! didn't know #deferMutate does that. AMAZING.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#deferMutate will only helps to mutate callback to execute at earliest point. But resources manager won't measure elements until scroll velocity decrease to certain threshold. so i think it's fine to use this.viewport_.onScroll() as resources manager already handle the optimization for me.

I am also OK with using this.viewport_.onChanged() as on changed will only be fired after scroll slows down.
https://github.com/ampproject/amphtml/blob/master/src/service/viewport-impl.js#L713

@zhouyx
Copy link
Copy Markdown
Contributor Author

zhouyx commented Feb 15, 2017

👀

@zhouyx zhouyx merged commit b1ee7aa into ampproject:master Feb 15, 2017
@zhouyx zhouyx mentioned this pull request Feb 21, 2017
mrjoro pushed a commit to mrjoro/amphtml that referenced this pull request Apr 28, 2017
* add experiment flag

* add cleanup issue

* address comment

* fix lint

* nit
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants