Smart Banners—mobile web-to-app (for marketers)

Prepare your mobile site to display Smart Banners for the first time

1. In AppsFlyer, from the side menu, select Engage > Web-to-app > Smart Banners > Go to Smart Banners.
2. Click Get started. The setup wizard will guide you through the required steps (following). To set up further Website workplaces see below.
3. Enter a website workplace name.
4. Click Create. The website workplace opens. 
5. Copy the banner Code snippet. 
6. Implement the code snippet on your website. This task is done only once per website.
   • To add the code to your website via Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace, or WordPress, see Smart Banners website code implementation for marketers.
   • To add the code via other platforms, or to make changes to the code based on need (including adding parameters, deep linking, hiding the banner, or integrating PBA with Smart Banners), see Smart Banners website code implementation for developers.
7. [optional] Copy Web key. (This key already exists as part of the code snippet.)
8. Click Continue.

To create Website Workplaces after the first time

1. In AppsFlyer, from the side menu, select Engage > Web-to-app > Smart Banners > Studio.
2. Click on the options menu 
3. select New website workplace
4. Enter a website workplace name.
5. Click Create. The website workplace opens. 
6. Copy the banner Code snippet. 
7. Implement the code snippet on your website. This task is done only once per website.
   • To add the code to your website via Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace, or WordPress, see Smart Banners website code implementation for marketers.
   • To add the code via other platforms, or to make changes to the code based on need (including adding parameters, deep linking, hiding the banner, or integrating PBA with Smart Banners), see Smart Banners website code implementation for developers.
8. [optional] Copy Web key. (This key already exists as part of the code snippet.)
9. Click Continue.

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 or duplicate a banner group:

1. In AppsFlyer, from the side menu, select Engage > Web-to-app > Smart Banners.
2. To set up a banner group for the first time
   1. On the left-hand side, click Add banner group.
   2. Follow steps 5 and onwards.
3. To set up additional banner groups
   1. Go to the Studio tab.
   2. Click on + New.
   3. Follow steps 5 and onwards.
4. To duplicate a banner group
   1. Click on the Duplicate icon found next to the delete icon.
