Bound - Help Center

What, Why, and How: Fly-In Campaign Type

This article will discuss best practices for using fly-ins.

 

Table of Contents

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

 


 

What: Introduction to Fly-Ins

A Fly-In is a type of overlay-style Campaign in which a piece of content appears or slides into view from one side of the screen and stops at a point that you determine, typically occupying a small area in a corner.  It is similar to a Modal 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.  It differs from the Modal type in that the rest of the page is not obscured by a dim mask and a Fly-In usually does not appear in the middle of the screen.  When a Fly-In is visible, the user is still free to scroll and interact with the page without engaging with the Fly-In, and they may easily dismiss the Fly-In at any time to clear it from view.

 

Why: Common Fly-In Use Cases

One familiar use case for the Fly-In overlay is a chat notification.  Some sites that offer live chat might show a small box in one corner of the screen (a fly-in containing the chat box or call-to-action), inviting the visitor to engage in a conversation with a sales or support representative.

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

  • Product tips or tutorial for new users
  • Notification of an available or upcoming promotion
  • Welcome video or walk-through for known new customers
  • Personalized link to an account-specific landing page or microsite
  • Showcase a new industry-specific or stage-specific announcement
  • Link to request or download a report or whitepaper
  • Invitation to attend a webinar or other event
  • Short survey to identify otherwise-unknown visitors

The content within a Fly-In is often an uploaded or self-hosted image, though more complex mixed-media content also works well.  For example, you can create content with HTML, JavaScript & CSS to display a chat experience, a video player, or a "Tip of the Day" notification.

 

How: Creating Fly-In 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.

Screen_Shot_2018-06-20_at_1.48.22_PM.png

Note: You may also use the interactive Campaign Editor to create modal campaigns.  For more information about the limited beta feature, see this article.

Best Practice: To avoid the appearance of multiple fly-ins on any single page, we recommend using just one campaign of type Fly-In for your website.

 

Basic Information

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

Enable Campaign Dimensions

By default, Enable Campaign Dimensions is turned On.  If you want every Fly-In 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 Fly-Ins at the content level (or by use of an external style sheet), then you can turn this campaign setting Off.  If you want the Fly-In to just take the dimensions of the image it contains, then you can turn this setting Off or set the height and width to auto.

Default Content

For new campaigns that are replacing existing content not controlled by GSC, it is important to set up default content that will be displayed if no rules are matched for a given visitor.  This is more relevant for Embed type campaigns, for which you would likely copy the existing code into a new piece of GSC content and then choose that from the campaign's Default Content list.  This ensures that something is shown in a campaign location (if that is the required behavior) and that we can track the performance of that default content in comparison to any personalized content that replaces it.

For Fly-Ins and other overlay style campaigns, this step only applies if you want every user to your campaign location pages to see a Fly-in overlay, regardless of whether they meet any segment conditions.

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

If you do want a default fly-in, 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 turn 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 Fly-In content will appear:

Value Description
Instant Default.  Your Fly-In will appear immediately when the page loads.
Time (delay) Specify a length of time after loading the page to delay showing the Fly-In (1000 milliseconds = 1 second)
Scroll Don't show the Fly-In until the user has interacted with the page by scrolling. Choose how far the user must scroll by specifying a trigger scroll distance in pixels or percentage from the top or bottom of the page.  For example, to only trigger when they have reached the bottom of the page, set the scroll distance to 0.

 

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 Fly-In content.

A common use of this field is to modify the default Fly-In 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 Fly-In defaults using the following rules, whether in the campaign CSS, the content CSS, or in your site's own stylesheet:

.gsc-flyin {
    background-color: #fff;
    border: 1px solid #000;
    display: none;
    position: fixed;
    z-index: 11; /* Slide-shows are set at 10 */
}

.gsc-flyin-close-btn {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}

 

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.

Screen_Shot_2018-06-20_at_2.00.50_PM.png

 

Step 2 - Create Fly-In Content

After Step 1, you have a Fly-In 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.

Screen_Shot_2018-06-20_at_2.10.58_PM.png

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

If you want to choose an image file from your hard drive to appear alone in this Content module, choose "Upload Content" and then browse to locate the file.  Get Smart Content will host the file at our CDN and serve it to the visitor when your content is shown.

If you have a file that already exists on your own web server, then choose "Self-Hosted Content" and provide the full path to the image file you want to use.  The file will be served directly from that location when it is shown to your visitors.  Make sure that the full URL is valid and can be accessed by end users from your campaign locations.  In most cases, you should avoid using files with any access restrictions, such as those that require secure logins, firewall access, or other private authentication measures.  If visitors might access your campaign pages by secure HTTPS, then your self-hosted content path should also have the HTTPS protocol.

Best Practice: A Fly-In image is a great way to deliver a static message or notification to your site visitors, but without a Click-Through URL, we cannot track and measure user engagement with that content.  For any sort of link or invitation type of content in a Fly-In, be sure to provide a URL so that we can track those clicks and include them in performance reports.

For all other non-image content, choose "HTML, JavaScript & CSS" as the content Type.  You will see three free-form text entry fields where you can add any source code to define your custom Fly-In content.  This could be as simple as an <img> element that requires some extra style properties or click handlers, or it could be a complex dynamic form with AJAX data submission callbacks that modify other content on the page.  The code is totally up to you and your Fly-In personalization needs.  However, if you disabled Campaign Dimensions when you set up the campaign, be sure that you are defining the height and width of your content somewhere—whether in the content HTML & CSS or in existing style properties elsewhere on the page.  Also, be sure to add the "gsc-track" class name to all links so that we can track user engagement with your custom content for reporting.

Best Practice: While you may choose any image or other content for your Fly-In, we recommend in most cases that you stick to a size on the small side—a modest square or rectangle that will occupy an empty corner of the screen.  Since the Fly-In will appear to float over the rest of the page, you don't typically want to create an overlay so large that it obscures a lot of page real estate and prevents visitors from viewing or interacting with other important content that may be layered beneath the Fly-In.

 

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, A/B tests, or slideshows.

 

Step 3 - Create Rules to Tie it All Together

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

Screen_Shot_2018-06-20_at_2.12.35_PM.png

 

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

The Fly-In 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 Fly-In.

Screen_Shot_2018-06-20_at_2.19.09_PM.png

By default, you will get a Fly-In that appears instantly at the top left corner of the page on every page load at your campaign locations.  Click the directional toggles (Top, Bottom, Left, Right) to snap the Fly-In presentation to that side of the page, and add a numerical value to the corresponding input box to specify the distance in pixels that the Fly-In should appear from that edge.  You can center the Fly-In horizontally by clicking to deselect the Left or Right directional toggle.

A default Fly-In is configured to appear instantly, but you can change the Animation setting to have it fade in or slide in from the top, bottom, or sides.

If you don't want your Fly-In to appear on every visit then turn on the "Only Show Campaign Once" option to set a cookie that prevents the Fly-In from being shown on subsequent visits or page loads by a visitor who has already seen it.  You can reset that cookie, forcing the Fly-In to be shown again, by specifying a "Cookie Expiration" value (as the number of days between Fly-In appearances).

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 Fly-In presentation for your site.

 

 

 

 

 

 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request