Define and Configure Transformers
Transformers enable you to convert personalization data that you receive in a JSON format from the Decisioning API into dynamic HTML. Einstein Personalization currently supports Handlebars-based transformers that use the Handlebars templating language to convert personalized JSON data, such as product or content recommendations, so that you can later inject that data into the HTML structure of your website.
A Handlebars transformer has this structure.
Field | Description |
---|---|
name | The unique name of the transformer. |
transformerType | Specifies the transformer type. |
lastModifiedDate | Optional. A timestamp used to track updates to the transformer. |
substitutionDefinitions | A set of key-value pairs that define placeholders in the template that are replaced with actual values when the template is rendered. |
transformerTypeDetails | Contains the HTML template and the logic for rendering the content. The template can use Handlebars helpers like {{#each}} and {{subVar}} . |
Creating and configuring a Handlebars transformer involves these steps.
Define a new transformer object with these fields.
Substitution definitions are key-value pairs that map user-friendly variable names as placeholders in your transformers to fields in the Decisioning API response. These placeholders are used to represent values like product names, images, and other content attributes, that are subsequently replaced with personalized content received from Einstein Personalization at runtime.
When creating substitution definitions, define a variable (such as, name
or image
) and specify the field in the Decisioning API response that must supply the value for that variable.
For example, to include a recommended product, its name, and its associated image URL from this Decisioning API response in your transformer.
To define substitionDefinitions
for this response, first source the field names from the response (data
, ssot__Name__c
, and ssot__Image__c
). Then, map and define these substitutions as shown in this example.
In this example:
introText
is mapped to[attributes].[introText]
and represents introductory text, like a greeting or heading.recs
is mapped to[data]
that contains a list of recommended items.name
is mapped to and populates values fromssot__Name__c
that contains item names.image
is mapped to and populates values fromssot__Image__c
that contains the image URL for each item.
For each substitution, you must define a defaultValue
that represents the mapping of the substitution string with a field from the Decisioning API response.
Within transformerTypeDetails
, write the Handlebars HTML that is rendered on the website. To use each of the substitutionDefinitions
defined in your template, use the defined variables (such as name and image) along with Handlebars expressions such as subVar
.
Here's an example of a transformer that renders a list of recommended items.
Here are three examples of transformers that serve specific purposes. Each transformer includes substitution definitions and Handlebars code for converting and injecting personalized content into your website’s frontend.
The Decisioning API response fields used in the substitutionDefinitions
of these transformers are for illustrative purposes only. Since these fields are derived from Decisioning API responses, ensure that you compare the fields used in these example transformers with the fields in your Decisioning API response and adjust them wherever necessary.
This transformer generates a carousel of product recommendations.
This transformer generates a hero banner with a call to action.
This transformer generates an overlay banner with a call to action.