Smart Banners—mobile web-to-app

At a glance: The majority of website traffic worldwide originates from mobile devices. Use Smart Banners, on your mobile web site, to convert visitors to your app.

Smart Banners

Implement Smart Banners by integrating the AppsFlyer Smart Banner SDK into the website. Apart from the initial integration, no further coding is required.

By using Smart Banners you can measure the quality of app installs coming from visitors to the mobile website. Smart Banners can attribute using click-through attribution and count impressions:

Clicks: A user clicks the Smart Banners and proceeds to install.
Impressions: When the banner loads (user sees the banner), it sends an impression count event to AppsFlyer.

Note

Not sure whether Smart Banners is the right solution for you?
Compare Smart Banners with other AppsFlyer web-to-app solutions.

Scope of work

Who's involved

Marketer and website developer.

The website developer only needs to enter a code snippet into the HTML of the website.
For all other setup actions, only the marketer is required.

Prerequisites

An AppsFlyer account with at least one app
OneLink template containing the app/s to be advertised using Smart Banners
This is required by Smart Banners to direct your mobile web visitors to the correct app store pages according to the devices they use.

Time required

Approximately 20 minutes.

Outcome

Website visitors clicking the CTA button will be sent to the correct app store or web page based on their device.
Mobile app users clicking the CTA button can be deep-linked into the app.
Users will be attributed from the click/install to your owned media sources.

Example

Mark is a marketer working for the successful food delivery service "Feed Me".
Mark wants to convert Feed Me's mobile website visitors into app users.

To do this Mark utilizes Smart Banners using his own visuals and texts.

Smart Banners are powered by OneLink. When mobile website visitors click the CTA button, it automatically directs them to the appropriate app store or landing page, where it's easy for them to install the app. When existing mobile users click the CTA button, it launches the app.

AppsFlyer then attributes the click/install to Mark's defined media source and campaign.

Important!

Use either AppsFlyer Smart Banner or iOS Safari smart app banner, but not both. Using both may cause display issues on your mobile website, and result in attribution discrepancies.

Procedures

Complete the following procedures to set up a smart banner that:

Directs users from your mobile site, via a Smart Banner, to the correct app store or app page based on their device.
Attributes the click/install to your owned media source using OneLink.

1. Website setup

To prepare your mobile site to display Smart Banners:

In the AppsFlyer dashboard, go to Engagement & Deep Linking > Smart Banners
Click Create Website workplace.
Enter a Website workplace name.
Click Create.
The Website workplace opens.
Copy the banner Code snippet.
Send the Code Snippet to your front-end developer to implement on your website.
This quick task is done only once per website by the front-end developer, who is not involved anymore during the following steps.
[optional] Copy Web key. (This key already exists as part of the code snippet.)
Click Continue.

2. Banner Group Setup

Banner Groups contain one or more banners. Here you can:

Select the OneLink template used by the Banner Group, which contains the mobile apps to redirect your website visitors to.
Set a specific deep-linking scheme
Define your targeting rules, scheduling, behavior, and attribution details used by all banners of the Banner Group.
Set which pages activate the Banner Group's banners when visited.

To set up a new Banner Group:

In the AppsFlyer dashboard, go to Engagement & Deep Linking > Smart Banners
On the left-hand side, click Add Banner Group.
Enter a unique Banner Group name.
The name should reflect a general common theme between the Banners to be defined for the Banner Group (e.g., the advertised app).
Select the OneLink template for the Banner Group.
[optional] Set URI scheme for the Banner Group as a fallback for Universal Links and Android App Links users. This is rarely needed, as by default, the value is taken from the OneLink template. Set this for the Banner Group only if you need a different value than the one in the template.

Set the Attributed sources to be attributed with new installs coming from this Banner Group. Use the following table to pick the best option for the custom link.

Option	When to select	Comments
Use default attribution parameters	Select when most mobile website visitors are organic. Select when non-organic visitors don't get to the website from click ad networks or from sources with UTM parameters.	Important: These values are used on the custom link as a fallback if the media source, campaign, or channel names are not available.
Use UTM parameters	Select when most non-organic visitors get to the mobile website from sources with UTM parameters.	Media source name (pid) = UTM_Source Campaign (c) = UTM_campaign If the UTM_source or UTM_campaign are missing, the static names are used as a fallback.
Use incoming attribution link parameters	Select when most non-organic visitors get to the mobile website from click ad networks that use AppsFlyer attribution links.	All available parameters from the incoming AppsFlyer attribution link are added to the Smart Banner link. If a parameter exists in both the incoming AppsFlyer attribution link and the Smart Banner, the incoming parameter takes precedence in the final custom link.
Add another attribution parameter	If you want to add additional website-related attribution data. This enables granular analysis of every install.	For example, for eCommerce sites create identical custom links for every product category type, that differ by af_adset values (for example: "af_adset=fruit")

