Singular Banners

Singular Banners is an enterprise feature. To learn more about this feature, reach out to your Customer Success Manager.

Introduction

Singular Banners allow your brand to quickly and easily design, deploy, and maintain brand-relevant banners on your mobile website. These banner experiences include call-to-actions, which, when engaged with, give mobile-web users a seamless experience into the most relevant mobile app content. 

Overview

Singular Banners are enabled in a two-step process: Design and Publishing. Design is the process in which your creative team can define the creative of the banner, as well as configure activation rules for which users can see the banner. Publishing banners is the process in which your operations team can define when one or more banners are activated and shown to your mobile web users.

Use display rules to support a wide variety of use cases, both common and advanced.

For example:

  • Show a banner on a specific page, only once per time interval
  • Show a localized version of a banner for two countries, with a default version for all other countries
  • Show a banner promoting different apps on different pages

Prerequisites

Adding the SDK Script to your Site

Singular hosts the SDK JavaScript code on Singular's CDN.

Add the following code inside the <head> tag of each page you want to track:

<head>
<!-- Using the latest SDK version   -->
<script 
src="https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk-banners.js"> </script> </head>

Configuration

Follow the Native SDK Integration Guide for Initialization and Tracking Events and Revenue. 

Standard integrations require no additional steps in the SDK implementations. However, optional web SDK methods are available to hide and (re-)show banners in case of custom visibility requirements. These methods must be called after the SDK has been initialized.

  • singularSdk.hideBanner(): Hide a visible banner from your page
  • singularSdk.showBanner(): show your pre-configured banner on your page
  • singularSdk.showBanner(linkParams): show your banner but override links

The linkParams object is optional and is used to personalize the links shown to your users. While defining the object, you may change your links using the following optional functions:

Function Description
withAndroidRedirectParam Pass a redirect link to your Android app download page, usually a Play Store page.
withAndroidDLParam Pass a deep link for a page within your Android app.
withAndroidDDLParam Pass a deferred deep link, i.e., a link to a page in your Android app that the user hasn't installed yet.
withIosRedirect Pass a redirect link to your iOS app download page, usually an App Store page.
withIosDL Pass a deep link to a page within your iOS app.
withIosDDL Pass a deferred deep link, i.e., a link to a page in your iOS app that the user hasn't installed yet.
//Usage example
let bannerParams = new LinkParams();
bannerParams.withAndroid("androidRedirectValue");
bannerParams.withAndroidDL("androidDLParamValue");
bannerParams.withAndroidDDL("androidDDLparamValue");
bannerParams.withIosRedirect("iosRedirectValue");
bannerParams.withIosDL("iosDLValue");
bannerParams.withIosDDL("iosDDLValue");
singularSdk.showBanner(bannerParams);

 

FAQ

What can you customize in banner design?

Creative

  • Banner Type
  • Logo
  • Logo Text
  • Call to action button
  • Dismissal button
  • Background
  • Border

Interaction

  • Call-to-action Button behavior
  • Dismissal Behavior 

Activation rules

  • Page
  • Geo
  • Language
  • Times they have seen the banner
Can I have one website show banners for multiple mobile apps?

Yes, during the banner design, Singular defaults to the parent app the web app site belongs to. However, you can select other mobile app sites belonging to other apps to set interactions to.