This is the second part in a two-part series originally published on Jung von Matt. Read part one: “Leveraging AMP and Contentful for a flawless Customer Experience.”
As covered 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 must adapt to those challenges by delivering higher business values, managing costs, and building future-proof systems that can cope with new touchpoints and accelerated content-production pipelines.
Let’s explore building a part of the previously proposed architecture. Content needs to be distributed across different touchpoints to contribute to a flawless customer experience. In this post we explore 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 front end 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 creating interactive emails in the near future.
Contentful is a headless CMS, a backend-only CMS designed from the ground up as an agnostic content repository that exposes content via an API for display on any device and touchpoint.
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.
First thing we need to do is come up with a proper content model for our microsites. Let’s say we want to build a simple page containing a headline, a copy text and an image to go with it. A call to action might come in handy.
After registering a plan with Contentful, we login and add a content model. For the sake of simplicity, we title 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 use for a more sophisticated editing experience. However, we use Short text and Media for this example.
Having everything set up, we’re ready 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 would like to learn more about Contentful, head over to the documentation page.
We will need an AMP template to render our content. AMP is a collection of web components that we could use to build a page, many of which have advanced functionalities. But we’ll continue to keep things simple here.
We’re starting off with some AMP code:
Several noteworthy things happen in this code. Let’s go through it 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. All styles need to be inlined for performance reasons. 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.
We’re going to use ejs 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 section.
We’ll set up a simple express app that will fetch and render the content. 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:
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.
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.
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, and innogy.