[Recommended] Set the default attribution parameter Channel name to attribute all installs coming from the Smart Banner to the specified channel. This enables you to aggregate information from multiple media sources under the same channel in the Cohort report, Overview dashboard, Retention report, and more.
[Optional] Set the Dismissal behavior, i.e. the minimum time allowed between a user dismissal of the banner, until the banner may be displayed again to the user. Select from one of the following:
- By time: 1 hour, 1 day, or 1 week.
- Next session: meaning the session that takes place in a different tab or window, after the user closes the banner.
- Never: the banner is not shown again.
  Note: If the user clears the browser cache or views the site in private browsing mode the Dismissal Behaviour setting is lost.
[optional] Set Frequency capping.
Frequency capping determines how many times the banner is shown to a unique user. For example, if frequency capping is set to three, and a user visits the site four times, the user sees the banner on the first 3 visits but not on the fourth and onward. Frequency capping can be disabled. Select a frequency capping value or disable frequency capping.
[Optional] Schedule the Banner Group's activation: start immediately (default) or set a time-limited campaign.
[Optional] Set Locations where the Banner Group is activated for.
1. Select Worldwide to display this Banner Group to all users. If needed, exclude visitors coming from different regions, countries, or states.
2. Select Pick specific location option to display this Banner Group to users from one or more specific locations.
[Optional] Set Show on pages, meaning, on which pages the Banner Group can be displayed to visitors:
- [Default] Show on all pages of the website.
  Note: We recommend defining at least one Banner Group for all pages as a fallback.
- Show on specific pages: Specify the conditions for what the page or URL should or should not contain in order to display banners.
  - Allowed special characters: &, ?, =, /, :, -, %.
  - Up to 5 conditions can be added using and/or.
  - If there is a conflict between conditions, the banner will not display.
Click Create Banner Group.
[Optional] To edit the Banner Group again, hover over Targeting & behavior and click Edit.

Example

Mark decides to create a campaign for Feed Me's new line of vegan burgers in California.

He creates a new Banner Group and calls it "Feed me burgers".
He sets the Location to California state, so only CA-based visitors see the Banner Group.
He specifies that banners should only display on the page https://feedme.com/promo/veganburger when the URL contains utm_campaign=google.

3. Banner setup

To create the first banner for a new Banner Group:

Click Create Banner to enter the Add Banners page.
Set the Name of the banner.
Click Design creative to set the creative of the banner (details below).
After finishing and saving the new creative, the banner's status becomes active. Use the toggle to switch between Active and Paused statuses.
[optional] Add banner-specific Attribution parameters if needed, e.g. Ad name.
To convert the attribution link from a user acquisition type URL to a retargeting URL, add the custom is_retargeting=true parameter.
Click Save all and close.

Banner Creative setup

To create a Smart Banner's creative:

Enter the creative's setup after clicking on Design creative in the Banner setup page.
Select a Creative template, hover over it, and click Create to enter the Build creative setup page.
In the Build creative setup page, you can experiment with other creative templates.
Change all texts and images to your own.
All images must be formatted as either .png, .jpeg or .jpg, and their URLs must include the file extension. https://example.com/my_image.png is a valid URL. https://example.com/my_image is not a valid URL.
Check the tooltip for every image you use to see the recommendations for it.
Click Build Creative.

4. Testing

Once the creative is ready, it's time to put it to the test before setting it live and activating it for your users.

To test a Smart Banner's creative:

Prerequisite: Make sure that the Smart Banner code snippet is integrated into your website.

In the Test Creative page, enter the link to your web page where the Smart Banner SDK is integrated (see next tab).
Click Generate.
Copy the generated link and send it to your test device, or scan the QR code with the test device. The link or QR should redirect you to the web page and display a banner with the creative.
Click Edit Creative to return to the creative configuration, or click Done to save the creative.

