如何获取 AMP 网站上的查询字符串值？

Question

有没有办法从 AMP-HTML 站点检索查询字符串值并将它们存储在 cookie 中或在 link 中使用它们？

示例：

用户点击广告www.example.com/amp?foo=bar
打开 AMP 站点
点击 link 并进行结帐 - 不是 AMP www.example.com/checkout?foo=bar

Answer 1

您应该能够使用 QUERY_PARAM() 变量来获取 amp-pixel 或 amp-analytics 中的变量。

https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#query_param

Answer 2

在您的非 AMP 结帐页面上，您可以使用 JavaScript 读取 document.referrer 并提取传递到 AMP 着陆页的查询字符串。

例如：

加载https://www.ampproject.org/?foo=bar.
点击任意一个 link 点赞 https://www.ampproject.org/docs/get_started/about-amp.html。
打开 JavaScript 控制台。
检查 document.referrer，发现它包含 "https://www.ampproject.org/?foo=bar"。

请注意 document.referrer may be empty 当 HTTPS 页面 link 到 HTTP URL。

Answer 3

只是扩展 Avi 的答案。您也可以像这样在表单和锚标记 () 中使用它：

<form method="post" id="form1" role="search" action-xhr="https://example.com/path/to/something" target="_top" on="submit-success:msg-thanks-sticky;submit-error:msg-sorry-sticky">
[...]
<input type="hidden" class="inputHidden" name="param1" value="QUERY_PARAM(param1)" data-amp-replace="QUERY_PARAM">
<input type="hidden" class="inputHidden" name="param2" value="QUERY_PARAM(param2)" data-amp-replace="QUERY_PARAM">

[...]
</form>

注意此特定标签所需的 "data-amp-replace" 属性。

详细信息： - https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#substitution-timing - https://github.com/ampproject/amphtml/blob/master/extensions/amp-form/amp-form.md#variable-substitutions

Answer 4

您可以使用QUERY_PARAM

https://expample.amp.com?slug=1234abc

<a
  href="https://example.com?abc=QUERY_PARAM(slug)"
  data-amp-replace="QUERY_PARAM"
  >Go to my site</a
>

<amp-list id="time"
            layout="fixed-height"
            height="18"
            src="https://api.exemple.com/posts?slug=QUERY_PARAM(slug)"
            binding="refresh"
            data-amp-replace="QUERY_PARAM"
            single-item
            items=".">
    <template type="amp-mustache">
      ...
    </template>
  </amp-list>

如何获取 AMP 网站上的查询字符串值？

How can I get query string values on a AMP site?

amp-html