Building a Microsite Publishing Service with Contentful and AMP.
Build what matters
As lined out in “Leveraging AMP and Contentful for a flawless Customer Experience” Marketing needs and IT infrastructure is shifting towards a decoupled architecture to serve different touchpoints and marketeer requirements.
Software architects and developers need to adapt to those challenges by delivering not only a higher business value but also to manage costs and build future proof systems which are able to cope with new touchpoints and highly accelerated content production pipelines.
Let’s explore building a part of the previously proposed architecture. As a real-world-use-case marketing content needs to be distributed to be used in different touchpoints to contribute to a flawless customer experience. In this paper we explore in depth how this part of the architecture can be implemented.
We’ll use node.js with express as part of our stack, AMP (originally an acronym for Accelerated Mobile Pages) for the frontend and contentful to serve as our backend-as-a-service.
AMP is an open source web component framework and a website publishing technology introduced by Google. AMP offers support for building websites, ads, interactive stories and for the creation of interactive emails in the near future.
Contentful is a headless CMS, a backend only CMS designed from ground up as an agnostic content repository that exposes content via an API for display on any device and touchpoint.
Let’s dive in
We’ll build a microsite service with AMP and Contentful. This setup could be part of a larger installment but to simplify things, we just think about a smaller part of the whole IT landscape.
Building a content model
First thing we need to do is to come up with is a proper content model for our microsites. Let’s say we want build a simple page containing a headline, a copy text and an image to go with it. Also, a call to action might come in handy.
After registering a plan with Contentful (https://www.contentful.com/) we login and add a content model. For the sake of simplicity, we call it Microsite and hit create. In production, you may want to think a bit longer about choosing this name. A more generic approach for describing this collection of fields might be suitable.
After creating the model we need to add all the fields we planned earlier. We only use the basic types for our project, but there are a lot of specialized types we could leverage for a more sophisticated editing experience. However, we use Short text and Media for this example.
Having everything set up we’re good to go to add some content for our microsite. Let’s promote AMP here.
Don’t forget to publish the content, we’ll need to have it available for rendering. If you do like to learn more about Contentful, just head over to the documentation page https://www.contentful.com/developers/
Setting up the AMP page template
We will need an AMP template to render our content. AMP is a collection of web components we could use to build a page many of them with advanced functionalities. But as said, we will keep things simple here.
We’re are starting off with some AMP code:
<!doctype html>
<html ⚡>
<head>
<meta charset=”utf-8">
<script async src=”https://cdn.ampproject.org/v0.js"></script>
<link rel=”canonical” href=”<%= microsite.url %>”>
<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>body{ margin: 0; padding: 0; font-family: sans-serif; font-size: 16px; color: #fff; background: #000; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } section{ margin:30px } h1{ font-size: 31px; display: block; color: #45dca5; } a{ margin-top: 30px; font-family: sans-serif; font-size: .9375em; cursor: pointer; background-color: transparent; border: 2px solid #45dca5; display: inline-block; color: #45dca5; padding: 10px 0 7px; box-sizing: border-box; text-transform: uppercase; text-align: center; width: 100%; transition: background-color 0.2s, color 0.2s, font-weight 0.2s; text-decoration: none; transition: background-color 0.2s, color 0.2s, font-weight 0.2s; }a:hover{ font-weight: bold; background-color: #45dca5; color: #000; }</style><title><%= microsite.title %></title></head><body><! — microsite content →<section><h1><%= microsite.headline %></h1><amp-img src=”<%= microsite.image.fields.file.url %>”width=”1080"height=”610"layout=”responsive”></amp-img><%= microsite.copy %><a href=”<%= microsite.linkUrl %>”><%= microsite.linkText %></a></section><! — /microsite content →</body></html>
In this code several noteworthy things are happening, but let’s go through bit by bit.
The doctype definition, as well as the html attribute (html amp works also) is required.
Next the runtime needs to be loaded which is done via the script tag in the header. Also, all styles need to be inlined for performance reasons.
What’s important is that the canonical tag should point to the original HTML site. In our case there is none, so the URL points to itself.
If you want to learn more about AMP go and check out the project’s comprehensive website https://amp.dev.
We’re going to use ejs (https://ejs.co) as a template engine. To access objects we use the following notation.
<%= object.attribute %>We’ll take a look into populating the values with a node.js express app in the next chapter.
Gluing it all together
We’ll set up a simple express app which will fetch the content and render it. In a real-life-scenario, this could be extended with caching and scaled horizontally or be set up to run as a serverless function.
To access our microsite, we’ll use the ID of the entry. After retrieving the key and the space ID from contentful (Settings -> API Keys) we need to setup our express app.
First, we need to install express-generator to scaffold a simple express app with ejs support:
npm install -g express-generatornpx express-generator — view=ejsnpm install — save contentfulnpm start
With the basic app scaffolded we can open routes/index,js and edit the file.
const contentful = require(‘contentful’)const express = require(‘express’);const router = express.Router();const SPACE_ID = ‘the space ID goes here’const ACCESS_TOKEN = ‘your access token goes here’/* GET home page. */router.get(‘/:microsite’, function(req, res, next) {const client = contentful.createClient({// This is the space ID. A space is like a project folder in Contentful termsspace: SPACE_ID,// This is the access token for this space. Normally you get both ID and the token in the Contentful web appaccessToken: ACCESS_TOKEN})client.getEntry(req.params.microsite).then(function(entry){res.render(‘index’, {microsite: entry.fields});res.end();}).catch(err => console.log(err));});module.exports = router;
After restarting the app we can access the microsite via http://localhost:3000/Entry-ID. The Entry ID can be retrieved by clicking the info button on the record in Contentful.
Conclusion
It’s super easy to retrieve content and push it to different touchpoints. The same content could be used on the web to populate a teaser, to fuel an ad or could be integrated in a newsletter. AMP helps to build frontends quickly and make them easily deployable. Contentful can be used to manage all that content in a single place and expose it via a unified API.
There is no need to anticipate future requirements as new touchpoints can be added without new integration efforts.
Overall, a quick time to market to connect a new touchpoint can be achieved with a modest effort.
JvM/TECH
Jung von Matt/TECH is a data-driven and technology focused boutique within the Jung von Matt group. Jung von Matt is — in terms of awards for both creativity and efficiency — the most successful advertising agency group in German-speaking countries. The agency helps their clients and partners to be digital pioneers by using technology plus data to develop digital platforms, products and services that create momentum. Jung von Matt was founded in Hamburg in 1991 and today, 27 years later, acts as a non-listed corporation with agencies in Germany, Austria, Switzerland, Sweden, Poland, the Czech Republic and China. There are many big names amongst their list of customers such as adidas, BMW, Deutsche Post, DFB, Edeka, Faz, innogy
