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.

A Narrative is a way for you to control everything that appears on a page of your website. For example: A image with a description at the top, A custom product listing, or various other visual elements (explained in the chapter 16.4 Visual Elements).

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

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 and makes sense.

The next thing is the configuration of the narrative itself.

First you can give the Narrative a title.

The next step is to add chapters to your narrative. To do this click on the add-button next the chapter-option.

Here you can add the visual elements. You can see how to create these in the following chapter (16.4 Visual Elements). Choose one and click on the add-button to start editing it.

In this example there are four options, which are available and are defined in the json schema in the next chapter (16.4 Visual Elements). You can add as many visual elements as you like. For example, your narrative could look like this:

As you can see from top to bottom there is first a jssor banner, then a newsletter element, followed by a voucher. After that, a YouTube video will be shown, then a brand visual should be displayed and finally the listing. You can define the order of these elements by clicking on the arrows to the right.

In the Contexts-tab of the Narrative you have to define when the narrative appears by adding a context parameter called campaign and the value {{var-currentNarrative-uniqueKey}}. This makes sure that this campaign we just created will be applied if the URL parameter is campaign=narrative-example is there.

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

There is one more step you have to do before the narrative is active. You have to add a use-case to your narrative widget. The use-case is called Campaign Correlation Promoter and is located under:

CPO STRATEGIES > MARKETING OPTIMIZATION > LEVEL 1 - ALIGN MARCOM > ALIGNED PRODUCT PROMOTION WITH YOUR CAMPAIGNS

It should have the word campaign in the request parameter. When this is set up, you can click on Save&Test and then switch to the test-view.

Add the following parameters to the Request.

Widget: The choiceID, you configured the use-case for (in this case narrative)

Language: Whichever language you want

Test mode: Test mode with live data

Context Parameters: campaign=narrative-example (narrative-example is the unique-key of the narrative)

Afterwards click Get Results and check the extra info.

You should see the relevant JSON under the key cpo_journey_example-journey.

When you are satisfied by the results, you can go to the publishing-menu and click publish all.