amphtml: I2I: amp-ad-exit indirect target

Summary

Enable stateful exit behavior in <amp-ad-exit>, by adding variable exit target that can be changed at runtime.

Motivation

Many HTML5 ads display multiple products using a swipeable image gallery. These ads usually have a header/footer area or a click-to-action button that exits, when clicked, to the URL of currently displayed product. This behavior is hard to reproduce in AMPHTML using <amp-carousel> and <amp-ad-exit>, as the <amp-ad-exit> does not maintain a state that responds to user interaction, e.g. a changed active product item index.

Details

In addition to the exit targets that we currently have in the JSON configuration (which are referenced as fixed exit targets hereafter), <amp-ad-exit> will maintain a separate mapping of variable targets to fixed targets, which do not define exit URLs by themselves, but instead point to one of the fixed targets.

A new action will be added to <amp-ad-exit>:

setVariable(name=STRING, target=STRING)

Name	Value	Meaning
name	string	name of the variable target
target	string	name of the target that this variable target points to

When this action is invoked, target will be checked to ensure it’s the name of one of the existing fixed targets, and the specified variable target will point to the new value.

To provide default value for an variable target, we have following options:

Option 1

In the JSON configuration, add a new property pointTo to NavigationTargetConfig. Whenever pointTo is provided, the target is treated as variable and all other fields are ignored.

{
  "targets": {
    "Product_0_url": {
      "final_url": "https://example.com/product0"
    },
    "current": {
      "pointTo": "Product_0_url"
    }
  }
}

Variable target is still exited through the exit action. The implementation of exit action will be changed to look up both variable targets and fixed targets.

Option 2

Allow the exit action to exit through the variable target, and provide a default value through argument, e.g.

exit(variable="current", default="Product_0_url" [, optional URL params])

This option does not require defining variable targets in JSON configuration, and arbitrary variable target name can be added through setVariable action.

Example

<amp-ad-exit id="exit-api">
<script type="application/json">
{
  "targets": {
    "Product_0_url": {
      "final_url": "https://example.com/product0"
    },
    "Product_1_url": {
      "final_url": "https://example.com/product1"
    },
    "Product_2_url": {
      "final_url": "https://example.com/product2"
    }
  }
}
</script>
</amp-ad-exit>
<div id="header"
     on="tap:exit-api.exit(variable='current', default='Product_0_url')">
</div>
<amp-carousel type="slides" autoplay
    on="slideChange:exitSelector.toggle(index=event.index, value=true)">
  <div on="tap:exit-api.exit(target='Product_0_url')">Product 0</div>
  <div on="tap:exit-api.exit(target='Product_1_url')">Product 1</div>
  <div on="tap:exit-api.exit(target='Product_2_url')">Product 2</div>
</amp-carousel>
<amp-selector id="exitSelector"
    on="select:exit-api.setVariable(name='current', target=event.targetOption)>
  <option option="Product_0_url"></option>
  <option option="Product_1_url"></option>
  <option option="Product_2_url"></option>
</amp-selector>
<button id="CTA"
     on="tap:exit-api.exit(variable='current', default='Product_0_url')">
  Buy now
</button>
<div id="footer"
     on="tap:exit-api.exit(variable='current', default='Product_0_url')">
</div>

/cc @ampproject/wg-approvers @clawr @lannka @calebcordry