Visual result

In this example, we will take a real-life quite advanced case described here: Personalized Marketing Automation on Qualipet Homepage

Let’s start with the visual results (on the right of the picture below). We can see that the layout consists of 4 parts:

1. A banner with its related product suggestion

2. 3 Bocks of product recommendations with different labels

3. A block of product recommendations with a background

4. Blog recommendations (with a static contact form on the left)

Open

Narrative Layout

Open

The Narrative is defined in a straight-forward way: 4 Layout Blocks are used one below the other with the first and the last one being container blocks with each two children Layout Blocks (for simplicity reason, the two container blocks are not in the diagram above, as they only play the role to split the row into two columns and don’t serve any other purpose).

So as a result, we have 6 different Layout Blocks (banner, small-prods, products-slider, products with background, form, and blogs recos) responsible to provide the content (each with their own color in the diagram above).

Screen-shot of the configuration of the Narrative layout (the names of the templates have been slightly changed in the naming of the document here)

Widget Accessors

The definition of the Widget Accessors is provided here: Widget Accessors

As explained in How to dynamize Narratives with Variables, no Widget Accessor need to be defined for the main widget. In this case, the “topic” widget was selected to be the main widget (it could have been done otherwise). The topic widget returns a list of topics (in this example the 3 topics appearing in the middle with the labels on a yellow background.

All the other Dynamic data need to be defined as a Widget Accessor. There are 3 simple cases without any dynamic parameters (banner, monthly_hits, and blogs) and 2 more advanced cases depending on the result of another widget accessor (banner_prods which depends on the selected banner target to select the right corresponding products; and topic_product which depends on the selected topic target to select the right corresponding products).

banner

The widget banner returns one banner to be displayed. The strategy of the widget is not discussed here but involved both a/b testing, click-through rate optimization, and personalization based on your predicted animal.

Widget Accessor Parameters:

• Filter: none

• Hit count: 1

banner_prod

The widget banner_prod returns a selection of personalized product recommendations within the filter (segment) of the banner returned by the widget “banner”. There is therefore a dynamic dependency on the filter of the Widget Accessor.

Widget Accessor Parameters:

• Filter: the filter of the banner returned by the widget banner (banner[0].filter)

• Hit count: 3

topic (not needed)

As “topic” is the main widget, it doesn’t need to be defined as a Widget Accessor as it will automatically be the default accessor

topic_prod

The widget topic_prod returns a selection of personalized product recommendations within the filter (segment) of the current topic (we are in a loop over the returned topics of the widget “topic”). There is therefore a dynamic dependency on the filter of the Widget Accessor.

Widget Accessor Parameters:

• Filter: the filter of the current topic by the widget topic (current-hit.filter)

• Hit count: 5 (could be more if we would want to have a slider showing more than 5 products)

monthly_hits

The widget banner returns the hits of the month. As the filter on the right product is part of the configuration of the widget strategy, there is no filter defined in the Widget Accessor.

Widget Accessor Parameters:

• Filter: none

• Hit count: 5

blogs

The widget blogs returns blog entries. The strategy of the widget is not discussed here but involved both a/b testing, click-through rate optimization, and personalization based on your predicted animal.

Widget Accessor Parameters:

• Filter: none

• Hit count: 2 (could be more if we would want to have a slider showing more than 2 blog entries)

Mapping Variables

The definition of the Mapping Variables is provided here: Mapping Variables

In our example, only 3 of the Layout Blocks of the Narrative need Maping variables:

• banner (in blue)

• topic (in orange)

• blog (in gray)

The other Blocks do not need any Mapping variables as they are either displaying static content or dynamic products (and there is no need of Mapping Variables for products as described here.

The Mapping Variables access in our case only the “current-hit” which means that they simply map properties of the current response of the widget to a parameter of the Layout Block.

We don’t go into the details here of the name of each of the mapping properties, as they depend on the set-up of your Data, but the following cases apply:

• Campaign banner parameters, as described here

• Topic “title” used as label (same can be re-used for other Boxalino Dynamic Topic integrations)

• Blog parameters: these highly depends on your Data, if you are not sure what are your blog properties, ask for support to your IT.