How do you integrate fly-in ads?

Overview

With Fly-In Ads, you can display advertisements as a subtle overlay on your website. Unlike traditional ads, Fly-In Ads are not displayed directly at the position of the integration code, but slide in at the edge of the browser window depending on your settings.

Fly-In Ads are particularly suitable for attracting attention without interrupting the users' reading flow.

Requirements

Before you can use Fly-In Ads, you need:

• a created website in your publisher account

• an ad block

• a matching ad block layout

• a working responsive or static ad block

Fly-In Ads can be used with both Responsive Ads and Static Ads.

Activate Fly-In Ads

Fly-In Ads are activated via the optional parameter flyin.

Asynchronous Integration

flyin: true

Synchronous Integration

flyin=1

As soon as this parameter is set, the ad is displayed as a fly-in overlay.

Behaviour of the Fly-In Container

flyin_mode

With flyin_mode, you control when and how the fly-in container becomes visible.

Mode 1 (Standard)

The container reacts to the scroll position.

flyin_mode: 1

Mode 2

The ad is fully visible immediately after the page loads.

flyin_mode: 2

Mode 3

The ad only appears when the end of the page has been reached.

flyin_mode: 3

Set Position

flyin_position

Determines which side the fly-in container fades in from.

Available values:

• right (standard)

• left

• top

• bottom

Example:

flyin_position: "top"

Define Offsets

The position of the fly-in container can be adjusted via pixel values.

By default, each offset is 15 pixels.

Example:

flyin_offset_right: 20

Set Delay

flyin_delay

Determines the time after which the fly-in container is first displayed.

The value is specified in milliseconds.

Standard:

250

Example:

flyin_delay: 1000

Control Animation

flyin_animate

Activates or deactivates the folding and unfolding animation.

By default, animations are enabled.

Example:

flyin_animate: false

Allow Closing

flyin_closeable

Determines whether users can close the fly-in container.

Standard:

flyin_closeable: true

Deactivate:

flyin_closeable: false

Allow Folding and Unfolding

flyin_collapsible

Controls whether the user can fold or unfold the container.

Example:

flyin_collapsible: false

Customise Texts

Headline

By default, the headline reads:

Also interesting:

This can be customised individually.

flyin_text_headline: "Our Recommendations"

Close Button

The label of the close button can also be customised.

Standard:

close

Example:

flyin_text_close: "[X]"

Complete Example

window.uAd.embed("adup1", {    placementkey: "YOUR_PLACEMENT_KEY",    flyin: true,    flyin_mode: 2,    flyin_position: "right",    flyin_delay: 1000,    flyin_closeable: true,    flyin_collapsible: true,    flyin_text_headline: "Recommendations",    flyin_text_close: "Close"});

window.uAd.embed("adup1", {    placementkey: "YOUR_PLACEMENT_KEY",    flyin: true,    flyin_mode: 2,    flyin_position: "right",    flyin_delay: 1000,    flyin_closeable: true,    flyin_collapsible: true,    flyin_text_headline: "Recommendations",    flyin_text_close: "Close"});

window.uAd.embed("adup1", {    placementkey: "YOUR_PLACEMENT_KEY",    flyin: true,    flyin_mode: 2,    flyin_position: "right",    flyin_delay: 1000,    flyin_closeable: true,    flyin_collapsible: true,    flyin_text_headline: "Recommendations",    flyin_text_close: "Close"});

Best Practices

Use Fly-In Ads subtly

Fly-In ads achieve the best results when they assist users and do not distract from the actual page content.

Delay display

A short delay ensures that visitors can first perceive the actual content.

Recommendation:

500–1000 ms

Allow closing

Keep the close button activated so users can hide the ad at any time.

This improves the user experience.

Test mobile display

Check Fly-In Ads on:

• Desktop

• Tablet

• Smartphone

Pay particular attention to ensuring that no important content is obscured.

Common Sources of Errors

Fly-In not activated

All other Fly-In parameters are only considered if flyin has been activated.

Too large offsets

Very large offset values can cause the container to be partially outside the visible area.

Too early display

A fly-in directly when loading the page can be perceived as disruptive.

Instead, use flyin_delay or the scroll-based mode.

Animation deactivated

If animations are deactivated, the container appears without a transition. Depending on the design, this can look less harmonious.

Typical Application Areas

Fly-In Ads are particularly suitable for:

• Product recommendations

• Native Advertising

• Content recommendations

• Newsletter sign-ups

• Cross-selling

• seasonal campaigns