Initialization options

Set the following parameters to control the behavior of the Smart Banner SDK.

Required parameters

Set your app token

To initialize the Smart Banner SDK, call the AdjustSmartBanner.init method.

AdjustSmartBanner.init({
   appToken: "APP_TOKEN",
});

When you call this method, the SDK detects the device platform. If the device is a mobile platform, the SDK loads available smart banners. Available banners are displayed immediately after initialization.

If your project targets single-platform apps, pass each platform token as a key in the appToken object.

AdjustSmartBanner.init({
   appToken: {
      ios: "IOS_APP_TOKEN",
      android: "ANDROID_APP_TOKEN",
   },
});

Optional parameters

Set your log level

Configure the verbosity of logging performed by the SDK.

Tip:
Use verbose logging while testing to get more information about potential issues.
Log levelDescription
`verbose`Print detailed messages about SDK actions
`info`Print basic info messages, warnings and errors
`warning`Print only warning and error messages
`error`Print only error message
`none`Don't print anything
AdjustSmartBanner.init({
   logLevel: "verbose",
});

Set your banner locale

Set the language parameter to control which locale is used when displaying the banner.

Tip:
Check out Localize your banners for more information.
AdjustSmartBanner.init({
   language: "fr",
});

Configure deep links

Configure deep links to specify where a user will land in your app when they interact with the smart banner.

Tip:
Check out the deep linking article for more information.

Use the following parameters to control deep linking with your smart banners:

  • context (Object): An object containing data to fill placeholders ({}) in the deep link path.
  • androidDeepLinkPath (String): The location in the app to which the user is redirected on Android devices.
  • iosDeepLinkPath (String): The location in the app to which the user is redirected on iOS devices.
  • context (Object): An object containing values that are interpolated in the androidDeepLinkPath and iosDeepLinkPath paths.

Examples

In this example, the banner redirects iOS users to a deep link path at products/product=cool_jeans_123 by interpolating the item_id from the context object.

AdjustSmartBanner.init({
  // other initialisation parameters including mandatory ones
  iosDeepLinkPath: "products/product={item_id}",
  context: {
    item_id: "cool_jeans_123"
  }
})

In this example, the banner redirects Android users to a deep link path at products/product=cool_jeans_123 by interpolating the item_id from the context object.

AdjustSmartBanner.init({
  // other initialisation parameters including mandatory ones
  androidDeepLinkPath: "products/{item_id}",
  context: {
    item_id: "cool_jeans_123"
  }
})

In this example, the banner redirects both iOS users and Android users to a deep link path at products/product=cool_jeans_123 by interpolating the item_id from the context object.

AdjustSmartBanner.init({
  // other initialisation parameters including mandatory ones
  androidDeepLinkPath: "products/{item_id}",
  iosDeepLinkPath: "products/product={item_id}",
  context: {
    item_id: "cool_jeans_123"
  }
})

You can use the context object to define different context variables for different platforms. In this example:

  • Android users are directed to promo/new_user.
  • iOS users are directed to main/registrationFinished.
  • The unused_variable is ignored.
AdjustSmartBanner.init({
  // other initialisation parameters including mandatory ones
  androidDeepLinkPath: "promo/{android_promo}",
  iosDeepLinkPath: "main/{ios_promo}",
  context: {
    android_promo: "new_user",
    ios_promo: "registrationFinished",
    unused_variable: "this will be ignored"
  }
})

Set the banner parent element

You can configure where a smart banner is located by specifying a parent element. By default, the banner is attached to document.body. You can override this by specifying an existing HTMLElement.

In this example, the smart banner is attached to an element with the ID root-for-banner.

const element = document.querySelector("#root-for-banner");

AdjustSmartBanner.init({
   bannerParent: element,
});

Run a function when the banner is created

Use the onCreated parameter to configure a function that runs as soon as the smart banner is created.

In this example, a log is output to the console when the banner is created.

AdjustSmartBanner.init({
   onCreated: () => console.log("Smart banner shown"),
});

Run a function when the banner is dismissed

Use the onDismissed parameter to configure a function that runs any time the smart banner is dismissed.

In this example, a log is output to the console when the banner is dismissed.

AdjustSmartBanner.init({
   onDismissed: () => console.log("Smart banner dismissed"),
});