CODEWITHSUNDEEP
javascriptcookiesamp-html
RSKMR
RSKMR

Reputation: 1892

AMP set and get cookies values

I am new in this AMP. In web I have scenario like below.

Example I have a page with 100 paragraphs content ... For the user first time visit the page displaying only 10 paragraphs of content. then will ask to user email address in input form. after user provide the email address then will display remaining 90 paragraphs content... The same user visit 2nd time that page we displayed the content without asking email.

Implementation Logic in WEB

  1. After user enter the email address we stored the values in cookies.
  2. If the user visit 2nd time based on cookie values we display the content..

So same logic needs to implements the AMP pages.

I design the form in amp and other stuff but struggling to set the cookie values..

The following code I am used in WEB:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Once user enter the email and submit the form

setCookie('article-page','email','XXXXX');

Upvotes: 4

Views: 6498

Answers (3)

Passele
Passele

Reputation: 66

My problem was whether or not to show a popup on an AMP page according to the user's preference stored in a cookie. Sebastian Benz's answer showed me the direction on how to do this:

<!DOCTYPE html>
<html amp lang="en">
<head>
  <meta charset="utf-8">
  <title>Popup with amp-access</title>
  <link rel="canonical" href="/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <style amp-boilerplate>
    body {-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both;}
    @-webkit-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; }}
    @-moz-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; }}
    @-ms-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; }}
    @-o-keyframes -amp-start { from { visibility: hidden; } to { visibility: visible; }}
    @keyframes -amp-start { from {visibility: hidden;} to { visibility: visible; }}
    noscript { display: none; }
  </style>
  <style amp-custom>
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #eee;
      padding: 20px;
      border: 2px solid #000;
    }
    .popup form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .popup button {
      margin-top: 10px;
    }    
  </style>
  <!-- Amp-access configuration -->
  <script id="amp-access" type="application/json">
    {
      "authorization": "authorize.php",
      "pingback":  "authorize.php",
      "authorizationFallbackResponse": {
        "neverShowAgain": false
      }
    }
  </script>  
</head>
<body>
<div id="popup" class="popup" amp-access="NOT neverShowAgain" amp-access-hide>
    <p>This is a popup message</p>
    <form method="post" action-xhr="set-cookie.php" target="_top">
      <label>
        <input type="checkbox" name="neverShowAgain" >
         Do not show this popup again
      </label>
      <button type="submit" on="tap:popup.hide">Close</button>
    </form>
  </div>
</body>
</html>

Code on the server:

<?php
    // set-cookie.php
    
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        if (isset($_POST['neverShowAgain']) && $_POST['neverShowAgain'] === 'on') {
            setcookie('neverShowAgain', 'true', time() + (365 * 24 * 60 * 60), "/"); // 1 year
        } else {
            setcookie('neverShowAgain', '', time() - 3600, "/"); // Expira o cookie
        }
        header('Content-Type: application/json');
        echo json_encode(['success' => true]);
    }
?>

<?php
    // authorize.php

    header('Content-Type: application/json');
    $neverShowAgain = isset($_COOKIE['neverShowAgain']) && $_COOKIE['neverShowAgain'] === 'true';
    echo json_encode(['neverShowAgain' => $neverShowAgain]);
?>

Upvotes: 0

icaksama
icaksama

Reputation: 772

You can set cookie from server-side using amp-state with credentials="include" attribute. Add this amp state in your body html:

<amp-state credentials="include" id="myState" src="https://example.com/data-state"></amp-state>

And set cookie from server side from the source url https://example.com/data-state:

$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1day

Or get cookie from server-side:

if(!isset($_COOKIE['user'])) {
  echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
  echo "Cookie '" . $cookie_name . "' is set!<br>";
  echo "Value is: " . $_COOKIE[$cookie_name];
}

Upvotes: 0

Sebastian Benz
Sebastian Benz

Reputation: 4288

You can't directly access cookies from within an AMP page. However, you can use the amp-access component to implement this behavior server-side.

You can ignore the login/logout features provided by amp-access. The only thing you need to do is to change the response for the authorization endpoint to either return true or false depending on whether the user has provided an email address. Based on this information you can then adjust the content that is displayed on the page.

Upvotes: 3

Related Questions