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
Conversation
There was a problem hiding this 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) |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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). |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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) |
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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)
All comments addressed. PTAL |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
* Add ad-serving-integration.md for AMP story * talk about ads styling * Addressing comments * Fix broken links * fix travis
* Add ad-serving-integration.md for AMP story * talk about ads styling * Addressing comments * Fix broken links * fix travis
* Add ad-serving-integration.md for AMP story * talk about ads styling * Addressing comments * Fix broken links * fix travis
For #12381