AMP How to dynamically get href from link with ref

Question

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>

Answer 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.