5. 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).
6. Select the OneLink template for the banner group.
7. [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.
8. Set the primary and fallback Attributed sources to be attributed with new installs coming from this banner group. 
   
   Note on click ID forwarding: FBCLID, GCLID, WBRAID, and GBRAID are automatically forwarded to the outgoing URL if available on the incoming URL. For the Google click IDs, if the “keyword” parameter is also found, it puts the keyword value in the outgoing URL as the value of af_keywords.
   

   Use the following table to pick the best option for the custom link:

   Option	When to select	Comments
   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, 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")
   Use default attribution parameters	◦ Select when:   ▪ Most mobile website visitors are organic.   ▪ Non-organic visitors don't get to the website from click ad networks or from sources with UTM parameters. ◦ You can customize the parameter values.	Important: Best practice is to select UTM or incoming attribution link parameters, since the default Smart Banner attribution parameters are anyway used on the custom link as a fallback if the media source, campaign, or channel names are not available.

9. [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.
   
   
10. [Optional] Turn on Retargeting if you plan to use the banner group to record re-engagements performed by users clicking on the banner. To learn more on Retargeting see the Retargeting attribution guide.

    Important

    For retargeting to work, you also need to:

    • Enable retargeting for the app 

    Existing users who click on OneLink-powered non-retargeting banner links (UA) also launch the app and have the same user experience. However, their re-engagements are recorded as regular sessions, which means it's impossible to measure the success of the owned media campaign.

11. [Optional] Turn on Ignore active users for retargeting and select the inactivity window. This adds the parameter af_inactivity_window=[number of days] to your smart banner group links, and all users active during the period are ignored for retargeting.
12. Set the re-engagement window to determine the time period following the re-engagement, where the user's in-app events are attributed to the retargeting media source.
    • You can set the value in days (1-90), hours (up to 23), or even lifetime.
    • The re-engagement window is added to the link in the af_reengagement_window parameter.
13. [Optional] Set the Dismissal behavior, that is, the minimum time allowed between a user dismissal of one banner in the group, until the same 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.
      • The dismissal behavior is applied to the banner the user dismisses; other banners in the banner group can still be displayed.
14. [Optional] Set Frequency capping.  Frequency capping determines the number of times each banner in a banner group is shown to a unique user. You can choose either No limit (where banners always display) or Limit banner displays.

    For instance, if a banner group consists of three banners and the frequency capping is set to one, each banner in the group will appear once per user. In this scenario, after three visits, the user will have seen all three banners within the group. However, starting from the fourth visit onwards, the user will no longer encounter any banners from the group. When the frequency capping is set to two, each banner in the group will be displayed twice per user, requiring a total of six visits to reach the group's capping limit.

15. [Optional] Set which Operating system to show the banners on:
    • All mobile operating systems.
    • Just Android or just iOS.
16. [Optional] Schedule the banner group's activation: start immediately (default) or set a time-limited campaign.
17. [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.
18. [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 what the page or URL should or should not contain in order to display banners.
      • You can choose either:
        • Specific page: Specify the host and/or path of the page on which to display the banner. Any queries entered will be disregarded. Example: http://www.example.com/path?query
        • URL path and query: Enter the path and/or query that determines whether or not the banner displays. Example: path?query. Note: Don’t enter an entire URL, such as http://www.example.com/path?query. Only enter the path and/or query.
      • Up to 15 conditions can be added using and/or.
      • If there is a conflict between conditions, the banner will not display.
19. Click Create Banner group.
20. [Optional] To edit the banner group again, hover over Targeting & behavior and click Edit.

Targeting & behavior

The Targeting & behavior panel shows you the settings you configured for that banner group. To edit these settings click on the edit icon.

To create a banner in a banner group:

1. Click New banner to enter the Edit banners page.
2. Set the Name of the banner.
3. Create a Design creative:
   1. Click Design creative to set the creative of the banner.

      A window to choose a banner template opens.

      
   2. Hover over a Creative template, and click Create to enter the Build creative setup page.
   3. Customize all the elements in the Smart Banner creative. To do so, select elements by name or click on them on the preview image. Note: Not all elements are available on every template.
      • Title
      • Description
      • Rating stars
      • Close button
      • Call to action
      • App logo
      • Background
      • Banner position
      • Banner padding (to adjust banner size)
      • Device transparency
      • For images, use one of the following file types: jpeg, jpg, png. Note: webp format is not supported.  The recommendations for the images are:

        Template type	Maximum image file size	Image ratio	Image height	Image width
        Minimal	300 KB	3:1 (width x height)	70 px	Adjusted to fit device
        Standard	300 KB	3:1 (width x height)	70 px	Adjusted to fit device
        Enhanced	300 KB	9:4 (width x height)	110 px	Adjusted to fit device
        Multi-choice	300 KB	9:4 (width x height)	110 px	Adjusted to fit device
        Promotional	300 KB	4:5 (width x height)	300 px	Adjusted to fit device
        Multi-choice overlay	300 KB	9:4 (width x height)	110 px	Adjusted to fit device
        Interstitial	700 KB	9:16 (width x height)	Adjusted to fit device	Adjusted to fit device

   4. Click Review to review the banner creative and test its appearance on different devices. Note: Banners may appear slightly different in active campaigns compared to preview images.
   5. If changes are needed, click Back to editor.
   6. Click Done to go back to the banner setup page.
4. [Optional] Add custom attribution parameters. For example, ad_adset and af_ad. Note: The parameters pid, c, and channel cannot be added at the banner level, as they belong to the banner group level.
5. After finishing and saving the new creative, the banner's status becomes active. Use the Status toggle to switch between Active and Paused statuses.
6. Click Save all to save your work or Save all and close to save your work and close the banner setup page.

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 creative:

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

1. In the Test Creative page, enter the link to your web page where the Smart Banner SDK is integrated (see Smart Banners for developers).
2. Click Generate.
3. 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.
4. Click Edit Creative to return to the creative configuration, or click Done to save the creative.

The performance page lets you view and compare the performance data of all your Smart Banners, up to the past 90 days.

To view the performance page:

1. In AppsFlyer, from the side menu, select Engage > Web-to-app > Smart Banners > Performance.
2. Select the date range for which you want to view performance. The default date range is the last 7 days.
3. [Optional] Turn on Show only currently active banners. If turned on, data for banners that are paused or aren't currently active don't display, even if they were active during the selected date range. The performance data displays for the selected date range.

You can view performance data for the past 7 days for any given banner.

To view banner performance:

1. In AppsFlyer, from the side menu, selecto Engage > Web-to-app > Smart Banners > Studio.
2. Select the website workplace and banner group you want to view performance for.
3. Hover over any of the banners in the banner group. The performance data displays for the past week

AppsFlyer takes the following into consideration when determining if/what Smart Banner to display:

• Are there rules (dismissal behavior, frequency capping, locations, show on pages, etc.) set for the banner groups?
• Does the end-user meet the rule conditions and qualify to see a banner?

If the answer to both questions is yes, meaning there are rules, and the user qualifies to see a banner, AppsFlyer chooses a banner to display as explained in the table that follows.

You can A/B test banners by comparing their performance in the performance dashboard. For additional attribution-related data, it's recommended to add the af_adset , af_ad or other attribution parameters (except pid, c, and channel) with a unique value for each banner creative or banner group. Use those parameters to compare each banner group's performance when viewing data in AppsFlyer dashboards and reports.

This is due to the frequency cap set in your banner group. 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.

Yes. you can set your own font used on your website for your banner using the instructions on the developer hub.

• Requires a website developer to implement.
• The font will apply to all banners on the website and to all text elements inside the banner.
• The font can not be viewed in the creative editor.
• After implementing, test your creative banner.
• If the font doesn't display correctly, resave your banner in the creative editor.

Yes, by invoking the following two functions in your smart script:

• showBanner
• updateParams

Yes. To do so, add the deep_link_value parameter in one of the following ways:

• In the AppsFlyer UI, add a static custom attribution parameter during banner setup.
• Use additionalParams in the showBanner function to add the parameter to the URL prior to displaying the banner.
• Use the updateParams function to add the parameter to the URL after the banner displays.

Make sure your developer implements the desired behavior of the deep_link_value.

No. If you don't know whether or not users have the app, we recommend you make your call to action applicable to both. For example: "Go to the app" or "open the app."

Yes. If the original incoming URL contains a utm_source or pid parameter, the original URL is saved for the duration of the browsing session and the parameters are applied to the outgoing banner URL.

Yes. To do so, when you implement Smart Banners in a wrapper/hybrid app and load the banner page from the app (and not from a web browser), don't use the showBanner function, as this displays the banner in the app. Alternatively, use the hideBanner function.

We are committed to ensuring that all of your users, including those with disabilities, can fully access and engage with Smart Banners.

As such, we try to make our Smart Banners web accessibility compatible and follow the WCAG 2.1 standard best practices by providing the relevant HTML attributes in the Smart Banner elements.

However, determining the relevant accessibility requirements for your own intended uses of such Smart Banners is your sole responsibility. You are solely responsible for ensuring that Smart Banners you use remain accessible to all users in accordance with relevant web-accessibility requirements.

Please note that various changes to the Smart Banner might impact its compatibility with the relevant accessibility requirements, including for example, by editing the colors and size of internal banner elements.