Banners

Want to increase order values in your store and encourage customers to make larger purchases? Banners are a tool that will help you achieve this goal.

How do banners work?#

The ECDP platform allows you to create standard, static banners and dynamic banners that display:

1. Shopping cart contents: products that the customer has already selected.
2. Product recommendations: personalized suggestions based on customer behavior and product data.

Both types of banners work in real-time, adapting content to the customer’s current actions on the site.

What can you achieve with banners?

By adding a banner to your site, you’ll increase order value and improve the shopping experience for customers by offering them an easy preview of products they intend to buy.

You can also reach your customers with a broader offer and thereby increase order values.

These banners are versatile tools for increasing conversion in your store. Customers appreciate the personalized approach and intuitive shopping suggestions.

You can place them on any pages of your store, such as:

• product page,
• cart page,
• wishlist page,
• payment confirmation page for promotions and marketing campaigns.

With a simple editor, you can customize the appearance and content of banners to perfectly match your store’s style.

Requirements

Both types of banners operate based on data collected from your store’s website. To ensure they display correctly, make sure that the Web Tracking channel is properly configured.

Banners – statuses and marketing metrics

Information about the statuses of all created banners and their effectiveness can be found in the table available in the Automation > Banners section. Use it to monitor the effectiveness of each banner and optimize your sales strategy.

The banners you create are grouped by status:

• All – here you’ll find a collection of all created banners.
• Active – displays banners that are in use. You have options to preview active banners, pause their display, or delete them. You cannot edit them.
• Inactive – this list contains all banners that are no longer displayed. From here, you can preview, edit, activate, and delete them.
• Drafts – displays banners in creation. You can preview, edit, or delete their drafts.
• Deleted – every deleted banner ends up here. You only have the preview option available.

Marketing metrics available in the table include:

• Views – shows how many times a given banner was displayed.
• Clicked – shows how many times a customer clicked the banner.

Detailed settings for each banner can be found in the preview [gif — click on action in grid]

Creating banners

Click the Create new banner button on the right side above the table.

At the top, you’ll find a progress bar with consecutive banner creation stages. There are five of them. The stage you’re currently working on is underlined with a colored line. You can freely move between stages by clicking on them. This won’t cause any loss of entered data.

Step 1: Basic settings

Here you will:

1. Enter the banner name, which will be visible in the statistics table available in the panel.
2. From the dropdown list, select the website address where the banner will be displayed.
3. Optionally set a time range – date and time – during which the banner should be displayed.
4. In the Tracking section, you will enable tracking of custom and Google parameters.

Step 2: Conditions and recipients

Here you’ll decide in what situation the banner will display. This stage is not mandatory and can be skipped. In that case, the banner will display on all pages of your store.

In the Conditions section, you’ll set:

1. Page type – narrow down the banner display possibility to a selected page type, e.g. a product page, a cart page, a payment confirmation page or other pages.
2. Page address – specify what keywords, phrases, or domain name elements must be present in the page URL for the banner to display. You can choose from:
   • Condition – this option opens a window for entering up to 10 regular expressions.
   • Value – field where you place the keyword or URL.
   • Test value – enter the address of the page or subpage where you want to test the banner. After entering, click Test and check if the banner displays on the page.
3. Session duration – set the time interval after which the banner will display when a user enters the page, e.g., between 10 and 20 seconds.
4. Number of visited pages – set the number of pages after which the banner should display. Also indicate the type of pages the user must have visited for the banner to be displayed: any page, product page, cart page, payment confirmation page.

In the Recipients section, you’ll decide which customers will see the banner:

• New / returning — select the user type from the dropdown list.
• Customer / non-customer — choose whether the banner should display to current customers of your store or only to people who aren’t yet your customers.
• Consents — decide how many and what types of consents recipients must give to be shown the banner.
• Session source — indicate where customers who will see the banner should come from, e.g., a specific social media channel, search engine, article linking to the banner page. You can also provide a utm tag for a specific marketing campaign.

Step 3: Content

The editor is used for designing banners. You use the same editor in ECDP to create emails, forms, and pop-ups.

If this is your first encounter with the editor in the ExpertSender platform, you’ll find a detailed description of its functions and content blocks in the article: How does the content editor work?

Frequently displayed content in banners includes the customer’s cart contents and personalized product recommendations. In this article, you’ll find instructions on how to create such content in the editor: Cart and recommendations in different content types – step-by-step configuration

If you want to test thow the banners display on your site, create a test banner using the Text block, and basic styling.

Step 4: Placement#

Here, you’ll choose the place in your e-store where the banner will display. CSS selectors are used for this — you’ll find a brief explanation of what they are in the What is a CSS selector section.

In the CSS Selector section, enter the name, ID, or class of the selector that will be the reference point for the banner. According to this selector, we’ll place the banner on your store’s page. How do you find a CSS selector on any page?

1. Open the page where you want to place the banner in a separate tab.
2. Hover your cursor over the element relative to which you want to place it (above, below, or inside the element).
3. Right-click on the element and select Inspect from the context menu.
4. A window with the page code will open on the right side of the browser.
5. You’ll see your selected page element highlighted in blue.
6. Hover over it with your cursor, right-click and select Copy > Copy selector.
7. Go to the banner editor and paste the copied text in the CSS Selector section. Note whether the ID selector is preceded by a hash and the class selector by a dot.

In the Placement relative to selector section, choose the banner placement relative to the previously selected selector on your page in relation to other elements that are on it:

• First inside the element – the banner will display as the first element in a group of other elements. This can be a fixed module visible on the store page, containing e.g., text, photos, and buttons. The banner will display inside such a module, before the elements in it.
• Last inside the element – the banner will display as the last element inside a group of other elements.
• Before the element – the banner will display before a single element, e.g., a text block or product photo.
• After the element – the banner will display right under a single element, e.g., a text block or product photo.
• Replace the element – the content from the given selector will be replaced with the banner created in ECDP.

Live test — enter the address of subpages where you want to display the banner and click

Test. Check if your designed banner displays correctly. Remember that the preview will only work on pages where our tracking script is placed.

What is a CSS selector?

A CSS selector points to a specific element on a webpage, e.g., text or image, but also entire modules composed of many elements, e.g., menu bar, page footer, blog article module, etc.

With a selector, you can find the element you’re interested in within the page code and give it a unique style, e.g., change its color or size.

In banners, the CSS selector is used as a reference point. It indicates relative to which element on the page you can locate the banner, e.g., relative to the menu bar or a given product’s image.

The following selectors are used in banners:

• name – e.g., ‘p’ is an element named ‘paragraph’, ‘h’ is ‘heading’: h1
• id – element identifier, e.g., footer; this selector is always preceded by a hash: #footer
• class – always preceded by a dot: .yellow

Step 5: Summary

In the Summary, a checklist is displayed with elements necessary for displaying the banner and their status:

• Elements filled in correctly are highlighted in green.

• Blue is usually additional, marketing information that can add value to your content.
• Options that you need to correct or complete are highlighted in red. Click the pencil icon to go to the settings of that element. Red markings will also appear on the top bar next to steps that need checking.
• Orange marking will appear next to elements whose performance can be improved. If you don’t make changes, it won’t affect the banner display.

With the checklist, you can quickly verify if your selected settings are correct. If you decide to change any element, click the pencil icon to proceed to editing.

At the access bar level, there are two buttons:

• Save and close – will save the banner as a draft and take you to the banner list in the control panel.
• Activate – the banner will start displaying on your store’s page.