Amphtml: Internal links broken on Google AMP viewer

[akshaylive]

I was working on an amp page which has internal links using the "#" symbol. i.e;

<a href="#my-internal-link" ...> ... </a>

....
....

<div id="my-internal-link">

While testing it on ampproject CDN, the link works fine without issues. Example link - https://cdn.ampproject.org/c/s/dl.dropboxusercontent.com/u/530650439/abc.html

However, in the google viewer (https://www.google.com/amp/dl.dropboxusercontent.com/u/530650439/abc.html), as soon as I click on the internal link, the page navigates to https://www.google.com/amp/dl.dropboxusercontent.com/u/530650439/abc.html#amph=1 and the page doesn't scroll to the internal link. However, on the SECOND click, the page does the right thing.

Also, opening this link - https://www.google.com/amp/dl.dropboxusercontent.com/u/530650439/abc.html#notex doesn't jump the correct location.

I dug a little deeper and found out why this is happening. Google amp viewer has an iframe which loads up the CDN URL with #origin=.. at the end of the URL (and not in the query parameter), and therefore, not loading up the correct internal link.

I get it that this may be needed for analytics, and sending these parameters via URL query parameters is incorrect. There may be alternative solution to analytics though.

I propose two solutions -

1. When the link is clicked, do not navigate the outer URL (google URL) to #amph=1. Instead, if it's an internal URL, just navigate the internal iframe (the one with ampproject CDN).
2. If the #origin=... is indeed used for analytics purposes, this could be done via postMessage to the internal iframe (considering https://cdn.ampproject.com/v/ could expose access origin header to https://www.google.com/)?

[akshaylive]

• @ericlindley-g

[ericlindley-g]

Thanks for filing, @akshaylive! I'm duping to the new bug filed after conversation on amphtml-discuss.

[ericlindley-g]

FYI @sriramkrish85 , who is looking into the bug