AppsFlyer provides a Smart Banner SDK that advertisers integrate into their websites. The purpose of the SDK is to pull all the required data to dynamically display the Smart Banners. The Smart Banners SDK also automatically builds the proper attribution links, so you don't need to build them manually.

Therefore, the Smart Banner SDK should be accessible from all pages displaying your mobile banners.

The Smart Banner SDK authenticates using the unique Web key, which you can get from the Website workplace.

Code snippet

Note

Starting January 1st, 2020 there's a new SDK for Smart Banners.

The new AppsFlyer web SDK lets you use both Smart Banners and People-based Attribution on your website. The SDK snippets below show two examples:

Include this code snippet in the <head> tag of every page displaying your mobile banners.

AppsFlyer web SDK for Smart Banners only

Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
Paste this code snippet in the head tag on your website. Make sure to paste it near the top of the head tag.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: "YOUR_WEB_KEY"}});

AF('banners', 'showBanner');

</script>

AppsFlyer web SDK for Smart Banners and people-based attribution

Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
Replace the YOUR_PBA_KEY placeholder in the script with your web dev key. The web dev key is created when you create a brand bundle.
Paste this code snippet in the head tag on your website. Make sure to paste it near the top of the head tag.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});

AF('banners', 'showBanner');

</script>

        <script>
          !function(e,n,t){!function(e,n,t,r,a){
          var s=(e[n]=e[n]||{})[t]=function(){(s._q=s._q||[]).push(Array.prototype.slice.call(arguments))};
          s.webkey=a;
          for(var i=0;i<r.length;i++)
          s[r[i]]=function(n)
          {return function()
          {var e=Array.prototype.slice.call(arguments);
          return e.unshift(n),(s._q=s._q||[]).push(e),s}}
          (r[i])}(e,"AF","Banner",["showBanner","hideBanner","disableBanners","disableTracking","setAdditionalParams"],t),
          function(e,n,t){var r=e.createElement("script");
          r.type="text/javascript",r.async=!0,r.src=n+(t?"?webkey="+t:"");
          var a=e.getElementsByTagName("script")[0];
          a.parentNode.insertBefore(r,a)}(n,"https://cdn.appsflyer.com/web-sdk/banner/latest/sdk.min.js",t)}(window,document,"YOUR-BANNER-KEY");
          window.AF.Banner.showBanner();
        </script>

Adding the SDK using tag managers

You can use tag managers to add the Smart Banners SDK to your website.

In GTM, create a new tag.
Name the tag, click Tag Configuration, and select Custom HTML.
In the HTML box, paste the SDK snippet. Replace YOUR-BANNER-KEY in the snippet with your actual banner key.
Click Triggering and create a new trigger by clicking on the plus icon at the top right-hand corner of the screen.
Name the trigger, click Trigger Configuration, and choose Page View.
If you want the banner to show up on all pages, select All Page Views. If you want the banner to show up on selected pages, select Some Page Views and define the condition to trigger the tag. To learn more about triggers, read GTM's documentation.
Click Save at the top right-hand corner.
Return to the tag configuration screen. Verify that all is set and click Save at the top right-hand corner.
Publish your GTM container.

Step 1: Create a property in Adobe Experience Cloud

Create a property (tag) that hosts the Smart Banners SDK.

Go to Adobe Experience Cloud > Launch.
Under Adobe Experience Cloud Launch, click Go to Launch.
Click New Property.
Name your property.
Under Platform, select Web.
Enter your website domain.
Click Save.

Step 2: Add Smart Banners SDK to the Adobe Launch property

Add the Smart Banners SDK to the tag.

On My web property page, select the Rules tab.
Name the rule. Recommended to use Load Smart Banners.
In the IF section, under EVENTS, click +Add.
- Under Event Type, select Core - DOM Ready.
- Click Keep Changes.
In the THEN section, under Actions, click +Add.
- Under Action Type > Custom Code.
- Select JavaScript > Open Editor and paste the Smart Banners SDK snippet without the <script> tags.
- Click Keep Changes to close the code editor.
Click Save.

Step 3: Add the Adobe Launch tag to your website

Add the Adobe Launch tag to your website. The tag loads the Smart Banners web SDK.

