Set up smart banners

A smart banner is a banner that you can add to a mobile website to promote your app, a sale, or a specific product. Behind the banner is a link that takes users directly into your app if they already have it installed, or takes them to the store to download it first.

Smart banners ensure a seamless user experience and help you target web users to drive traffic to your app. This ensures every converted app user starts their in-app experience where you want.

Before you begin

Here's what you need to know before getting started.

Requirements

• Admin and Editor permissions
• (Optional) Configure deep links in the Adjust SDK - iOS | Android

Create a space

Spaces are channel-level containers for your smart banners. All banners in a space link to the same app and appear on the same website. They also share attribution settings and use the same SDK. We recommend selecting all versions of your single-platform apps to a space. Spaces can contain a single banner or multiple banners with different designs, languages, and placements.

1. Under Campaign Lab, select Smart banners.
2. Select New space.
3. In the App selection screen, choose all versions of your app to send users to the appropriate platform. You can only select one app per platform, and cannot change the apps after you create a space. Select Next.
4. In the Space details screen, enter a Space name. Your space name appears as the channel-level of the link structure in your reports. You could append smart banners to the channel name in the campaign structure so that you can easily filter data for your smart banners in your reports.
5. If most of your users get to the website from sources with UTM parameters, under Campaign parameters, add UTM parameters from your web campaigns to the campaign structure. Select next to the campaign and adgroup parameters, and add any of the following placeholders:
   • {banner_language} - Recommended. Use this to get better reporting insights into which language's banner performs better.
   • {utm_source}
   • {utm_campaign}
   • {utm_medium}
   • {utm_term}
   • {utm_content}
   • {banner_name}

If UTM parameters are missing, static parameters are used for the following campaign parameters:

• Campaign - {banner_name}
• Adgroup - {banner_language}

1. (Optional) In the Attribution settings screen, choose custom attribution settings for new and existing users. These attribution settings are available for clicks only.

2. (Optional) Under Paid campaign users, choose how to attribute users who engage with an ad before clicking this banner. Then, select Next:

   • To the previous ad
   • To the smart banner

   Choosing to attribute your user to the previous ad adds the fallback_click parameter to your link. Adjust considers links with the fallback_click parameter for attribution only if no other links are available. This means that users who would otherwise be organic get attributed to fallback_click links. For more information on how this works, see how paid campaign users are attributed.

3. Review your choices. You can modify:

   • The space name
   • Your chosen apps
   • The attribution settings

4. Select Create space.

Integrate the Smart Banner SDK

Now, you need to integrate the Smart Banner SDK. This is required once per space and applies to all banners within it. Share these SDK integration instructions with your developers.

Set up dynamic deep linking

Set up dynamic deep linking in the Smart Banners SDK for single page websites. In this case, the current page URL changes after the user navigates away from it. With dynamic deep linking configured, the SDK can find suitable banners for the new web page. You can also configure the SDK to use deep links based on the page that your user is viewing. For example, if a user is viewing a specific product on your website, you can send them to the same product inside your app.

Distribute the SDK via third-party platforms

You can integrate the Adjust Smart Banner SDK into the following platforms to distribute smart banners via the platform's tags:

• Adobe Launch
• Google Tag Manager
• Shopify

Add a banner

You can add multiple smart banners to a space.

Provide banner details

1. In the Banner name field, enter a name for your banner. This name appears as the campaign level of the link structure in your reports.
2. Under Place your banner, choose whether you want the banner to appear on all pages or certain specific pages of your website. These choices apply to the domain you install the SDK on. If you choose Conditional pages, you can specify multiple conditions to filter the pages and additionally group the conditions using And or Or:
   • Domain is, Domain is not - A valid domain. Example: subdomain.example.com
   • Domain contains - A valid domain or a part of a valid domain.
   • URL path is, URL path is not, URL path starts with - Value must start with /. Example: /product/detail
   • URL path contains - Value cannot start with a domain.
   • URL contains parameter, URL does not contain parameter - A valid URL parameter. This means the value cannot start with ? or &. Example: utm_source=google
   • URL regular expression - A regular expression.
3. In the Dismissal period field, enter the time after which the banner would be again displayed to a user after they dismiss it. The default is 1 day, that is 24 hours from the time the user dismisses a banner.
4. Under Define your user destination, choose where you want to send users after they interact with your banner. By default, users are sent to the appropriate app store. If you want to send users to a specific in-app screen after they install the app, select In-app screen, and provide the following details:
   • (iOS apps) Enter the iOS app scheme and iOS app screen.
   • (Android apps) Enter the Android app scheme and Android app screen.
   For more information on getting these values, see Set up deep links.
5. Select Next.

Customize your banner

Consider the layout of your web page while customizing your banner:

• Small banner size + top position of the banner pushes the content of the web page down.
• For any other banner size and screen position combinations, the banner overlays onto the web page content.

Follow these steps to customize your banner:

1. In the Banner size list, choose the size of the banner:
   • Small
   • Medium
   • Full screen
2. Under Screen position, choose the position of the banner on the web page.
   • Top - If your banner is top-aligned, it pushes the page content down.
   • Bottom - If your smart banner is bottom-aligned, it overlays the page content. A user can scroll down to see the hidden content.
3. Select Preview device to see how the banner would look on your device. The banner preview automatically updates as you customize the banner.
4. In the Title field, enter a headline to show on your banner.
5. In the Description field, enter a description to show on your banner.
6. In the Button field, enter text that appears on the button.
7. Under App image, choose the image that you want to display in the banner:
   • App icon - Use the icon of the app from the app store.
   • Custom image - Provide an accessible URL of an image in JPG or PNG format for your banner. This image needs to be 168 x 168 px, and maximum 1 MB in size.
8. Now, customize the title, description, and button, as applicable:
   • Color - Provide a hexadecimal color code.
   • Font - Choose a font style from the list.
   • Font size - Choose a font size from the list.
9. In the Background color field, provide a hexadecimal color code for the background. Or, provide an accessible URL of an image in JPG or PNG format in the Background image field. This image needs to be 1080 x 240 px, and maximum 1 MB in size.
10. If the banner preview looks good to you, select Next.

Localize your banner

The banner displayed to your users depends on their browser language. If no localized version matches their browser language, users will see your original banner. If you want your users to view the banner in the language of the website domain, and not their browser, follow these steps in the Smart Banners SDK.

1. Select Add language, and choose a language from the list.
2. Provide details in the Title, Description, and Button fields.
3. You can add localized content for additional languages, and then select Next.

Review your banner

1. Review your choices. You can go back and make changes to:
   • Your banner details
   • Your banner content
   • Your localized content
2. Select Create smart banner to publish the banner under the space that you created.

Publish your banner

Once you save your banner, it is displayed under the space that you created it. To publish your banner, turn on the toggle under Publish. Your published banners go live only after your developer integrates the Smart Banner SDK.