CODEWITHSUNDEEP
amp-html
Jan
Jan

Reputation: 53

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

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:

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

Upvotes: 3

Views: 6042

Answers (4)

Николай Николаевич
Николай Николаевич

Reputation: 36

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>

Upvotes: 2

cabreracanal
cabreracanal

Reputation: 934

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

Upvotes: 3

derat
derat

Reputation: 217

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:

  1. Load https://www.ampproject.org/?foo=bar.
  2. Click an arbitrary link like the one to https://www.ampproject.org/docs/get_started/about-amp.html.
  3. Open the JavaScript console.
  4. 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.

Upvotes: 1

Avi
Avi

Reputation: 2383

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

Upvotes: 3

Related Questions