Amp Documentation
Accelerated Mobile Pages (AMP) is an open source project created to improve the performance of web pages for mobile devices.
Last updated
Accelerated Mobile Pages (AMP) is an open source project created to improve the performance of web pages for mobile devices.
Last updated
SANDBOX ENVIRONMENT: TESTING/STAGING ENVIRONMENT
The URLs mentioned above need to be passed in the authorization API.
A few points need to be noted:
If the content is opened and a meter banner is visible, the metering iframe gets initialized.
If the paywall needs to be shown, the paywall iframe gets initialized.
Otherwise, the content is opened through amp-access="granted".
* denotes the mandatory parameters.clientContentId*: A unique ID if each content
clientId*: ClientId present on the Conscent Dashboard.
rid*: Provided by the AMP ecosystem, this is a unique identifier of the Reader as seen by AMP. ()
url*: The source URL
title*: the title of the content.
journey*: {{journey}} //This has to be passed as it is on the code//
categories: category of the content
tags: tag of the content
sections: section of the content
authorName: author of the content
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<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;
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style>
</noscript>
<style amp-custom>
h1 {
margin: 0px;
}
.iframe-container-inarticle {
width: 550px;
max-width: 100vw;
height: 520px;
position: absolute;
top: 200px;
text-align: left;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.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-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-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-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script id="amp-access" type="application/json">
{
"authorization": "https://api.conscent.art/api/v1/content/amp?rid=READER_ID&_=RANDOM&clientContentId=QUERY_PARAM(clientContentId)&clientId=QUERY_PARAM(clientId)&categories=QUERY_PARAM(categories)&tags=QUERY_PARAM(tags)§ions=QUERY_PARAM(sections)&authorName=QUERY_PARAM(authorName)&url=SOURCE_URL",
"pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
"authorizationFallbackResponse": {
"granted": true
},
"noPingback": true
}
</script>
</head>
<body>
<div>
<h1 id="hello">Hello AMP page!</h1>
<p>Early use Scientists are still debating when people started wearing clothes. Estimates by various experts have
ranged from 40,000 to 3 million years ago. Some more recent studies involving the evolution of body lice have
implied a more recent development with some indicating a development of around 170,000 years ago and others
indicating as little as 40,000. No single estimate is widely accepted.</p>
<!-- if inarticle then wrap inside this <div class="iframe-container-inarticle"></div> -->
<div amp-access="(NOT granted OR meteringActionId) AND isInArticle" amp-access-hide class="inarticle-style">
<template amp-access-template type="amp-mustache">
<amp-iframe id="conscentIframe" style="position: absolute;top: 0px;width: 100vw;height: 100vh;" allowfullscreen
width="100vh" height="50vh"
src="http://localhost:3008/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{url}}"
layout="responsive" resizable id="myAmpIframe"
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation">
<div style="position: absolute;top: 50%;left: 43%;display: flex;justify-content: center;align-items: center;"
placeholder>
<amp-img src="https://storage.googleapis.com/bkt-conscent-public-stage/808.gif" placeholder layout="fixed"
width="140px" height="20px"></amp-img>
</div>
<div overflow="">Read more!</div>
</amp-iframe>
</template>
</div>
<div amp-access="(NOT granted OR meteringActionId) AND (NOT isInArticle)" amp-access-hide
style="position: fixed; top: 0px">
<template amp-access-template type="amp-mustache">
<amp-iframe id="conscentIframe" style="position: absolute;top: 0px;width: 100vw;height: 100vh;" allowfullscreen
width="100vh" height="50vh"
src="http://localhost:3008/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{url}}"
layout="responsive" resizable id="myAmpIframe"
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation">
<div style="position: absolute;top: 50%;left: 43%;display: flex;justify-content: center;align-items: center;"
placeholder>
<amp-img src="https://storage.googleapis.com/bkt-conscent-public-stage/808.gif" placeholder layout="fixed"
width="140px" height="20px"></amp-img>
</div>
<div overflow="">Read more!</div>
</amp-iframe>
</template>
</div>
<div amp-access="granted" amp-access-hide>
<p>Early use Scientists are still debating when people started wearing clothes. </p>
<!-- Rest of the content here -->
<div style="margin-top: 15px">
<template amp-access-template type="amp-mustache">
<p>Dynamic content: {{{cscContent}}}</p>
Early use Scientists are still debating when people started wearing clothes. Estimates by various experts have
ranged from 40,000 to 3 million years ago. Some more recent studies involving the evolution of body lice have
implied a more recent development with some indicating a development of around 170,000 years ago and others
indicating as little as 40,000. No single estimate is widely accepted.Early use Scientists are still debating
when people started wearing clothes.No single estimate is widely accepted.Early use Scientists are still debating
when people started wearing clothes. Estimates by various experts have
ranged from 40,000 to 3 million years ago.
</template>
</div>
</div>
</div>
</body>
</html>Enter the Standard Pages homepage URL in the Login Settings under the Visualise Section on the
Attaching the link to navigate to the script -
