Tutorials
Flexible Landing Pages
| Include Page | ||||
|---|---|---|---|---|
|
Dynamic Brand Pages
| Include Page | ||||
|---|---|---|---|---|
|
Personalized Layouts
| Include Page | ||||
|---|---|---|---|---|
|
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).
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.
| Tip |
|---|
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 and makes sense.
The next thing is the configuration of the narrative itself.
First you can give the Narrative a title.
well and is easy to understand.
| Info |
|---|
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).
| Note |
|---|
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).
| Tip |
|---|
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 Dynamic Variables (see details below).
| Info |
|---|
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.
Narrative Context
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.
Title, Aliases, and SEO Content
| Info |
|---|
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).
Create the layout
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.
Save, Test & Deploy
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.
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.