Tutorials

Flexible Landing Pages

Learn how to create landing pages with the layout and content you want

Technical Set-up:

Integrate our narrative on a page of your web-site and define a forward routing mechanism with the path (e.g.: "landing/abc" will be detected because of the prefix "landing" and will cal our narrative API with the parameter campaign="abc"), then retrieve not only the content of the page (main return content of our API, but also, the page title, description, Meta-tags, bread-crumgs and H1). This way, you have one technical page to cover all your landing pages.

Static Landing Page:

To create a static landing page, simply build your page in the Narrative editor by creating a list of Fixed Layout Blocks (if you need more Layout Blocks, ask your IT to prepare them for you, they will then appear in the list of Layout Blocks), your page will then directly appear on the path matching the name of the narrative.

Campaign Landing Page:

To create a campaign landing page, you only need to have one dynamic narrative with the dynamic logic inside and create the content in the Campaign menu. Alternatively, you can create a special narrative for a specific Campaign if you want to enrich the information provided in the Campaign with more content.

Content Landing Page:

To create a content landing page, you only need to have one dynamic narrative with the dynamic logic inside and create the content in the Content menu.

Dynamic Brand Pages

Create dynamic pages for brands and other attributes, not just categories

Technical Set-up:

Integrate our narrative on a page of your web-site and define a forward routing mechanism with the path (e.g.: "brands/abc" will be detected because of the prefix "brands" and will call our narrative API with the parameter brand="abc"), then retrieve not only the content of the page (main return content of our API, but also, the page title, description, Meta-tags, bread-crumgs and H1). This way, you have one technical page to cover all your brand pages. You might want a special page for the list of your brands and you probably want to connect it to your menu and your SiteMap (ask us for more technical details how to do that).

Brand Pages:

To create your brand pages, you only need to have one dynamic narrative with the dynamic logic inside and feed the CMS content as a Data Feed into Gooogle BigQuery. Alternatively, if you don't have this content at all, you can create the content in the Content menu and connect the data to come from your Content entries.

Personalized Layouts

Create and test different layouts for your home pages for different visitors

Technical Set-up:

Integrate our narrative as a zone of your home pages. The zone can be very big (from the header to the footer) or only a part of the page (e.g.: banner and product recommendations on the top of the page). Our Narrative API will return you a list of Layout Blocks to display in the order returned (please refer to Boxalino Narrative API documentation for more information)

Use Conditional Layout:

To create a simple static or dynamic Narrative, you only need to have one Fix Layout populated with a list of Layout Blocks. But to create a personalized layout, or a dynamic layout depending on some conditions, or an A/B test between two different layout, you will need to create a Conditional Layout. A conditional layout is defined by a Context (the condition) which can be related to a specific customer segemnt (e.g.: visitors from FaceBook), to a dynamic condition (e.g.: "if there is less than 10 products in the listing") or an a/b experiment (e.g.: "test variant with an additional banner than concrol"), then you can define a list of Fix Layouts and connect each to the value "true" or "false" (or both), only the Fix Layouts currently active will be returned.

What is a Narrative?

A Narrative is a page layout (or a set of zones in a page layout) with headless content (headless because the content is not specific to any view, it can be used in any channel: web-site, e-mail, print marketing, …).

A Narrative can be a complete web page layout or the layouts of sections (or zones) of the page.

As you integrate the Narratives in your Website, you decide which narrative appears where (in which pages or page zones) during the technical integration.

