Article sections

    If you want to create an overlay in which you want to target particular segments of visitors and show them personalized messages, you’ve come to the right place.  An overlay can be a pop-up, a ribbon or interstitial that is triggered in specific moments (e.g. : when the visitor wants to leave the webpage). Here is how you can create your first “Overlay” experiment.

    Creating a new overlay

    From the top left menu select the ‘Overlay’ option.

    In the next window choose the option ‘New Overlay‘.

    Choosing and editing a template

    In the next step, you will choose your overlay template. You can filter the available templates by selecting the category and the template type from the list on the right or create your custom personalized one, using the Javascript template.

    After that, a new window will appear from which you will have to choose how would you like the experiment to be triggered based on your objective. There are three possibilities :

    1. On Load: The on load trigger means that the interaction type experiment will appear after the page is loaded.
      This feature comes with a delay option that can be set up in the Creative.
    2. On Exit: The on exit trigger means that the interaction type experiment will be shown to the visitor the second he tries to exit the page by moving the mouse towards the URL bar or the tab’s/browser’s close button.
    3. On Scroll: The on scroll trigger is used when you want to show the experiment after the visitor scrolls down a certain percentage of your page.  So if you set it up at 50% it means that after the visitor scrolls down half of the page the interaction will be triggered for him.

    In the variation editor, you can apply modifications to the overlay, such as changing the text font, color or size and personalizing the message using custom variables, custom attributes or OnPage Variables.

    On the left side menu, you will find additional options to adjust the overlay design, such as changing the color, the opacity or the background. You can also set the button to redirect to a specified URL and set an animation for the overlay.

    Some overlay templates include a lead collector that you can also adjust according to your needs. You can collect information such as name, e-mail or phone and then send it to your e-mail address or marketing software.

    You can also set a personalized ‘Thank you‘ message for this lead collector.

    What is more, if you want to apply certain modifications to the overlay that are not available in the design editor, you can use the code editor to enter your own custom code. You will find it at the bottom of the page, by clicking on the </> button.

    Also, you can switch between different device types to preview the overlay.

    Setting the audience

    After you have designed the overlay, the next step is to choose your “Audience“.  That means that you must “Manage the pages where you want to run this experiment” and select the “Segment” (Target) of visitors you want to see the experiment.

    To select the pages where you want to run the experiment you can choose from different conditions for the URL :

    1. URL is: Using this the survey will run only on the exact page introduced in the value field next to the condition
    2. URL is not: Using this the survey will run on all the other pages but the one introduced in the value field next to the condition
    3. URL starts with: With this condition, the survey will run on all the pages that have an URL which starts with the same value as inserted in the value field
    4. URL ends with: The survey will run on all the pages that have an URL which ends with the same value as inserted in the value field next to the condition
    5. URL contains: Using this condition the survey will run on all the pages that contain in their URL the same value as the one inserted in the value field
    6. URL does not contain: Using this condition the survey will run on all the pages that do not contain in their URL the value entered in the value field
    7. URL RegEx: Using this you can define with RegEx the pages where you want the survey to run
    8. Page contains keyword: With this, the survey will run only on the pages that contain the keyword or keywords in a small sentence/grouped format

    This is an example of a product description

    This is an awesome product with awesome features at half of the price of other providers.

    Correct keyword to use: awesome product Not correct keyword to use: awesome providers

    If you don’t have a large amount of traffic on your website, we recommend you to add multiple pages in the test.
    When you do this you must add only the pages that have the same structure as in case of an e-commerce website where all of the product pages look similar.

    audience manage pages

    Setting the segmentation

    After you’ve done managing the pages where you want to run the experiment select the “Segment” of visitors who will see the survey by clicking on the drop-down button.

    a b test segmentation

    After you’ll click on it the “Select a segment” window will appear. From this window, you can choose a segment that has been already created or create a new one.

    experiment new old segment

    To uncover the second part of the page you must click on “Advanced settings“. There you can add a maximum number of visitors (once that number is reached the experiment will stop) and select the devices where you want the interaction to be visible. After that, you must select the frequency on which the experiment will be shown to the visitors of your website.

    In the end, you have the option to mark it as exclusive, meaning that no other experiments/surveys will be triggered for the visitors who already viewed this one, for the time it is running.

    Traffic Allocations and Goals

    In the next tab “Traffic Allocations and Goals” you will  select the percentage of visitors that will see the experiment. This percentage will be randomly extracted from the segment you have decided to use. You can run the test on all of the visitors who are included in the segment or just a part of them (let’s say 50%).

    After the percentage of visitors is set, you can use the variation traffic selector to modify how much of that percentage will see the “Control” and how much the “Variation” (the page with the pop-up/ribbon etc.).

    a b test traffic allocation

    In the second part of the page, you will find the “Goals“.  A goal is set to track sales, conversion rate, click rate, engagement, etc.

    You can set them as page views or customizable goals such as conversion rate, sales – that require inserting a shortcode into the website’s source. The customizable goals allow you to see the impact of the overlay experiment in the performance indicators: conversion rate, revenue, etc.

    There are 3 predefined goals that you can use – Sale ( which works only after the Goal tracking code is inserted on the thank you page of your website – Click here for more details), Engagement and Bounce rate.

    Scheduling and publishing

    The last step of setting up an overlay experiment is  “Schedule”-ing it. Choose for how long to set it live (days, weeks, months etc ), when to be triggered to your visitors and whether or not you want to receive an email when it has expired.

    Last, but not least, Rename the overlay experiment, if you didn’t set a name for it from the beginning and then PUBLISH it.

    That’s it! You’re ready to see if your overlay converts more!

    DON’T FORGET : After each modification made you have to wait 3-4 minutes until it will be visible on the website.

    Was this post helpful?