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

Question

Is there a way to retrieve query string values from an AMP-HTML Site and store them in a cookie or use them in a link?

Example:

User clicks on an ad www.example.com/amp?foo=bar
Open the AMP Site
Click on a link and come to the checkout - not AMP www.example.com/checkout?foo=bar

Possible duplicate of [Get URL query string](http://stackoverflow.com/questions/8469767/get-url-query-string) — S.I., Oct 14 '16 at 06:01
Yes, it is possible, but you just to preprocess it on the server. — Andrew, Oct 14 '16 at 21:05

score 3 · Answer 1 · answered Oct 17 '16 at 21:56

3

You should be able to use QUERY_PARAM() variable to get the variables in amp-pixel or amp-analytics.

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

answered Oct 17 '16 at 21:56

Avi

2,373
17
22

score 3 · Answer 2 · answered Dec 01 '17 at 10:23

Just extending Avi's answer. You can also use it in forms and anchor tags () like this:

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

Pay attention to the "data-amp-replace" attribute, needed for this specific tags.

For detailed information: - 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

score 2 · Accepted Answer · answered Jul 12 '20 at 10:20

You can use 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>

score 0 · Answer 4 · answered Oct 29 '16 at 21:04

On your non-AMP checkout page, you could use JavaScript to read document.referrer and extract the query string that was passed to the AMP landing page.

For example:

Load https://www.ampproject.org/?foo=bar.
Click an arbitrary link like the one to https://www.ampproject.org/docs/get_started/about-amp.html.
Open the JavaScript console.
Examine document.referrer and see that it contains "https://www.ampproject.org/?foo=bar".

Note that document.referrer may be empty when an HTTPS page links to an HTTP URL.

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

4 Answers4

Linked