For example, for a search result page, the layout of the search results will be defined by a narrative (e.g., as in the example we will see in details later in this page: first a search message, then a banner, then the pagination and sorting option, then a grid of product results, then pagination again and below an SEO text, and on the left of it all the facets (search refinement filters).

You can find the Narrative-view under Marketing > Narratives.

The main Widget of a Narrative

Narratives are always connected to at least one Widget.

This is because the request from your Website to our API is always done on a widget.

The system will then identify the one narrative (in case many are defined) which are connected to this widget that should be used.

This widget is then the main widget of the narrative.

As per the flow below, the main widget will provide the key content to be integrated as content in the narrative layout.

You can add additional sub widgets in the Narrative if you need them (for example, if your narrative shows two blocks of product recommendations, then the first one is typically the main widget which is the one called by your Front-End API request and the second one is a sub widget defined in the narrative).

Create a new narrative

To create a narrative, click on the add-button and give the narrative a unique key. This is how your narrative will later be accessed, so use a name that describes it well and is easy to understand.

For example, you can use the same name as a widget (in case you don’t plan to have more than one narrative for this widget), or add “_default” at the end of the widget name in case you want to have it as the default version but plan to create a more specific narrative for specific cases.

Your widget will then appear at the end of the list, you can then edit it by clicking on the action edit (pencil icon).

If you have several pages of narratives, you might not see the newly added Narrative until you paginate to the last page

On the top right of the dialog, you can define a list of main Widgets for the Narrative.

Why several Narratives for the same main Widget?

There are different ways to configure different Narrative Layouts and Contents for different situations.

One way is to have several Narratives and to make them vary by the Narrative Context (see details below).

In case several Narratives can apply (which means that their Narrative Contextare all satisfied), the system will show the most specific Context available (e.g: if a Narrative is set as default with no specific context and another one is set specifically for the traffic segment from Google Shopping, the second one will apply for visitors from Google Shopping as the context is more specific than the default one).

Another way is to have one Narrative but to have Conditional Layouts in the narrative for the different cases (see details below)

A third way is to have one Narrative with a Fix Layout but dynamic content defined with Variables (check our documentation here: How to dynamize Narratives with Variables )

All three possibilities can also be mixed, so they are not mutually exclusive!

A less important question: Why several main Widgets for the same Narrative?

The opposite is also possible, to have more than one main Widget defined in one Narrative.

The main reason for doing it is to configure only one Narrative (typically a quite dynamic one) but to use it in the context of different widgets.

Different widgets will automatically provide segmentation in the statistics.

One Narrative is easier to maintain (no need to copy changes back and for).

However, this is not a very common need and typically is not applied.

Title, Aliases, and SEO Content

You can skip this section if you do not plan to integrate your Page Title and SEO tags with the Narrative.

Above: You can provide here the Title (H1) in Each Language.

Above: in the SEO Content Tab you can define Header information: Page Title, Meta Tags and other parameters as well as the Breadcrumb of the page (to be provided in JSON).

Narrative Context

A narrative is connected to a context. The Narrative Context defines (as a condition) if the Narrative should be considered as active in a given context.

The context by default is empty which means that the Narrative is always active.

A context can be defined on many different criteria (A/B testing variant, Visitor or Customer Segment, Page Context (page URL, current filter, facets selected by the user, search query, …).

Learn more about Contexts in our related documentation.

Example with a Context Parameter “campaign” set with the Variable “{{var-currentNarrative-uniqueKey}}”. This logic is often used for landing pages where a parameter “campaign” is passed (typically with the url path of the page) and is automatically matched with the Name of the Narrative.

This way, simply adding a Narrative with the name of the path of the landing page will make it work automatically!

Fix versus Conditional Layout

A Narrative is defined as a list of Layouts (typically only one).

A Layout can be Fix, Conditional, or be a reference to another Narrative (this is simply a way to embed Narratives).

Fix Layout

A Fix layout is a layout that never changes and is always the same for all the different situations.

A Fix Layout has a Context (it only applies if the Context is satisfied, see the explanations about Context above).

A Fix Layout is defined by an ordered List of configured Layout Blocks (see explanation below).

By creating several blocks of Fix Layouts and using their Contexts, you can still do a certain type of Dynamic layout by having some Fix Layouts appear to some visitors and others not.

Conditional Layout

A Conditional Layout has a Context as a condition (it only applies if the Context is satisfied, see the explanations about Context above).

Then it has a list of Fix Layouts each connected either to the true or the false (or both) evaluation of the condition.

In this example, we create automatically an A/B test simply by naming “testA” as a test Variant in the condition and we have then 3 Fix layout: the first two will apply to the control variant (testA is false) and the second and third will apply to the test variant (testA is true).

Configure the Layout Blocks Parameters of a Fix Layout

To fill the list of configured Layout Blocks of a Fix Layout, you need to select a Layout Block in the list.

The Layout Blocks and their name are defined by your IT team. If you are not sure about their meaning and desired usage, please check with your team to get more information!

After adding a Layout Block you can configure it by filling in its content.

Each Layout block has its own Parameter Schema, so it means that what field you will see in the form (as in the example above) depend on the definition of the Layout Block.

The Layout Blocks and their Parameter Schema are defined by your IT team. If you are not sure about what is a parameter should be used for, check with your team to get more information!

You can set the content of each parameter with static values (i.e.: writing the content as it should appear to the user).

You can also set the content with Dynamic Variables (or a mix of static text and Dynamic Variable, like, for example: “hello {{template-firstname}}”.

To find out more about how to set dynamic variables: How to dynamize Narratives with Variables

Nesting Layout Blocks

Some Layout blocks might expect (or support) to have children Layout Blocks defined.

For example, a product slider would typically be a Layout Block with a list of product Layout Blocks inside.

In this typical case a product_slider has one product as a Sub-Content. You don’t need to put several products as sub-element, only one, as Layout Block connected to the current widget with the parameter bx-hits (product-list) and bx-hit (product) will automatically create as many product children as necessary (see details in next section).

Of course, for other cases without any dynamic logic behind the system with the bx-… parameters, you can also create several children block and configured them with the logic you want.

And the nesting is not limited to one level, so you can do children blocks of children blocks of children blocks …

The automated widget content bx-… parameters

As illustrated in this diagram, a few Layout Blocks will be configured by your team with bx-… parameters.

These parameters will automate the filling of specific parts of their content.

As a user, you don’t have to do anything, just to select the Layout Blocks that you want, but here we explained what is happening automatically behind the scene:

bx parameter	type of Layout Blocks	Effect
bx-hits	Product Slider Product List	the container of the Final Results of the Widget
bx-hit	Product	the block that should be duplicated and filled with the appropriate content for each of the Final Results of the Widget
bx-facets*	Facets	the facets informations (including visual rendering options) which should be used to display the facets content (filtering option for the user on a search or a product listing page).
bx-pagination*	Toolbar Pagination	the pagination information (user can paginate to page 2, 3, …)
bx-hitCount*	Toolbar	gives only the number of items to be displayed to the user (often done with bx-pagination
bx-sort*	ToolBar	gives the option to the user to order the results by a criteria (lowest price, name, …)

*ONLY WORKS FOR WPO IN THE CONSIDERATION COLUMNS!

The Accessor Parameter

Layout Blocks containing dynamic lists of content provided by a widget will have an accessor parameter (for example the Layout Block “Product List” which has Product Layout Blocks as children)

This accessor parameter can be left empty by default. It will then take the value of the Main Widget (see the section above for details).

However if your container should display the results of another widget, you need to define the widget name as accessor.

For example, this widget has the widget “accessories” as the main Widget. However, it is showing 4 sliders of product recommendations (Accessories, Similar, Complementary, and Related products suggestions).

While the first Layout Block (Accessor) will have an empty accessor parameter (as it will use the main Widget “accessor” by default). All the other ones will have a value defined with the name of their related widget, for example here, for the second one, the widget “similar”.

You can define parameters for the Widget by making it a variable:

filters: to reduce the scope of the widget to a specific filter
hitCount: to control the number of results that should be shown to the user
exclude: to list the prior widget results which should be excluded from the results of this widget

To find out more about how to set this type and many other types of dynamic variables: How to dynamize Narratives with Variables

Save, Test & Deploy

When you are done editing, you can save the narrative and then click Save.

To test your Narrative changes click on the top-right button “Save & Test” and then go test on your stage front-end (wait for 5-10 minutes for the cache to automatically clear).

When you are satisfied with your changes, go to Deployment > Publish, click on the “Publish All” button, and confirm.