AMP Email Append dynamic Parameters

Question

In AMP I want to change the link parameter dynamically based on the user selection. As a example if user select the option 1 , I need to append a parameter with option=1 . Is this kind of implementation possible or there is a alternative method to do that. I reason I need to append is I want to load the url with this param. The form submitting with param doesn't work for this implementation.

<amp-selector layout="container"  on="select: AMP.setState({
    currentSelection: event.targetOption,

  })" class="sample-selector" >
    <amp-img 
    src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" 
    width="50" height="50" 
    option="neutral" 
    ></amp-img>
    <amp-img 
      src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" 
      option="good" 
      width="50" height="50" option="good"></amp-img>
  </amp-selector>


  <button>
    <a href="https://mysite/page.jsp?param=234" 
      data-amp-addparams="response=currentSelection"
      >Click Button</a></button>

I want to append values in currentSelection as a param.

Answer 1

Variable substitution may meet your need. In AMP, Links (), allow variables to be used inside of strings and substituted with the corresponding actual values.

Supported Variables:

1. CLIENT_ID
2. QUERY_PARAM(argument)

Link substitution requires per-use opt-in as an added security measure and to affirm the intention to use variable substitution. This is done by specifying an additional attribute called data-amp-replace with a string value containing a space-delimited listing of the desired variables to substitute.

Example:

<a
  href="https://example.com?abc=QUERY_PARAM(abc)"
  data-amp-replace="CLIENT_ID QUERY_PARAM"
  data-amp-addparams="client_id=CLIENT_ID(bar)&linkid=l123"
  >Go to my site</a
>

You can see detailed documentation here. There is an example of parameter submission here. Variable substitution is allowed on form aswell. Have a look at it also, to see if it helps.

There is also a discussion in this Github issue, which looks similar to something you are trying to achieve.

Answer 2

Since it's not possible to bind to [href] in AMP for Email and URL substitution is also not supported, one way to achieve this is to have multiple links in your markup and show / hide them by binding to [hidden] depending on your selection:

<amp-selector layout="container"  on="select: AMP.setState({
    currentSelection: event.targetOption,

  })" class="sample-selector" >
    <amp-img 
    src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" 
    width="50" height="50" 
    option="neutral" 
    ></amp-img>
    <amp-img 
      src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" 
      option="good" 
      width="50" height="50" option="good"></amp-img>
  </amp-selector>


    <a href="https://mysite/page.jsp?param=neutral" 
      [hidden]="currentSelection != 'neutral'"
      >Click Button</a>

    <a href="https://mysite/page.jsp?param=good" 
      [hidden]="currentSelection != 'good'"
      >Click Button</a>