How to personalize a Nuxt static website

title-image-small-fit.png

Connect with Uniform

GithubTwitter
3 minutes read

Personalization is magical if it works. The love story between the user and the content provides a great experience, and with that, amazing conversion. But why don't we see personalization more often? As it turns out, traditional personalization is hard to implement. It's complex on both content and governance but also on the tech side.

But fear not! In this blogpost we will discuss a new way of personalization that is easy to use. It's API first and fit's perfectly with Nuxt statically generated websites. Yes, you read that correctly. You are able to dynamically personalize a static Jamstack website with Nuxt and Uniform. And to make it even cooler, the personalization happens on hydration and is therefore blazing fast.

How to personalize a static site

Uniform uses intent tags and signals for personalization. Intent tags represent the intent of the user and signals represent the actions of the user.

Intents & Signals

An example of an intent is that the user of the Nuxt documentation is interested in the Nuxt AsyncData() function. Their intent is to learn more about it. A signal could be "behavioral tracking", as in, the user visits the Nuxt AsyncData() function docs and Uniform registers that action.

Another example of a signal: the Nuxt Twitter account tweets about the updated Nuxt AsyncData() function docs and a user follows that link. In this instance Uniform tracks the user action in the form of a query string.

Based on the intent information Uniform has identified for the user, it will match this against a variation of a Vue component and asks Nuxt to render it. This component variation data could come from a headless CMS or from a JSON file or however you get your content.

When rendering the site with $ nuxt generate the Uniform CLI grabs the configured intents from the Uniform API. And the variations of the components, used for personalization, are fetched at build time as well.

The content of these components is also configured with an intent tag and therefore Uniform can easily choose which component variation to render based on the intent of the visitor.

personalized component variations

A quick example

  • Imagine that on the Nuxt Docs homepage there is a big hero component to welcome users.

  • The hero component has two variations

    1. AsyncData() function specific copy

    2. Generic Nuxt docs copy

  • Variation 1 has an intent_tag field added to it. In the case of this variation the intent tag is: "nuxt_asyncdata_interest".

  • For variation 2 the intent_tag field is empty.

  • In the Uniform dashboard there is an intent added called "nuxt_asyncdata_interest" with a behavioral signal connected to it.

  • Some tracking code is added on the Nuxt Content module page to signal "nuxt_asyncdata_interest".

When a user visits the AsyncData() function docs page, Uniform tracks this user and remembers the intent. When the user returns back to the homepage the hero component now shows the AsyncData() function specific copy. Uniform told Nuxt which variation to render as the intent tag "nuxt_asyncdata_interest" is attached to the user and could be matched to the variation of the component.

personalize component

The <personalize/> component helps you to choose the correct variation of the hero.

Everything happens on hydration and no API calls have to be made. We like to say: "Look ma, no origin!" Everything happens statically on the CDN edge.

How to get started in Nuxt

The easiest way to get started is to use the Uniform Starter kit for Nuxt. After that pick a headless CMS of choice. When you create a free account on uniform.app you can follow a scaffolding guide to choose the components you need to get started: CMS, JS framework and hosting.

Uniform scaffolding

Feel free to reach out to me on twitter (@timbenniks) or sign up for a uniform demo!

Happy hacking!

tim-2020-small

Tim Benniks

Twitter