You can watch this video to get an overview of the basic features in web layers. Everything is covered in the textual guide too.
Web layers have multiple uses and are generally good as call-to-action solutions. Our customers tend to use them to:
- Highlight important information that can change customers' behavior, such as free shipping
- Incentivize subscription to push notifications or newsletters
- Gather information through surveys or update customer attributes
- Create peer pressure by showing how many people are buying/looking at a product.
Web layers >
+ Create new. You can start creating your web layer from scratch or choose one of the templates provided. Either way, you will be able to fully customize it using the visual editor or HTML, CSS or JS.
Setting up a web layer consists of 4 main parts:
- AB test setup
- Test and evaluation
Each template has its own predefined variables, e.g. text or colors, that you can easily change using the visual editor on the right side. More advanced visual changes can be implemented using HTML/CSS in the code editor. The JS code editor allows you to change the behavior of each template or add any advanced conditions that cannot be specified using the general settings of the web layer, such as gaining information about contents of customers' cart.
Here is an overview of some functionality:
This is a "policy" setting for banners. If more live banners belong to one group, only one will be shown, prioritized alphabetically.
+ Add variants
Add more variants of the web layer. You can edit each variant separately.
Save as new
Saves your web layer in the Asset manager for later use
Change the template you are working with. Note that you can use a different template for every variant.
Preview all variants of the web layer on a specific URL by clicking on the "onsite preview" button in the top-right corner.
Get information from metrics, reports or include personal attributes using Jinja via the personalization button in the bottom right corner.
You can edit any part of the banner using either CSS, JS or HTML.
You can define your custom parameters in the code editor. These parameters will then become visible in the visual editor so the non-technical users can adjust them too. Read more about parameters in Exponea here.
Triggering a web layer by event
If you want the web layer to be triggered by an event on the website (example: button click), you can set up an event listener in Exponea Tag Manager and use
exponea.showWebLayer() to trigger the banner. It is, however, not possible to trigger a web layer by backend events.
You will enable the AB test settings after clicking on the "+ Add variants" button in the upper part of the editor. First, you can define how many variants you want to use for this campaign. To specify the distribution for the probability of occurrence for each variant, click on the "AB test" button in the upper part. You can also enable "automatic optimization".
Read more on AB tests here.
The automatic AB test optimization and the automatically generated evaluation report are based on this setting.
You can choose to display the web layer instantly or set a specific launch date.
Choose where to show the web layer: On every page, page with specific URL, page containing URL or by creating a regular expression where you define a particular set of URLs.
Show on any device or only desktop or mobile.
Set until when you want to keep showing the web layer:
- Until interaction: Shown every time (even after refreshing the page) until the user interacts with the web layer. This happens when the event
interaction = true(defined in the code). This is by default clicking on the banner (closing it, subscribing, etc.) but can be customized.
- Once: Shown only once for the whole period of running the campaign. This is tracked when the event
- Once per visit: Shown only once between a
action=showis tracked, it will be shown again only in the next session.
- Always: Will be shown all the time for each visit, each day and after each page refresh even when the user closes the web layer.
Define your custom audience that will receive this email campaign. You can use our standard customer and event filters.
You can choose for the web layer to appear on certain pages by using one of four
Show on" settings explained below. By clicking on
add rule you specify multiple settings for a single web layer. By clicking on
add exception you can specify where the layer should not be shown if you chose a too broad
show on setting.
1. Any page
The web layer will appear on all your URL pages.
2. Page with URL
The web layer will appear on the specific URL page that you choose.
3. Page URL containing
The web layer will appear on the URL pages that contain the specific string you define.
4. Page matching regexp
If you can use regular expressions you can use them to define where the web layer should be shown even more effectively. For example, the setting in the image below defines that the web layer should appear on pages with URLs containing a character from 0 to 9 positioned in front of a "+" sign but behind "/".
Bear in mind that the display conditions explained in the table above rely on the tracking of the event
banner and attributes
action = show and
interaction = true/false. If you change this structure in the JS editor, these conditions won't work properly.
Tip for testing your web layer
For testing purposes, we recommend setting the condition "Show on page URL containing" to something like "#test". After you have launched the web layer, you can simply go to www.yourwebsite.com/#test and you will see it in the real environment. You can even send this link to anyone as it will work until you stop the campaign.
TEST tab provides a quick summary of the web layer settings. Once you start the campaign, you will be able to get insights immediately using the predefined dashboard located in the
Web layers generate
banner events when being interacted with, such as
serve (when it is being requested and downloaded to the customer),
Read this article to find answers for the following issues:
- I have launched the web layer but cannot see it.
- The campaign showed once but it doesn't load again.
If you want to use a custom image in the web layer you can do so by putting the following code into the web layer's HTML editor:
<img src="URL LINK OF YOUR IMAGE" />. This means that you already need to have the picture uploaded somewhere on the web. If you do not you can upload it to our CDN domain via the asset manager. Read more on how in the Asset manager article.
Updated a day ago