Skip to content

Commit

Permalink
✨ amp-subscriptions-google real time config (#26223)
Browse files Browse the repository at this point in the history 
* Initial commit for rtc

* Works E2E, still needs tests and doc.

* ad TAG to user.warn

* dep check exception

* Add tests and doc

* fix dep check

* remove accidentally duped code

* remove missing }

* fix merge screw up

* Typos

Co-authored-by: Chris Antaki <ChrisAntaki@gmail.com>

* typos

Co-authored-by: Chris Antaki <ChrisAntaki@gmail.com>

* typos

Co-authored-by: Chris Antaki <ChrisAntaki@gmail.com>

Co-authored-by: Chris Antaki <ChrisAntaki@gmail.com>
  • Loading branch information
@jpettitt @ChrisAntaki
jpettitt and ChrisAntaki authored Jul 9, 2020
1 parent 81f88ce commit c1c08fe
Show file tree
Hide file tree
Showing 14 changed files with 701 additions and 126 deletions.
18 changes: 17 additions & 1 deletion build-system/server/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1138,7 +1138,7 @@ app.use('/subscription/:id/entitlements', (req, res) => {
cors.assertCors(req, res, ['GET']);
res.json({
source: 'local' + req.params.id,
granted: true,
granted: req.params.id > 0 ? true : false,
grantedReason: 'NOT_SUBSCRIBED',
data: {
login: true,
Expand All @@ -1147,6 +1147,22 @@ app.use('/subscription/:id/entitlements', (req, res) => {
});
});

app.use('/subscriptions/skumap', (req, res) => {
cors.assertCors(req, res, ['GET']);
res.json({
'subscribe.google.com': {
'subscribeButtonSimple': {
'sku': 'basic',
},
'subscribeButtonCarousel': {
'carouselOptions': {
'skus': ['basic', 'premium_monthly'],
},
},
},
});
});

app.use('/subscription/pingback', (req, res) => {
cors.assertCors(req, res, ['POST']);
res.json({
Expand Down
1 change: 1 addition & 0 deletions build-system/test-configs/dep-check-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,7 @@ exports.rules = [
'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/doc-impl.js',
'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/entitlement.js',
'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/constants.js',
'extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.js->extensions/amp-subscriptions/0.1/url-builder.js',

// amp-smartlinks depends on amp-skimlinks/link-rewriter
'extensions/amp-smartlinks/0.1/amp-smartlinks.js->extensions/amp-skimlinks/0.1/link-rewriter/link-rewriter-manager.js',
Expand Down
286 changes: 286 additions & 0 deletions examples/amp-subscriptions.rtc.amp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>subscriptions example</title>
<link rel="canonical" href="amps.html">
<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>
<script async custom-element="amp-subscriptions" src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"></script>
<script async custom-element="amp-subscriptions-google" src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"isAccessibleForFree": "False",
"isPartOf": {
"@type": ["CreativeWork", "Product"],
"name" : "Product A",
"productID": "scenic-2017.appspot.com:news"
}
}
</script>
<script type="application/json" id="amp-subscriptions">
{
"services": [
{
"authorizationUrl": "//localhost:8000/subscription/0/entitlements",
"pingbackUrl": "//localhost:8000/subscription/pingback",
"actions":{
"login": "//localhost:8000/subscription/login",
"subscribe": "//localhost:8000/subscription/subscribe"
}
},
{
"serviceId": "subscribe.google.com",
"skuMapUrl": "//localhost:8000/subscriptions/skumap"
}
]
}
</script>


<link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
<style amp-custom>
body {
margin: 0;
font-family: 'Georgia', Serif;
}

.brand-logo {
font-family: 'Open Sans';
}

.ad-container {
display: flex;
justify-content: center;
}

.content-container p {
line-height: 24px;
}

header,
.article-body {
padding: 15px;
}

.full-bleed {
margin: 0 -15px;
}

figure {
margin: 0;
}

figcaption {
color: #6f757a;
padding: 15px 0;
font-size: .9em;
}

.author {
display: flex;
align-items: center;

background: #f4f4f4;
padding: 0 15px;

font-size: .8em;

border: solid #dcdcdc;
border-width: 1px 0;
}

.header-time {
color: #a8a3ae;
font-family: 'Roboto';
font-size: 12px;
}

.author p {
margin: 5px;
}

.byline {
font-family: 'Roboto';
display: inline-block;
}

.byline p {
line-height: normal;
}

.byline .brand {
color: #6f757a;
}

.standfirst {
color: #6f757a;
}

.mailto {
text-decoration: none;
}

#author-avatar {
margin: 10px;
border: 5px solid #fff;
width: 50px;
height: 50px;
border-radius: 50%;
}

h1 {
margin: 5px 0;
font-weight: normal;
}

footer {
display: flex;
align-items: center;
justify-content: center;
height: 226px;
background: #f4f4f4;
}

hr {
margin: 0;
}

amp-img {
background-color: #f4f4f4;
}

.login-section {
margin: 16px;
margin-top: 24px;
padding: 16px;
background: #ffc;
}

amp-subscriptions-dialog { padding: 10px;}



</style>
</head>
<body>


<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Example Pageview"
}
},
"authorizationReceived": {
"on": "subscriptions-entitlement-resolved",
"request": "event",
"vars": {
"eventCategory": "amp-subscriptions",
"eventAction": "subscriptions-entitlement-resolved",
"eventValue": "ACCESS_READER_ID/AUTHDATA(granted)/${serviceId}"
}
},
"pingbackSent": {
"on": "subscriptions-action-subscribe-started",
"request": "event",
"vars": {
"eventCategory": "amp-subscriptions",
"eventAction": "action-subscribe-started"
}
}
}
}
</script>
</amp-analytics>


<main role="main">
<article>


<div class="content-container">
<header>
<h1 itemprop="headline">Lorem Ipsum</h1>
<time class="header-time" itemprop="datePublished"
datetime="2015-09-14 13:00">September 14, 2015</time>
<p class="standfirst">
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
</p>
</header>

<div class="author">
<amp-img src="img/sample.jpg" id="author-avatar" placeholder
height="50" width="50">
</amp-img>
<div class="byline">
<p>
by <span itemscope itemtype="http://schema.org/Person"
itemprop="author"><b>Lorem Ipsum</b>
<a class="mailto" href="mailto:lorem.ipsum@example.com">
lorem.ipsum@</a></span>
</p>
<p class="brand">PublisherName News Reporter<p>
</div>
</div>

<section subscriptions-section="content">
This sample page is for real time config of SwG buttons - it looks like you are subscribed so you won't see the buttons! Try again in incognto mode,
</section>



<section subscriptions-section="content-not-granted">
Login or subscribe to read more.
</section>

<br/>



</div>
</article>
</main>

<footer>
<div class="brand-logo">PublisherLogo</div>
</footer>


<template type="amp-mustache" subscriptions-dialog subscriptions-display="NOT Subscribed">
<div>Dialog for non subscribed users, the action of this button is configured by the RTC url<div>
<div>
Single SKU
<div id="subscribeButtonSimple" subscriptions-google-rtc="true"
subscriptions-display="NOT Subscribed"
subscriptions-action="subscribe"
subscriptions-service="subscribe.google.com"
subscriptions-decorate>Subscribe</div>
</div>
<div>
Carousel
<div id="subscribeButtonCarousel" subscriptions-google-rtc="true"
subscriptions-display="NOT Subscribed"
subscriptions-action="subscribe"
subscriptions-service="subscribe.google.com"
subscriptions-decorate>Subscribe</div>
</div>
</template>
<template type="amp-mustache" subscriptions-dialog subscriptions-display="Subscribed">
<div >You are already subscribed so you won't see buttons here.</div>
</template>
</body>
</html>
11 changes: 11 additions & 0 deletions extensions/amp-subscriptions-google/0.1/amp-subscriptions-google.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,14 @@
*/

@import url("../../../third_party/subscriptions-project/swg-button.css");


/**
* Disabled Action when realtime config has not loaded yet
* Can be overridden by publisher CSS
*/
[subscriptions-action][subscriptions-google-rtc] {
opacity: 0.5;
cursor: not-allowed;
}

Loading

0 comments on commit c1c08fe

Please sign in to comment.