Setting up a web-to-app banner: Step-by-step

By Bryan Marks
setting web to app banner steps - square
setting web to app banner steps - square

For mobile advertisers, there are mobile apps, desktop and the often neglected, potentially rich gold mine of ad real estate called the mobile web.

As a mobile app developer, I can understand why this space is overlooked: it’s like desktop with a bad user experience and limited processing power. 

However, mobile web is key because it’s a cost-effective and convenient way to convert high quality web users into highly engaged and loyal app users.

The trick to funneling users to your mobile app from the mobile web is to use an unintrusive but attractive banner and AppsFlyer’s new Banner Generator which makes building a mobile web banner so much easier and faster.  

Adding the banner code to your website is extremely simple, even for mobile developers who aren’t that familiar with web layouts.

Now, let’s get into the step-by-step tutorial on how to configure a web-to-app banner using AppsFlyer’s deep linking solution, OneLink.

First, go to the configuration section of your AppsFlyer Dashboard and click on Configure OneLink. Follow the wizard to create a new OneLink.

While the deep linking scheme is not mandatory, it is strongly recommended. This scheme will define the routing flow so that AppsFlyer knows where to send your user in every scenario.

To create a deep linking scheme and add powerful, deep linking capabilities to your banner, follow our guide.

Once your OneLink is configured, retrieve the OneLink ID on the main OneLink Configuration page and the new (one)link created, you will need it later on.

Configure a OneLink - AppsFlyer

Step 1: Get the pre-built banner code

Download the pre-built banner code.

Open the zip file it and grab everything but: LICENSE, demo.html and files (as they’re not needed).  

 Drop these files into your website root directory.

Step 2: Create a new banner file

Create a new file called banner.js  (this file will contain the banner activation code we are going to configure in STEP 3).

 Put this banner.js file inside your js (javascript) folder in your main directory.

The folders’ layout should look like this:

  ├── css/
  |   └── style.css
  ├── js/
  |   └── banner.js
  └── index.html

 Step 3: Customize Your Banner

For the purpose of this tutorial, I have created a Web-to-App banner for an app called ‘WingBoard’.  

For creating this banner I have configured my banner settings as follows:

Web-to-app banner components - AppsFlyer

Here’s the code I used for creating my ‘Windboard‘ Web-to-App banner. Make sure to customize all highlighted parameters to match your own brand and don’t forget to add the OneLink ID and deep link we’ve grabbed earlier to the routing settings!

var banner = new AFBanner();
     var settings = {
   // banner settings
   title: "Wingboard",
   subtitle: "Sweet lines to send instantly!",
   app_icon: "img/app_icon.png",
   call_to_action: "Install",
   show_only_mobile: true,

   // attribution settings
   media_source: "banner_pid",
   campaign: "banner_c",
   ad: "banner_ad",
   ad_id: "banner_ad_id",
   site_id: "banner_site_id",
   sub1: "banner_sub1",

   // routing settings
   onelink_id: "LniH",
   subdomain: "wingboard",
   mobile_deeplink: "wingboard://"
banner.init("my-banner", settings);

Take not of how I’ve set the media_source to be banner_pid in the attribution settings.  

This will allow me to record my downloads within AppsFlyer dashboard, which is another great advantage of the mobile web banner!  

Step 4: Activate the banner on your website

You’re almost finished!  

The only thing left is to add some lines of codes to your website:

Add the following code to your file to enable the banner code within your app:

<p><code><span style="font-weight: 400;"><script type="text/javascript" src="appsflyer-banner.min.js"></script><br>

Finally, add this line of code to the of your webpage:

<div id="my-banner"> </div>

By now, you should be finished and able to see your banner within your mobile webpage but…wait!

A minute before you send an email to your team about today being the most productive day of the quarter, make sure you don’t skip one critical step – testing your banner.

Step 5: Test your banner

 Has the banner been added on your website?
    If it hasn’t, make sure your OneLink was correctly configured (step 0) and that all mandatory parameters (in step 3) have been provided.

 Can you see the banner across the right, desired platforms?  Test with IOS, Android and desktop.

  • If you wish to view the banner on both mobile AND desktop, set your banner settings to: show_only_mobile: false
  • If you wish to view the banner on mobile ONLY, set your banner settings to: show_only_mobile: true

 Is the banner link working? Is it routing you to the app store or to your app?
    If your banner link is broken, make sure that the OneLink subdomain set in routing settings (step 3) is identical to the subdomain defined in the OneLink configuration (step 0). Any mismatch between the subdomain defined in the banner and the one defined in the OneLink Configuration will result in a broken link!

All done!

Bryan Marks

Bryan is an iOS / Python developer who has assisted and contributed on multiple top App Store apps, as well as releasing his own apps. While not working on iOS apps, Bryan enjoys learning about Machine Learning, building backend data processing systems, consulting and hack-a-thons.
Ready to start making good choices?