AMP电子邮件附加动态参数

Question

在AMP中，我想根据用户选择动态更改链接参数。例如，如果用户选择选项1，则需要在参数中加上option = 1。这种实现是否可能，或者有另一种方法可以实现。我之所以需要附加，是因为我想用此参数加载网址。使用param提交的表单不适用于此实现。

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

我想将currentSelection中的值附加为参数。

Answer 1

可变替换可能会满足您的需求。在AMP的Links（）中，允许在字符串内部使用变量，并用相应的实际值代替。

支持的变量：

1. CLIENT_ID
2. QUERY_PARAM（参数）

链接替换要求按使用选择作为一种附加的安全措施并确认使用变量替换的意图。这是通过指定一个名为data-amp-replace的附加属性来完成字符串值包含以空格分隔的列表要替换的所需变量。

示例：

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

您可以查看详细的文档here。有一个参数提交here的示例。形式上也允许变量替换。也来看看see if it helps。

this Github issue中也有一个讨论，它看起来与您要实现的目标相似。

Answer 2

由于无法在AMP中绑定到[href]，因此也不支持URL替换，因此，实现此目的的一种方法是在标记中具有多个链接，然后根据需要绑定到[hidden]来显示/隐藏它们您的选择：

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