Weblayers (sometimes called banners) are campaigns that are shown on specified pages of your website to a specified audience. They are executed using HTML/CSS/Javascript. They are not pop-ups, and will not be blocked by pop-up blockers.
You can watch this video to get an overview of the basic features in web layers. Everything is covered in the textual guide too.
Why you should use web layers
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.
Creating a web layer
Go to Campaigns > 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:
- Design
- AB test setup
- Settings
- Test and evaluation
Design
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:
Group
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 template
Change the template you are working with. Note that you can use a different template for every variant.
Onsite preview
Preview all variants of the web layer on a specific URL by clicking on the "onsite preview" button in the top-right corner.
Personalization
Get information from metrics, reports or include personal attributes using Jinja via the personalization button in the bottom right corner.
Code editor
You can edit any part of the banner using either CSS, JS or HTML.
Parameters
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.
AB test setup
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.
Settings
Conversion goal
The automatic AB test optimization and the automatically generated evaluation report are based on this setting.
Schedule
You can choose to display the web layer instantly or set a specific launch date.
Show on
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.
Target devices
Show on any device or only desktop or mobile.
Display
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
bannerhasinteraction = 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
bannertracksaction=show. - Once per visit: Shown only once between a
session_startandsession_end. Onceaction=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.
Category
Choose which consent is required for a customer to have to receive this campaign.
Read more on consents here.
If you don't use consents yet, you will see the campaign groups setting here.
Audience
Define your custom audience that will receive this email campaign. You can use our standard customer and event filters.
Show on - attributes
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 "/".
Display conditions
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 and Evaluate
The 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 EVALUATE tab.
Events generated by web layers
Web layers generate banner events when being interacted with, such as serve (when it is being requested and downloaded to the customer), show, click, close, etc. These events are defined and tracked in the Javascript code of each web layer (enabled by default).
Troubleshooting
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.
Using custom images in web layers
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.