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

AnuragVasanwala commented 3 years ago

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 for GPT Ad as a standard feature.

Closes #35989

Design Document

Motive of this I2I is to reduce development time and integrate best practices for GPT Ad. And thus, design of the component should be identical to the official GPT API.

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

<bento-gpt
      ad-unit-path="/21730346048/test-skyscraper"
      opt-div="div1"
      height="600"
      width="120"
    >
    <div slot="fallback">Error while loading script.</div>
</bento-gpt>

Sample with Slot targeting

const targetingAtf = {color: 'red', position: 'btf'};
const targetingBtf = {position: 'btf'};
...
<bento-gpt
    ad-unit-path="/6355419/Travel/Asia"
    opt-div="div2_atf"
    height="90"
    width="728"
  targeting={JSON.stringify(targetingAtf)}
>
    <div slot="fallback">Error while loading script.</div>
</bento-gpt>
<bento-gpt
    ad-unit-path="/6355419/Travel/Asia"
    opt-div="div2_btf"
    height="90"
    width="728"
    targeting={JSON.stringify(targetingBtf)}
>
    <div slot="fallback">Error while loading script.</div>
</bento-gpt>

Sample with `disableInitialLoad`

<bento-gpt
    ad-unit-path="/21730346048/test-skyscraper"
    opt-div="div3"
    height="250"
    width="300"
    disable-initial-load
>
    <div slot="fallback">Error while loading script.</div>
</bento-gpt>
...
<button
    onclick="
    googletag.cmd.push(
      function() {
        googletag.pubads().refresh();
      }
    );"
>
    Show/Refresh Ad
</button>

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

powerivq commented 2 years ago

@zombifier

zombifier commented 2 years ago

Hi @AnuragVasanwala, thanks for your contribution. Given that you're running AMP on Bento, and that the amp-ad doubleclick component was created to allow (a subset of) GPT to be used on the more restrictive AMP-validated pages, we believe that just using regular GPT is the best option here instead of creating a new Bento component. Please let us know your opinions.

AnuragVasanwala commented 2 years ago

Hi @zombifier, thank you for the prompt response. Actuallly, development for the Bento GPT has begun with the below thoughts:

Integrate best practices for GTP as a standard feature:
- Single Request Architecture
- Load above the fold Ads early or when they come into ViewPort (with IntersectionObserver)
- Lazy-load Ad below the fold (with disableInitialLoad)
- Provide fallback similar to amp-ad which helps in case of error while loading
- Loader Animation

The goal of the PR is to provide a component that utilizes above practices as a standard feature, which makes use of the GPT Ad easier and developer does not have to deal with the complexity of best practices.

Hi @AnuragVasanwala, thanks for your contribution. Given that you're running AMP on Bento, and that the amp-ad doubleclick component was created to allow (a subset of) GPT to be used on the more restrictive AMP-validated pages, we believe that just using regular GPT is the best option here instead of creating a new Bento component. Please let us know your opinions.

bento-gpt will work on both platforms, so developers will not need to put efforts to make their existing ad codes AMP compatible. It is code once and deliver on AMP and Non-AMP both.

Let me know your opinions.

Cc @adamsilverstein

adamsilverstein commented 2 years ago

Thanks for the pin @AnuragVasanwala

bento-gpt will work on both platforms, so developers will not need to put efforts to make their existing ad codes AMP compatible. It is code once and deliver on AMP and Non-AMP both.

This is a critical point, especially for sites that want to support both AMP and non-AMP pages, or who want to primarily use AMP, except for certain critical features such as ads.

In my experience, one big challenge of a site implementing amp-ad in addition to "classic" gpt ads, was the need to create and maintain two separate configurations. Any changes to slot definitions for example, would need to be made in both AMP and non-AMP code. With bento-gpt as you are proposing, my understanding is that a single configuration could be used that would work for both AMP and non-AMP contexts.

the amp-ad doubleclick component was created to allow (a subset of) GPT to be used on the more restrictive AMP-validated pages

Question: besides being available in the non AMP context, and enabling a single configuration for AMP and non-AMP, what other capability differences are there between the proposed bento-gpt component and the amp-ad (doubleclick) components?

AnuragVasanwala commented 2 years ago

Thank you so much @adamsilverstein.

Question: besides being available in the non AMP context, and enabling a single configuration for AMP and non-AMP, what other capability differences are there between the proposed bento-gpt component and the amp-ad (doubleclick) components?

We can have few advantages with Bento Environment over AMP:

In bento-gpt it would be possible to use multi size ads without any restrictions. (keeping max width and max height checks only to avoid CLS issues)
The bento-gpt can also use header bidding without any restrictions. (if there is any in amp-ad)

powerivq commented 2 years ago

@AnuragVasanwala I think it is actually the other way. If sites start to use gpt.js for both AMP and non-AMP, they will share the same configuration and tag. The proposed migration will not only require a porting of doubleclick extension, it require a full porting of amp-ad and amp-a4a.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ampproject / amphtml