ampproject / ampproject/amphtml

✨Bento Component for Google Publisher Tag (`bento-gpt`)

Open
#36,685 7 comments 1 reaction 2 assignees Claimed by @keithwrightbos View on GitHub
INTENT TO IMPLEMENT Stale
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

Error while loading script.

```

#### Sample with Slot targeting
```jsx
const targetingAtf = {color: 'red', position: 'btf'};
const targetingBtf = {position: 'btf'};
...

Error while loading script.

Error while loading script.

```

#### Sample with `disableInitialLoad`
```jsx

Error while loading script.

...

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.