This article will discuss best practices for using Banners.

 Table of Contents

1. What: Introduction to Banners
2. Why: Common Banner Use Cases
3. How: Creating Banner Campaigns, Content, and Rules
• Step 1 - Create a New Campaign
• Step 2 - Create Banner Content
• Step 3 - Create Rules to Tie it All Together

 What: Introduction to Banners

A Banner is a type of overlay-style Campaign in which a piece of content appears as a Banner (also known as a sticky header or sticky footer) on the top or bottom of the page. A Banner is similar to other overlay campaigns in that it is independent of the rest of the page content, appearing in a layer above the page.  It does not replace or interfere with any existing page content; it simply adds an element that appears to float between the viewer and the rest of the page. When a Banner is visible, the user is still free to scroll and interact with the page without engaging with the Banner, and they may easily dismiss the Banner at any time to clear it from view.

Why: Common Banner Use Cases

One familiar use case for the Banner overlay is alerts that are relevant for specific groups of site visitors.  Some sites that offer alerts might show a banner across the top of the screen (a header banner), letting the customer know that there will be scheduled site maintenance or a temporary pause in service.

There is no standard reason that you should or should not choose the Banner type for a campaign, but some other common use cases include

• Prompt non-converters to finish a form
• Share offers inconspicuously as soon as visitor behavior indicates the time is appropriate
• Engage easily with mobile visitors across the entire website
• Link directly to asset download
• Share alerts or time sensitive information, particularly when relevant to specific segments 
• Reminder to complete an action

The content within a Banner is text only and, due to the constrained space, should be limited to one or two lines of text.

How: Creating Banner Campaigns, Content, and Rules

Step 1 - Create a New Campaign

From your Campaign Library in the Get Smart Content admin platform, click the blue button to "Create Campaign" and select "Form Builder" from the dropdown menu.

Best Practice: To avoid the appearance of multiple banners on any single page, we recommend using just one campaign of type Banner for your website.

Basic Information

Fill out the New Campaign form by providing a descriptive Name, setting the Type to "Display text content in a banner," and defining one or more page-level Locations.

Enable Campaign Dimensions

By default, Enable Campaign Dimensions is turned On.  If you want every Banner presentation to be constrained to a single height and width, you may specify those dimensions here, in pixels or other available units.

If you instead intend to control the dimensions of your Banners at the content level (or by use of an external style sheet), then you can turn this campaign setting Off.  If you want the Banner to just take the dimensions of the page it is on, then you can turn this setting Off or set the width to 100%.

Default Content

By default, Serve Default Content If No Rules Are Matched is turned On. This is more relevant for Embed type campaigns. For Banners and other overlay style campaigns, this step only applies if you want every user to your campaign location pages to see a Banner overlay, regardless of whether they meet any segment conditions.

If you want the default case to be no banner is shown when no rules are matched (which is the most common behavior), then just turn this setting Off for your Banner campaign.

If you do want a default banner, then you should create a piece of content that will be shown to the broadest subset of visitors—those that fail to match any of your other segment-based campaign rules.  That becomes your default content for this campaign, and you should leave On the Serve Default Content toggle and select that content from the available dropdown list.  If you don't yet have that content in your library, you can turn Off this setting, save the campaign, and then come back and edit it after you have created the default content object.

Trigger

When you set up your campaign, you may choose between these options to control when your Banner content will appear:

Campaign CSS and JavaScript

Enable these options to add your own custom style rules or JS code that should be applied to every page that matches your campaign Locations.  This code will be executed before any rules are processed, which is helpful if you need to modify the DOM in some consistent way before displaying your Banner content.

A common use of this field is to modify the default Banner CSS to match your site's style guide, specifically in regard to fonts, background colors, and the overlay close button.  You can override the GSC Banner defaults using the following rules, whether in the campaign CSS, the content CSS, or in your site's own stylesheet:

.gsc-banner {
    background-color: #fff;
    color: #000;
    height: 40px;
    position: fixed;
    width: 100%;
}

.gsc-banner-content {
    font-family: 'Arial';
    text-align: center;
    padding: 10px 60px 10px 10px;
}

.gsc-banner-close-btn {
    background: transparent;
    background-color: #fff
    border: none;
    border-radius: 10px;
    color: #000
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    position: absolute;
    right: 30px;
    top: 10px;
    width: 20px
}

Save

When you are finished configuring your new campaign, choose whether to enable it with the toggle at the top of the form, and then click Add Campaign to save your work to the campaign library.

Step 2 - Create Banner Content

After Step 1, you have a Banner campaign configured to show on specific pages (or sitewide, depending on your Locations settings).  But, without Content, you can't create the rules that actually display something in the overlay.

So, start in your Content Library, and click the "New Content" button or duplicate an existing template if you have one to use.

Basic Information

Give your new content a Name that describes what it is and what it's for.  Consider adding an optional Description, and apply any Tags (also optional) that are relevant to this content. See Organizing Your Smart Content for tips and recommendations on name, description, and tag conventions.

Type

Because banners are necessarily text only, the only type of content that can be delivered in these campaigns is text via the "HTML, Javascript & CSS" content type. Within this content type, you have the flexibility to just create a basic text banner (by typing out the content only) or to add custom functionality such as:

• Fully clickable banner
• A banner with a distinct clickable button
• Uniquely styled close buttons
• Non-closing banner
• A click opens a separate window
• etc.

Best Practice: While you can add as much text as you like to banner content, these campaigns typically work best when constrained to one line of text. We recommend no more than 75 characters for a desktop or tablet banner and no more than 40 characters for a mobile banner. 

 Save 

When you are finished configuring your new content, click Add Content to save your work to the Content library.  Repeat the process to create more content, e.g., to be used with multiple rules or A/B tests.

Step 3 - Create Rules to Tie it All Together

Once you have a Banner campaign and one or more pieces of content to use in your Banner, it's time to create campaign rules to activate your new Banner overlay.  If you don't yet have a Segment defining which visitors will see your Banner, then create one (or more) first.  If your Segments are ready, then return to your Campaign Library and click the ellipsis on your Banner campaign to manage its rules.

The process of creating and configuring rules is pretty straightforward, but you can read more details in this article on the subject.  A Banner campaign may contain a single piece of content or an "A/B Test" that shows a random piece of content from a collection to each visitor.

The Banner campaign type does add some distinct Options to the Rule configuration wizard, so make sure to review that step and confirm the settings that define the appearance of your Banner.

By default, you will get a Banner that appears at the top of the page, but you can change that to a footer banner if you'd like. 

You also have the ability to override any view limitations that were set at the Campaign level, allowing any specific Rule to have a distinct set of view limits. 

When you are finished with your Rule configuration, give it a name and Save.  Be sure to enable your campaign and any rules once you have tested them in Preview mode to turn on the Banner presentation for your site.