On the My web property page, select the Environments tab.
Find the row with the environment you want to publish (development or production).
- Under the INSTALL header, click the box icon on the relevant row; this is usually a production environment.
- See the section about publishing the Adobe Launch environment.
In the Web Install Instructions dialog box:
- Copy the script code snippet.
- Close the dialog box.
Paste the code snippet into the <head> tag of your website.

Step 4: Publish the Adobe Launch environment

Publish the environment to activate the Adobe Launch tag.

On the My web property page, go to the Publishing tab.
Under the Development section, click Add New Library.
1. Name the library and choose an environment.
2. Under RESOURCE CHANGES, click Add a Resource.
3. Click Rules > Load Smart Banners > Latest > Select & Create a New Revision.
4. Click Save.
Under the Development section:
1. Next to the newly created library, click the Action menu (3 dots) and select Build for Development.
2. Click the action menu again and select Submit for Approval.
Under the Submitted section:
1. Click the action menu and select Build for Staging.
2. Click the action menu again and select Approve for Publishing.
Under the Approved section click the action menu and select Build & Publish to Production.
The process is now complete.

Now, when your website loads on mobile, the banner's active creative will be displayed. To only display the banner on certain pages or according to user actions, see Adobe Launch rules.

SDK functions

Showbanner

Purpose:

Start showing the Smart Banner according to the banner key provided in the snippet.

Parameters (optional):

bannerContainerQuery
If passed, the SDK tries to locate an element in the page with this query and treats it as the entry point for the banner placement. Otherwise, document.body is used.
additionalParams
If passed, these parameters are added as query parameters to the banner URL.

Example:

AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
additionalParams: { p1: "v1", p2: "v2"...}});

showBanner({ bannerContainerQuery: "#container-id", 
additionalParams: { p1: "v1", p2: "v2"...}});

hideBanner

Purpose

Programmatically remove any displayed banner from the page (e.g. after displaying for X seconds).

AF('banners', 'hideBanner')

disableBanners - deprecated

Purpose

This function is only available in the old Smart Banners SDK and is going to be deprecated.

Disable the web SDK from displaying banners and communicating with AppsFlyer servers.

disableTracking - deprecated

Purpose

This function is only available in the old Smart Banners SDK and is going to be deprecated.

Disable the web SDK and clear traces of collected info from the browser (i.e. local-storage, cookies, etc.).

setAdditionalParams - deprecated

Purpose

This function is only available in the old Smart Banners SDK and is going to be deprecated.

set additionalParams to the OneLink before calling showBanner. The parameters are appended on the OneLink URL behind the banner.

Parameters

Params
Map of key/value parameters that can override any pre-existing attribution link parameters (besides the pid value).

Usage example

You want to differentiate between landing pages using specific parameters. To do so, you can append additional parameters to the OneLink behind the banner. When a user installs your app after clicking the banner, the parameters on the OneLink appear in the raw data for you to analyze. The code example below makes use of the af_sub1 parameter.

// call this method before calling showBanner()
setAdditionalParameters('af_sub': 'custom_paramter_value')

The format of the final OneLink is this: subdomain.onelink.me/onelink-id?pid=af_banner&c=campaign&af_sub1=custom_paramter_value.

The subdomain and OneLink ID are taken from the OneLink template.

For example: ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page.

You can use any valid parameter. For more information on attribution link parameters, see here. Make sure not to override the pid and c parameters, because these already exist on the attribution link behind the banner.

getAdditionalParams- deprecated

Purpose

This function is only available in the old Smart Banners SDK and is going to be deprecated.

Get the current additionalParams object.

Smart Banners

Note

Scope of work

Example

Important!

Procedures

1. Website setup

2. Banner Group Setup

Example

3. Banner setup

Banner Creative setup

4. Testing

Code snippet

Note

AppsFlyer web SDK for Smart Banners only

AppsFlyer web SDK for Smart Banners and people-based attribution

Adding the SDK using tag managers

Step 1: Create a property in Adobe Experience Cloud

Step 2: Add Smart Banners SDK to the Adobe Launch property

Step 3: Add the Adobe Launch tag to your website

Step 4: Publish the Adobe Launch environment

SDK functions

Showbanner

Purpose:

Parameters (optional):

Example:

hideBanner

Purpose

disableBanners - deprecated

Purpose

disableTracking - deprecated

Purpose

setAdditionalParams - deprecated

Purpose

Parameters

Usage example

getAdditionalParams- deprecated

Purpose

Articles in this section

Related articles

Page contents: