amp-htmlamp-ad

Instant redirect without prompt when clicking an <a> tag inside an AMP Story html content


When i click on a link tag inside an AMP Story Page, a prompt is opened first and when clicking on prompt then the page redirects. Is there a way to instantly redirect when clicking on a link inside the AMP page without the prompt? https://pasteboard.co/IyTglV9.png

I have tried to use the on="tap" event to capture the click and then with the .

AMP.navigateTo(URL=STRING, target=STRING, opener=BOOLEAN)

tried to navigate to the URL, but in the console it throws some unexpected error

Invalid action definition in ​Subscribe​​ : [ tap:AMP.navigateTo(https://apto.gr, _blank, true) ] ; expected [=]

Obviously when i change the : to = it throws the opposite error ... ; expected [:]

This is the code i am using

<button on="tap:AMP.navigateTo(https://apto.gr, _blank, true)" href="https://apto.gr" target="_blank" class="adBtn i-amphtml-error" style="color:#f30809;background:#000000;">Subscribe</button>

Using a tag has the same result.

<a on="tap:AMP.navigateTo(https://apto.gr, _blank, true)" href="https://apto.gr" target="_blank" class="adBtn i-amphtml-error" style="color:#f30809;background:#000000;">Subscribe</a>

Am i doing something wrong with the AMP.navigateTo code? I think that this is my solution but i cannot make the action to work!


Solution

  • You can't disable the redirect prompt in AMP stories body, unless you use amp-story-cta-layer

    Why?

    When AMP gurus designed AMP stories, they were worried what would happen if user clicks by accident links on the story and they get redirected, hence annoying them. That's why they added the prompt by default.

    The only links that can be tapped and redirected without prompt are those located inside amp-story-cta-layer. It must be the last element of your amp-story-page and by default it takes 100% of the width and 20% of the height of the story and it sticks to the bottom. This way there is almost no way of accidentally clicking.

    Here is the code:

    <amp-story-cta-layer>
        <a href="https://www.ampproject.org" class="button">Your link without prompt here</a>
    </amp-story-cta-layer>
    

    `enter image description here

    You can watch this lecture for more info.