AMP

Skip to end of metadata
Go to start of metadata

Overview

Google's Accelerated Mobile Pages, AMP, makes websites load really fast. That speed comes with a few changes to how the open web works. AMP achieves its remarkable speeds in two ways: 

  • Most JavaScript is forbidden.
  • If AMP pages are opened via Google search, they are served from Google’s servers.

AMP pages can be member-only zones, and this is where Gigya comes into play. Integrating an AMP website with Gigya registration can answer the following use cases: 

  • A publisher wants to prevent non-registered from users accessing content
  • A publisher wants to track the number of articles a registered user has viewed, to limit the number of articles a non-subscribed user can read
  • A publisher would like to be able to receive a logged-in user's consent for tracking and analytics on an AMP page 

Demo Implementation

The demo site demonstrates the following capabilities:

  • Registration
  • Login
  • Protecting content from non-authenticated users
  • Display of logged-in user details
  • User sessions (by use of a JWT)
  • Capturing/managing consent and communication preferences
  • Posting and displaying comments

Following is an explanation of the demo site's implementation. Use this as a guideline for implementing Customer Data Cloud on your own AMP site. 

To be able to provide login and registration in an AMP site the amp-access component needs to be used. The amp-access component gives control to the publisher over the following decisions and flows:

  • Create and maintain users
  • Control of metering (allow for a certain number of free views)
  • Responsibility for the login flow
  • Responsibility for authenticating the user
  • Responsibility for access rules and authorization
  • Flexibility over access parameters on a per-document basis

This component therefore provides the capability to allow Gigya (Customer Data Cloud) to manage the login and registration flows. The Customer Data Cloud account can also manage/track article views, consent and subscription requests.

To implement Customer Data Cloud login and registration flows, you need to implement the following code. 

Include the amp-access component in the headers: 

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

Then provide login and logout : 

	<script id="amp-access" type="application/json">
		{
			"authorization": "https://alejandro.gigya-cs.com/amp/auth.php?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
			"pingback": "https://alejandro.gigya-cs.com/amp/pingback.php",
			"login": {
				"sign-in": "https://alejandro.gigya-cs.com/amp/login.html?rid=READER_ID",
				"sign-out": "https://alejandro.gigya-cs.com/amp/logout.html?rid=READER_ID"
			},
			"authorizationFallbackResponse": {
				"error": true,
				"loggedIn": false
			},
			"authorizationTimeout": 10000
		}
	</script>

To display custom data, such as the number of articles viewed, the amp-mustache component is used. Read here about mustache logic-less templates, and here about their use in AMP. 

<section amp-access="loggedIn" class="checkout-section">
<template amp-access-template type="amp-mustache">
						Welcome {{firstName}}!
						{{#ampViewsCount}}You have viewed {{ampViewsCount}} articles{{/ampViewsCount}}
						<div>
							<button on="tap:weeklyNewslettersConsent.prompt()" class="ampstart-btn caps m1">
								{{#weeklySubscriptions}}Update Preferences{{/weeklySubscriptions}}
								{{^weeklySubscriptions}}Subscribe!{{/weeklySubscriptions}}
							</button>
							<button amp-access-hide tabindex="0" on="tap:amp-access.login-sign-out" class="ampstart-btn m2 caps">Logout</button>
						</div>
					</template>
				</section>
  • No labels