AMP Integration
This code snippet is designed to work within an AMP HTML document. The code integrates various AMP-specific components and functionality, particularly focusing on content access and subscription management.
SANDBOX ENVIRONMENT: TESTING/STAGING ENVIRONMENT
API_URL
IFRAME_URL
<!DOCTYPE html>
<html amp lang="en">
<head>
<!-- If not Included -->
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
<script id="amp-access" type="application/json">
{
"authorization": "{API_URL}/content/amp?rid=READER_ID&_=RANDOM&useRid=false&externalUserId={{userID}}&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&title=QUERY_PARAM(title)",
"pingback": "https://pub.com/amp-ping?rid=READER_ID&url=SOURCE_URL",
"authorizationFallbackResponse": {
"granted": true
},
"noPingback": true
}
</script>
</head>
<body>
//added logout btn
<div amp-access="logoutRedirectUrl" amp-access-hide>
<div class="logout-container">
<template amp-access-template type="amp-mustache">
<button class="logout-button" id="logoutButtonConscent" on="tap:AMP.navigateTo(url='{{logoutRedirectUrl}}'),trackClick">Logout</button>
</template>
</div>
</div>
<div amp-access="NOT granted" amp-access-hide>
<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="{IFRAME_URL}/static/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{loginRedirectUrl}}&userId={{userId}}"
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>
<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="{IFRAME_URL}/static/index.html?rid={{rid}}&clientId={{clientId}}&contentId={{contentId}}&journey={{journey}}&URL={{loginRedirectUrl}}&userId={{userId}}"
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>
<!-- Rest of the content here -->
<div style="margin-top: 15px">
<template amp-access-template type="amp-mustache">
<div style="color: orange; font-size: 24px">
-------Content Purchased------------
</div>
<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.
</template>
</div>
</div>
</body>
</html>Last updated