ampproject / ampproject/amphtml
✨Bento Component for Google Publisher Tag (`bento-gpt`)
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Summary
This I2I proposes a new Bento Advertisement Component for Google Publisher Tag.
Bento for GPT can provides seamless experience for developers by integrating [best practices](https://developers.google.com/publisher-tag/guides/ad-best-practices) for GPT Ad as a standard feature.
Closes #35989
### Design Document
Motive of this I2I is to reduce development time and integrate [best practices](https://developers.google.com/publisher-tag/guides/ad-best-practices) for GPT Ad. And thus, design of the component should be identical to the [official GPT API](https://developers.google.com/publisher-tag/reference).
This design document covers basic required attributes, actions and events that are needed for Bento GPT implementation. Additionally, `fallback` similar to `amp-ad` should be implemented in case of any error while loading advertisement.
#### Attributes
- `ad-unit-path`: Full ad unit path with the network code and unit code.
- `disable-initial-load`: Disables requests for ads on page load, but allows ads to be requested with a `refresh()` call.
- `slot-targeting`: (optional) Targeting parameter for Slot specific.
- `page-targeting`: (optional)Targeting parameter for Page specific.
- `size`
- `opt-div`: (optional) User-defined DIV id
#### Action
- `setTarget`: Set Slot target dynamically.
- `setPageTarget`: Set Page target dynamically.
- `getTarget`: Get Slot target dynamically.
- `getPageTarget`: Get Page target dynamically.
- `clearTarget`: Clear Slot target dynamically.
- `clearPageTarget`: Clear Page target dynamically.
- `display`: Instructs slot services to render the slot.
- `refresh`: Fetches and displays new ads for specific or all slots on the page.
#### Event
- `ImpressionViewableEvent`
- `SlotOnloadEvent`
- `SlotRenderEndedEvent`
- `SlotRequestedEvent`
- `SlotResponseReceived`
- `SlotVisibilityChangedEvent`
### Example
https://user-images.githubusercontent.com/75766877/139630157-098fa1b0-532d-4cd4-b9a7-3c80b93be441.mov
Based on the above implementation proposal, here are some of the examples:
#### Sample with required Attributes
```jsx
```
#### Sample with Slot targeting
```jsx
const targetingAtf = {color: 'red', position: 'btf'};
const targetingBtf = {position: 'btf'};
...
```
#### Sample with `disableInitialLoad`
```jsx
...
Show/Refresh Ad
```
### Motivation
Currently, Bento do not have Advertisement component that provides great Page-Experience. By implementing Bento for GPT, it makes development easier while maintaining best practices for GPT as well as improve Page-Experience.
### Alternative Solutions
We can directly use Google Tag Publisher API but developers needs to make sure to follow best practices for Ad as well as better Page-Experience.
### Launch Tracker
https://github.com/ampproject/amphtml/issues/36684
### Notifications
/cc @ampproject/wg-approvers
Contributor guide
Assessment
This issue has not been assessed yet.