Overlay Campaigns

Overlay campaigns are elements that appear on top of your existing content. They typically display as large, prominent popups at the center, top, or bottom of the screen. Overlays are commonly used to encourage newsletter signups, handle exit-intent scenarios, and promote key messages.

You can control when an overlay appears, how it closes, and a variety of other behavioral and display settings. 

Creating an overlay campaign

1. Create the campaign:
   1. Go to Experience Web › New Campaign and select Overlay.
   2. Enter a campaign name. Optionally, add notes and labels.
   3. Configure the campaign settings, such as trigger, frequency, and advanced settings. 
      For details, see the Overlay settings section that follows. Click Next.
2. Create variations: 
   1. Click New Variation, select a template, and then build your variation by populating the template variables. 
   2. Click Preview on Site to see how the variation will appear.
   3. Click Save Variation. 
   4. In the Variations tab, create additional variations as needed.
3. Configure traffic and success metrics: 
   1. Set the allocation type, primary metric, and experience settings.
   2. Define how much traffic to allocate to each variation and the control group.
   3. Click Next. 
4. Define targeting: 
   1. Configure the targeting settings of the experience to determine when, where, and to whom the experience is displayed. 
   2. Click Next.
5. Save or publish: 
   1. Set the experience status to Draft or Active.
   2. Click Save Experience. 
   3. On the campaign page, you can create another targeted experience, duplicate an existing experience, edit an experience, or change an experience's status.
   4. Click Save (for a draft) or Publish (for an active experience).

Overlay settings

The following settings are configured when creating or editing an overlay.

Trigger

Select the trigger that determines when the overlay appears: 

• Page Load: Displays immediately when the relevant page loads. The specific pages are defined in the Targeting step, upon adding overlay variations.
• Time on Page: Displays after a specified amount of time has passed since page load.
• Exit Intent: Displays when a visitor exhibits exit intent by moving the mouse cursor outside the webpage area (desktop only).
• Event: Displays when a specific event fires on the page.
• Advanced: Set multiple triggers using AND/OR logic. Triggers include the main triggers already described, as well as:
  • Element click: Displays when a visitor clicks a specific element on the page, defined by a CSS selector.
  • Element mouseover: Displays when the visitor hovers their mouse cursor over a specific element on the page, defined by a CSS selector.
  • Element load: Displays when a specific element loads on the page, defined by a CSS selector.
  • External component: Display when an external component loads (for example, jQuery).

Frequency

• Once per pageview: The overlay displays every time the visitor meets the targeting conditions upon a new page load.
• Once per session: The overlay displays the first time the visitor meets the targeting conditions and is not shown again during the same session.
• Once per day/week/month: The overlay displays the first time the visitor meets the targeting conditions and is not shown again during the selected timeframe.
• Once per user: The overlay displays as soon as they meet the targeting conditionsthe first time the visitor meets the targeting conditions and is never shown again.

Note: The frequency settings are applied at the Experience level. This means that if you select Once per user for an overlay that has two targeted Experiences – one targeted at new visitors and the other at returning visitors – the user will be shown the overlay as a new user, and then again as a returning visitor.

Advanced settings

• Position on Screen: Determines where the overlay appears on the screen.
• Backdrop Color: Controls the color and opacity of the shading behind the overlay.
• Closing: Defines how and when the overlay can be closed. If multiple closing options are enabled, any of them can close the overlay.
• Priority: Applies to page load triggers only. Because only one overlay can be displayed per pageview, this setting determines which overlay takes precedence when multiple overlays meet the same targeting conditions. If two overlays share the same priority, the one created first is displayed. The default priority is 4.
• Serve on every SPA event: Relevant for single-page applications that do not trigger a browser refresh on screen changes. If you want the overlay to relaunch or reevaluate its targeting upon each screen change, fire a track_pageview event and enable this option. 
• Analytics Integrations: Enables your Experience Web analytics extensions so you can track user behavior in your analytics platform.

Adding recommendations to an overlay campaign

To learn about how to add a recommendation widget in an overlay campaign, see Add recommendations to other campaign types.

Closing an overlay with a custom button

Use the following API call to use a custom button or action to close an overlay:

DY.WindowActions.closeOverlays();