The Personified module provides a flexible way to utilise the strengths of Drupal to deliver a personalized experience for anonymous users of Drupal websites. It is able to take data from user profile context, stored in localstorage, and use this to query a JSON endpoint for data. That data is then transformed using a clientside templating language, such as Handlebars, to present the content to the user.
In non technical language, Personified provides a way to personalise Drupal web pages for anonymous users. It is very much akin to the Smart Content module, except here we query for data, rather than showing individual blocks.
The requirement
At Morpht, we developed Personified as part of our efforts to uplift the personalization capabilities of Drupal. We were impressed with the design of the Smart Content module, allowing for client-side context to be used to drive the user experience. However, we wanted the option of being able to query data from Drupal (or elsewhere) to retrieve the data. We wanted to use Drupal as a content hub for serving personalized experiences and to deliver those experiences based on a query rather than 'if, then, else' logic.
The solution
In order to make this work the following ingredients were needed:
- The storage of user profile data in localstorage
- The generation of that data (not covered in this article)
- A client side solution for:
- retrieving the context
- querying an endpoint with the context (with a default fallback)
- transforming the data with Javascript
- displaying the data back to the user.
We created Personified to handle the second part of this problem, handling the state, query, transform and display.
Along the way, we needed to solve the transformation part of the problem with a client-side solution. In order to find a pluggable solution, we developed the JSON Template module which is able to transform JSON to HTML using a variety of backends. We implemented a Handlebars transformer as the initial plugin as this provided us with a simple and well-known solution.
How does it work
The best way to demonstrate this is with a screenshot of what the block edit screen looks like:
The screenshot demonstrates the various ingredients which were mentioned above:
- Data is gathered from localstorage
- An enpoint is defined with a querystring parameter
- A default fallback option is available for when localstorage is empty
- A JSON Template is selected to transform the data.
In this example, the user's 'season' is used to delete a season promo from the Drupal CMS.
You can see all of this in action on our Convivial Demo site. I encourage you to explore that site to see how Drupal can be personalized for anonymous users. (We built this site with Convivial CMS.)
