Description

Allow for expansion of anchor destination at the time of click to support adding click event information to the click string. The click x and y position are routinely sent with ad clicks. Bundling view information from an iframe subscribing to the intersectionObserver API will also be useful. Additionally allow for capturing post message based information to be included.

Implementation

Add 3 new macro expansion keys to URL Replacement Service (url-replacement.js):

1. CLICK_X extracted from click event clientX property.
2. CLICK_Y extracted from click event clientY property.
3. POSTMESSAGE which uses value from most recent post message matching signature. Required input parameters:
   origin {string}: matched against origin of received post messages to valid sender
   key {string}: included in postmessage to link value and as additional validity check

Example postmessage (requires POSTMESSAGE_URL_REPLACE property whose value is not important): {POSTMESSAGE_URL_REPLACE: 1, key: ‘<key>’, value: ‘<value’>}

Replacement service will then be modified as follows:

1. Attach click listener on document such that upon click event if target is an href, expands the href attribute
2. Attach post message listener on window where each received message that includes POSTMESSAGE_URL_REPLACE, key, and value properties and stores value in object with property origin+key. Issue: need to guard against object growth due to large number of post messages with differing origin+key values.
3. On click, determine if target is anchor with href attribute
   For CLICK_X, CLICK_Y macros, use the click event clientX/Y. It appears from here that click event may correctly provide the offset from the shadow root. Will verify this behavior. If not the case, will determine if element is within shadow root and if so, use it as the offset location.
4. Use URL Replacement Service to expand keys specified in whitelist parameter (or all if not provided) with additional support for CLICK_X and CLICK_Y keys based on click event client X/Y values. For POSTMESSAGE macro, build origin+key from inputs and extract value from object storing most recent, matching postmessage value. If no valid post message was received, set empty string as value.
5. Update href attribute, which will be used by browser as destination.

Example

<a href=”https://some.clickserver.com?foo=bar&nx=CLICK_X&ny=CLICK_Y&xm=POSTMESSAGE(foo.com,abcdef)&ym=POSTMESSAGE(foo.com,12345)&zm=POSTMESSAGE(evil.com,xss)&r=RANDOM”>click me</a>

Post Messages received from other_frame window to parent with ”foo.com” origin in the following order:

{POSTMESSAGE_URL_REPLACE: 1, key: abcdef, hello: ‘world’}
{key: 12345, hello: ‘world’}
{POSTMESSAGE_URL_REPLACE: 1, key: abcdef, hello: ‘newworld’}

Click on link with coordinates 123/456 results in destination (RANDOM macro replaced with random generated value of 91238):
https://some.clickserver.com?foo=bar&nx=123&ny=456&xm=newworld&ym=&zm=&r=91238

Considerations

Ensure CLICK_X/CLICK_Y works appropriately in both shadow DOM and cross iframe cases. For shadow DOM, query selector will reference parent element for the creative via the following (where body element in the creative included unique id): # :parent

Alternative Implementations

Create a new amp-anchor extension with the following attributes. Disregarded due to need for retagging creatives however should complexity/use cases increase, this should be revisited.

1. href: with expansion keys included (required)
2. data-postmessage-origin: Type string. If given, stores last post message from origin given, to be used for POSTMESSAGE expansion key (optional).
3. data-postmessage-source: Type element or string (used for query selector to element) of iframe from which the post message is sent. Used in combination with origin to determine source of post messages to be stored (optional)
4. data-whitelist-keys: comma-separated list of expand macro keys, to prevent inadvertent expansion (optional)