2

I am in a situation where I want to get the href from the canonical url of my AMP web page and add it to a an AMP button where upon the button tap the event opens a new page with the canonical URL instead.

I want to do this dynamically via code.

I could use amp-binding but I do not want to add any amp-binding to the canonical URL.

This is my AMP code with the canonical URL that I want to navigate to after sales button is tapped.

Note: In AMP you tap a button and then an action is triggered unlike in HTML where you would say click.

Would anyone know how to do this and show me how to do it please? 

<link rel="canonical" href="https://mysaleswebsite.com/salepage.php"/>

<div align="center" class="img-wrapper">
 <amp-img on="tap:AMP.navigateTo(url='GET_URL_FROM_CANONICAL_LINK#productX', target='_blank', opener=true)" src="img/salesbuttonpicture.jpg" height="50" width="100" alt="Sales Page">
 </amp-img>
</div>
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Joseph
  • 789
  • 1
  • 9
  • 23

1 Answers1

-1

The first thing I would do is give the corresponding tags IDs.

<link id="canonicalUrl" rel="canonical" href="https://mysaleswebsite.com/salepage.php"/>
<amp-img id="ampButton" src="img/salesbuttonpicture.jpg" height="50" width="100" alt="Sales Page"></amp-img>

Then you can reference the attributes of those element IDs to get and assign the URL accordingly.

<script>
    const canonicalUrl = document.getElementById('canonicalUrl').href;
    document.getElementById('ampButton').setAttribute("on", "tap:AMP.navigateTo(url='" + canonicalUrl + "#productX', target='_blank', opener=true)'")
</script>

I don't know anything about AMP or if this will do anything unforeseen.

Nick Frost
  • 32
  • 2
  • Thank you Nick for your attempt to answer this Question but AMP does not even accept the – Joseph Apr 18 '19 at 07:20
  • 1
    My apologies, I was unaware of how restricted AMP is. https://stackoverflow.com/questions/43748634/add-javascript-in-amp-pages – Nick Frost May 01 '19 at 15:54