Smart Banners - mobile web to app

1. Setting up Smart Banners

In AppsFlyer, go to Engagement & Deep Linking > Smart Banners.

2. First time creating a banner

2.1 Prerequisites

Smart Banners redirect your mobile web visitors to the correct app store pages, according to the devices they use. To do this, you need to configure a OneLink template for the advertised apps.

If your account doesn't have a defined OneLink template yet, when entering the Smart Banners page, a message displays enabling you to create a OneLink configuration.
Complete the OneLink configuration before proceeding.

2.2. Creating your first Smart Banner

1. Click Create Smart Banner.
2. Fill in the banner name in the popup.
3. Copy the banner code snippet. Send it to your developer to implement it on your website.
4. Click continue to add creatives.

3. Adding and editing banners

The Smart Banners page contains all the banners already defined in your AppsFlyer account.

In this page you can:

• Add more banners - click Create Smart Banner.
• Edit banners - Click on the banner name that you want to edit.
• Add more creatives - Click on Add creative for the relevant banner.
• Copy the banner key - a unique key identifying the banner in AppsFlyer.
• Get the SDK code snippet for each banner - click on the code icon </> at the top right-hand corner of the relevant banner. The unique Banner key is included in the code snippet.
• Delete banner - Important: deleting a banner deletes all of its creatives.

Note: if you already have a Smart Banner configured for your webpage, it's recommended to select that Smart Banner and add or edit creatives. Although only one creative can be active, you can still choose which creative to display using the showBanner API.

4. Edit banner page / List of creatives

The Edit banner page shows:

• Banner details - here you can change the Smart Banner's name, or grab the Banner key or code snippet.
• List of creatives - this is the list of creatives configured for this banner. Hover over the Actions to edit a creative, activate/deactivate it, get its Creative ID or delete it.

Remember that only one creative can be active at a time per Smart Banner. You can choose to display an inactive creating using the showBanner API.

Important: Editing an active creative affects your live environment.

5. Create a new creative

5.1 Selecting a template style

1. Click Add creative.
2. Select a template style: Standard, Enhanced, Promotional, or Interstitial.

5.2 Set creative appearance

Complete the fields as follows:

1. Creative name
2. (optional) Template Style.
3. Banner Position: the location of the banner on the mobile device
   
   • (Optional) when choosing Top, enable Stick to top to set the banner to stay at the top when scrolling.
   • When choosing Bottom, the banner automatically sticks to the bottom of the page.
   Read here how to place the banner in other page positions.
4. Font size for the title (currently in Promotional template only)
5. Title: of the creative
6. (optional) Description: of the creative.
7. Call to action text: For the banner button:
   • Enter the text.
   • Select the color of the text, background, border, and dismissal icon (x).
8. App icon: Paste the URL of your App icon. Caution: Large images impact banner load time. Valid image formats are .png, .jpeg or .jpg.
   
   Note: The creative requires a valid image URL that includes the file extension:
   • https://example.com/my_image.png is a valid URL.
   • https://example.com/my_image is not a valid URL.
   The recommended ratio and dimensions for the app icon are:
   • Ratio - 1:1
   • Dimensions - 320px x 320px
9. Background: Do one of the following:
   • Paste the URL for the banner background. Note: Use either .jpeg, .jpg or .png but not webp. The webp format is not supported in Safari.
     
     Note: The creative requires a valid image URL that includes the file extension:
     • https://example.com/my_image.png is a valid URL.
     • https://example.com/my_image is not a valid URL.
     The recommended ratio and dimensions for the background image are:
     • Ratio - either 4:5 or 9:16
     • Dimensions - 1080 px x 1350 px for 4:5 or 1080 px x 1920 px for 9:16
     OR
   • Set the background color. 
10. (optional) Rating & reviews. This option is available with Standard and Enhanced templates.
    • Set the static value for Ratings of your app. Use the + or - buttons to set the number of stars.
    • Set the color of the rating stars.
    • Enter the static number of User reviews counts displayed with the creative. You can add words like "reviews" after the number.
11. Click Next.

5.3 Set creative behavior

1. Select the OneLink template.
2. Mobile Deep Link URL: Use in a deep linking campaign, to set a different URI scheme than that defined in the OneLink template.
3. Dismissal behavior to determine when the banner can be displayed again after a user closes the banner. The dismissal behavior determines the amount of time that must pass until the banner is displayed again to the same user. Select from one of the following:
   • By time: 1 hour, 1 day, or 1 week 
   • Next session: meaning the session that takes place 30 minutes 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. 
4. 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. Frequency capping can be disabled. Select a frequency capping value or disable frequency capping. 
5. Click Next.

5.4 Set creative attribution

When a visitor clicks on a banner, the click is sent to AppsFlyer. Use creative attribution to configure the value of the media source and other campaign attribution parameters sent on the click using UTM parameters. Doing so enables you to identify the source of the click.

The custom attribution link behind the banner is a long link. When a user is deep-linked into the app from a Smart Banner, onAppOpenAttribution returns a map with a single key-value pair that contains the entire link. This requires you to apply logic to parse the link to get the data for deep linking into specific activities and customize content. To learn more, see this section. 

 You can select between the following creative attribution methods:

• Static names [default]: the same media source and campaign name are used for all clicks. The default static value is af_banner. 
• Dynamic names from web UTM parameters from the referring URL are used to set the media source (pid) and campaign (c) values dynamically. If the UTM values are unavailable the static values are used as a fallback. 

The table that follows summarizes the available options:

To configure creative attribution:

1. Select the Attributed media source option, Static names or Dynamic names from web UTM parameters.
2. Set the Media source name. This is used as a static value or as a fallback when UTM_source is not available for some reason.
3. Set the Campaign name. This is used as a static value or as a fallback when UTM_campaign is not available for some reason.
4. Set the Channel name. You can use this to aggregate Smart Banner performance information (see tip below).
5. [Optional] Add additional attribution parameters. Set the value of attribution parameters such as adset, ad name, and sub parameter 1. The value set is fixed for all links.  
6. If the Smart Banner is part of a retargeting campaign, add the custom parameter is_retargeting and true as values. This adds the is_retargeting=true parameter to the OneLink URL.

   

7. Click Create.

5.5 Activating creatives

Once you are done configuring the creative, you are asked if you want to activate the creative. Activating the creative means that it becomes the default creative that is displayed on your mobile site. 

There can be only one active creative at a time. If you have several creatives and you to change the active creative, you can do so from the creative editing page.

You can still display inactive creative using Smart Banners. All you have to do is pass the creative ID of the inactive creative to the showBanner API. Click here to learn more.

5.6 Test page

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

Before you run the test, make sure that the Smart Banner code snippet is integrated in your website. The creative that you test doesn't have to be activated in order for you to test it. Creating it is enough to be able to test it.

1. Enter the link to your web page where the Smart Banner SDK is integrated (see next tab).
2. Click Generate.
3. Use the generated link or QR code to test your banner. The link or QR should redirect you to the web page and display a banner with the creative.
4. Click Edit Creative to return to the creative configuration or click Done to save the creative.

AppsFlyer provides a Smart Banner SDK, which advertisers integrate into their websites. The purpose of the SDK is to pull all required data for displaying the Smart Banners dynamically. 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 Banner key, which you can get from the Banner's SDK code snippet or from the Smart Banners list.

Only one banner can appear per page. It's not possible to have multiple banners show up on the same page.

Code snippet

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

<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_BANNER_KEY"}});

AF('banners', 'showBanner');

</script>

<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_BANNER_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.

SDK functions

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

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

AF('banners', 'hideBanner')

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