Gated content and the Jamstack. Is it achievable? Of course!

Richard Shackleton
Mar 29 · 5 min read

Something we often hear in regards to Jamstack is the notion that “a static site cannot do that”. However, the nature of the Jamstack is to statically-generate websites, not to generate static websites.

Recently, I needed to provide an example of functionality that is often viewed as impossible with a statically-generated website — gated content. I was sure that this was something we could achieve using Jamstack but there weren’t any resources around how to implement this, recommended approaches or even best practices. The closest articles I found were orientated towards marketers, selling the effectiveness of gated content for conversions.

So, here is an article that is developer-focused, provides a recommended approach, is accompanied by a working example, and includes best practices outlined by Google for paywalled content.

If you want to jump straight to the point then you can find links to the working example and source code at the end of the article.

What is gated content?

First things first, a gate is a step or barrier between a user and something they wish to access. A common example is an age-gate, often used when a user wishes to access products or content that require them to be older than a specific age e.g. for purchasing alcohol.

In our case we are referring to content gating; typically used in lead generation. The intention is that a report or article is enticing enough for a user to provide contact details.

A gate requires some things to be true to function correctly.

  1. A user can complete an exchange; for example by providing contact details or signing up for a subscription.
  2. A user will receive something as part of the exchange; for example, a report or article.
  3. The platform, or website, can restrict access to this content until the user completes the exchange.

These requirements are often expected to be problematic for a statically generated website as the content would be generated upfront and therefore cannot be served to the user dynamically when they complete the exchange.

However, this is not true!

With the modern web, we can serve partial content upfront and retrieve the desired content using JavaScript dynamically and insert it into the DOM to allow the user to read the article or report.

What do we need to implement gated content?

Ok, so we have covered off what gated content is, what will we need to implement it? The approach I am going to outline will make use of the following frameworks and platforms.

These can be swapped out for your preferred option but the following needs to be considered.

Firstly, we need a Jamstack framework that allows us to generate pages with partial content upfront, and then allow us to modify the DOM to add our dynamic content later on. This can be done with any Jamstack framework, the key is using JavaScript to fetch data and to modify the DOM.

Secondly, we need a platform that will provide us with somewhere to do some server-side logic. In this example case, we’re using serverless functions on Vercel, but this approach works just as well when using Netlify or a separate platform like AWS Lambda or Azure Functions.

Finally, we need a platform to store and deliver our gated content. In this example, we’re using Kentico Kontent to manage our content and provide access via their Delivery API and JavaScript SDK.

There are additional platforms and services which may come into effect depending on what your gate needs to do. For example, you may need to store an email address in MailChimp or complete a transaction using Stripe. In this example, we’re keeping it as simple as possible and checking the user has entered a value in a field.

How do we implement gated content?

Time for the real meat of the article, how do we implement this?

Firstly, we need a page that includes the call-to-action for the user to access the gated content. It is often recommended to also include a snippet of the content if possible.

The following example is the complete page source code from the demo.

We’re doing a lot here so let’s break things down.

The first takeaway from this file is that it includes some lead content, this is a specific field in Kentico Kontent which allows a content editor to provide an enticing snippet of the gated content.

The second takeaway is the API call to retrieve the content from our serverless function. This call is executed under two scenarios.

  1. If a user enters a value into the form and clicks submit.
  2. If we believe the incoming request is from Googlebot.

The second scenario is important if we want our full content to be indexed, we will cover this in detail later in the article.

The third takeaway is the structured data we output. This includes two properties for Google to understand that our content is gated.

Ok, so we have our page set up to display our lead content and the form, and also to request the full content if a request comes in from Google. Next, we need to take a look at the serverless function and how it works.

First of all, we validate whether the incoming request is from Google with a reverse DNS lookup. If this passes then we return the gated content immediately so that Google can index it.

Next, we validate the incoming data to see if the user has provided us with the required information. Here you could complete a payment, subscribe them to a newsletter, etc. In our case we’re just checking the value was provided.

Finally, if the incoming data is valid we can return the gated content!

What does Google say?

The final step is to validate the page using the Google Search Console. The tool allows us to submit a URL to be crawled and checked by Google to ensure there are no issues.

Google can see our gated content! 🧐

I hope that this article has helped dispel the myth that you cannot implement functionality such as gated content with the Jamstack. A link to the demo and source code is located in the resources below.

If you’re interested in trying this out for yourself, you can also sign up for an extended trial of Kontent using the link below.

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Richard Shackleton

Written by

I’m the UI Architect at NetConstruct and a Kontent MVP. I take a keen interest in the ever-changing landscape of web development.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store