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.
- A user can complete an exchange; for example by providing contact details or signing up for a subscription.
- A user will receive something as part of the exchange; for example, a report or article.
- 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!
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.
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.
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.
- If a user enters a value into the form and clicks submit.
- 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.
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.