In this article, I’ll explain what personalization is and how it can work purely on the client side. I’ll show how we connected a page hosted on Auth0 with Salesforce Pardot and Kontent.ai to enable a tailored sign-in page of our own application. This article is not a typical how-to tutorial as you may use different cloud services, but once you finish reading it, you will understand how all these services fit together.

Static site personalization

In general, personalization allows you to serve different content to various segments of your website’s visitors. For example, if a visitor is only reading articles about horse-riding, would you offer them a discount for dog food? Or would you get better conversions from an ad about equestrian equipment? Personalization helps you deliver the right content to the right people.

Personalization is easily done on the server-side as in a traditional setup it’s the server that possesses all the data about visitors. However, with pre-generated sites, the question is: How can we personalize without a server?

I wrote about personalizing static sites in the past. I explained how to generate a page and render only relevant components for every attendee of my wedding. And while that approach worked well, it required every visitor to have a unique URL of the respective generated page.

But we typically don’t have that possibility and need to work with anonymous data. Therefore, we need to:

• Collect enough data about visitors
• Define rules for personalization
• Create personalized content
• Implement it

These steps are always present in one form or another. A good traditional CMS typically handles all of those steps for you and only requires configuration. On a static site, you need a set of tools for this task.

Collect enough data about visitors

This task is handled by tracking your visitors’ actions on the site, much like Google Analytics tracks the performance of pages. We use Salesforce Pardot to track activities like page views and form submissions. Once a visitor reveals their identity by providing their email address via form submission, clicking a newsletter link, or registering for a webinar, the personalization possibilities are much broader.

You can then connect Pardot with your company’s CRM or a tool like Intercom for in-app communication. All these systems know the email address the visitor provided. That way, you can get all possible details of your visitor for the next step.

Define rules for personalization

Once you have enough data, you need to define rules for personalization. I mentioned we use Salesforce Pardot for the data collection, so it only makes sense to let the same tool handle the calculations of personalization rules. The possibilities for segmentation vary among the used tools and often include:

• Grouping visitors into personas based on their actions
• Grouping visitors based on their geographical location
• Grouping visitors based on some information you have, such as personal vs. company email address, whether they expressed interest in your products in the past, and so on (this info can be either calculated or imported)

Our personalization is based on a custom field 'In-product - SignIn' of the visitor’s profile. This field is exposed via Dynamic Content feature of Pardot that also allows us to set a default value:

Let me show you how this works in an example. Personalization is driven by an automation process that contains multiple conditions. First, we check if the visitor is included in the imported list of people we want to encourage for a G2 review (1). If so, we adjust the 'In-product - SignIn' field to value 'g2_review' (2) and wait for up to two weeks to see if Pardot registers a click activity on the respective CTA button (3).

The process contains many other conditions, but you get the idea, right?

The values of the field 'In-product - SignIn' correspond to content item codenames in the headless CMS. By changing the value of the field, we effectively change what will be displayed to that specific visitor.

Create personalized content

Once you identify the groups of visitors, you need to create the personalized content. There should be one variant for every segmented group. In our case, we wanted to have complete freedom in content creation, so we created a bunch of content types and content items, which allows us to personalize not only the content but also its structure—so that we can display a simple CTA, but also a webinar invite or testimonial.

Implement it

Only now when you have all the data, personalization rules, and content defined can you start working on the code. As our sign-in page is fully hosted on Auth0 and we can only inject HTML code into it, we had to implement the personalization on the client side. The same way as you would on any Jamstack site.

So how does the implementation work?

First, the page loads and executes the JavaScript bundle. Then, using JavaScript, we make a request to Pardot asking for a page variant we should display:

postscribe('#pardotID', '<script type="text/javascript" src="{pardot_tracker_url}"><\/script>', {
            done: function () {
              var itemToDisplay = getItemToDisplay();
              getContent(itemToDisplay);
            }
          });

Pardot already knows the visitor, so it can easily return the requested value of the field 'In-product - SignIn' from the visitor’s profile. The tracker responds with:

document.write("the_state_of_jamstack_2020_report");

That is the codename of the content item Pardot wants us to display to the visitor. So the visitor’s browser makes another request to Kontent.ai for the actual content and displays it:

fetch("https://deliver.kontent.ai/111e467b-6008-006d-7da0-df9b9e015029/items/the_state_of_jamstack_2020_report")
        .then(function (response) {
          return response.json();  
        })
        .then(function (data) {
          var html = getHTML(itemToDisplay, data);
          container.innerHTML = html;
        })

The getHTML function is a simple switch that selects an HTML template based on the item’s type. All of this code is client-side, all templates are included in the JavaScript.

This is what the final result looks like:

Or check it out yourself on our sign-in page. But remember that if you’re already using Kontent, you may see different content there 😎.

Marketers can also use the production page to see the preview of the personalization variants. Pardot allows them to set up a one-time personalization cookie that affects the displayed variant:

This is how the page looks like once the cookie with a different variant is set:

Personalizing Jamstack sites

Our personalization runs on a dynamic page hosted by Auth0, but the implementation is pure client-side Javascript that will work the same way on any Jamstack site. Our code contains HTML templates of all variants and selects the right one based on the received content at runtime. However, it is also possible to pre-render (resolve) all variants into the static page and only let the client-side personalization script decide which one to display.

The future of personalization

In this article, I showed you how personalization works in the headless space and how to connect the used tools together using client-side Javascript. And the best thing? You no longer need to worry about scaling databases, handling traffic peaks, optimizing big data calculations, and so on. The tools do it for you. You can focus purely on the best content for your visitors.

If you’d like to know more or have any questions, feel free to get in touch.