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>
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (14 by maintainers)
I will update the doc when the change is released.