amp-form session based backend and 3rd party cookies

Question

Trying to grok this e-commerce scenario...

1. I build an amp product page in amp that has the new amp-form
2. The add to cart button is an XHR to my backend (that is session based, using cookies by default)
3. User searches for product and results take them to my amp product page, but they've never been to my site
4. They submit the add to cart form
5. the CORS preflight makes it's way to my backend, and i set all the correct allows as per https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md
6. Now the actual request is made... backend initializes a session, returns session identifier as a cookie, but since user never went to my site...just the google amp cache it's treated as a 3rd party cookie and browser discards it (cause user disables 3rd party cookies)
7. users session is lost, as is their add to cart action

So the question is, how do i keep the session around and the item in the cart? Am i missing something? is there a trick i'm not seeing?

appreciate any insights.

Answer 1

Associating the shopping cart with the CLIENT_ID would be the best way to solve this problem. Unfortunately, transferring the CLIENT_ID via forms is not yet supported in AMP. It's currently being implemented, you can watch this issue for the current status.

Here is an approach that works right now: the idea is to encode the shopping cart content into a string that is returned in the form result. This way we can generate "View Cart" and "Checkout" links including the shopping cart content. Once the user clicks on one of those links, you can create the actual shopping cart in your backend and store the user id in a cookie.

For example:

<form action-xhr="/add-to-cart" method="POST">
  <input type="hidden" name="itemId" value="headphones-123">
  <!-- Hide after form submit success -->
  <input type="submit" name="add" value="Add to Cart">

  <div submit-success>
    <template type="amp-mustache">
      <!-- shopping cart contents, e.g headphones-123  -->
      {#shoppingCartContent}
         <a href="/cart/view/{{shoppingCartContent}}">View In Cart</a>
         <a href="/cart/checkout/{{shoppingCartContent}}">Checkout</a>
      {/shoppingCartContent}
    </template>
  </div>
  <div submit-error>
     <template type="amp-mustache">
       {{message}} <!-- e.g. Only 2 Headphones are left. -->
     </template>
  </div> 
</form>

The disadvantage of this approach is that the shopping cart will be lost when the user leaves the page without viewing the cart first. This will be solved once the CLIENT_ID can be passed via amp-form.

Answer 2

I also know very limited info about AMP pages but I suggest that you please read through the use of User identification and try using an AMP-generated client ID. As mentioned in the documentation:

By default, AMP will manage the provision of a client ID whether the page is accessed from the publisher's original website or through a cache.

Likewise, learn more about client ID substitution, including how to add an optional user notification ID, in Variables supported in AMP analytics.

Hope that helps!