Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ad-serving-integration.md for AMP story #13349

Merged
merged 5 commits into from Feb 8, 2018

Conversation

lannka
Copy link
Contributor

@lannka lannka commented Feb 7, 2018

For #12381

Copy link
Member

@calebcordry calebcordry left a comment

Choose a reason for hiding this comment

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

This is helpful. Some minor grammar stuff


## Custom ad

Story publisher can do self-served ads using the [Custom ad](../../ads/custom.md)
Copy link
Member

Choose a reason for hiding this comment

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

nit: publishers

## THIS IS A WORK-IN-PROGRESS

This article is for parties who want to serve ads into AMP stories. If you're a
publisher who wants to monetize your stories, go for [monetize with story](./monetize-with-story.md) instead,
Copy link
Member

Choose a reason for hiding this comment

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

publisher who wants to monetize your stories, please refer to monetize with story unless you want to serve ads by yourselves.

and data fetched remotely.

### Template
An ad template will be written in [amp-mustache](../amp-mustache/amp-mustache.md).
Copy link
Member

Choose a reason for hiding this comment

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

An ad template must ...?

```

Important things
- An element ID is required, so that the template can be reference by the ad response.
Copy link
Member

Choose a reason for hiding this comment

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

nit: referenced


Important things
- An element ID is required, so that the template can be reference by the ad response.
- Templates need to be inlined in the AMP Story, as a direct children of `<amp-story>` element.
Copy link
Member

Choose a reason for hiding this comment

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

nit: children => child

- The content inside a template should strictly follow the [rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/validator-amp-story.protoascii) of `amp-story-grid-layer`
- Be aware of the [restrictions](../amp-mustache/amp-mustache.md#Restrictions) of `amp-mustache`.

To provide a consistent user experience, CTA (call-to-action) button should NOT
Copy link
Member

Choose a reason for hiding this comment

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

... experience, the CTA ...


To provide a consistent user experience, CTA (call-to-action) button should NOT
be included in the template. Story defines a list of CTA buttons to select from.
For details, read the "CTA ad" section below.
Copy link
Member

Choose a reason for hiding this comment

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

link to CTA ad?

- `templateId`: the ID of the inlined template that is going to be used.
- `data`: the data model to populate the selected template. The fields should match the variable names in the selected template.
- `var`: extra variables needed by the story. They will be added to the `amp-ad` element as data attributes, and picked by runtime for different use cases:
- CTA button rendering (see details in the "CTA ad" section)
Copy link
Member

Choose a reason for hiding this comment

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

link here as well?

generated page ID, prefixed with `i-amphtml-AD-`. `story-page-visible` trigger
can be used to track ad views.

Further more, ad response can leverage the `var` object to put data attributes
Copy link
Member

Choose a reason for hiding this comment

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

Further more, the ad ... to pass data ... tag, to be used ...
last part should be as a data var (singular) OR as data vars (plural)

@lannka
Copy link
Contributor Author

lannka commented Feb 7, 2018

All comments addressed. PTAL

Copy link
Member

@calebcordry calebcordry left a comment

Choose a reason for hiding this comment

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

👍

@lannka lannka merged commit 995ab6f into ampproject:master Feb 8, 2018
@lannka lannka deleted the ad-serving-integration branch February 8, 2018 18:46
protonate pushed a commit to protonate/amphtml that referenced this pull request Feb 26, 2018
* Add ad-serving-integration.md for AMP story

* talk about ads styling

* Addressing comments

* Fix broken links

* fix travis
RanAbram pushed a commit to RanAbram/amphtml that referenced this pull request Mar 12, 2018
* Add ad-serving-integration.md for AMP story

* talk about ads styling

* Addressing comments

* Fix broken links

* fix travis
protonate pushed a commit to protonate/amphtml that referenced this pull request Mar 15, 2018
* Add ad-serving-integration.md for AMP story

* talk about ads styling

* Addressing comments

* Fix broken links

* fix travis
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants