adjust-icon

Smart Banner SDK integration guide

The Smart Banner SDK enables you to add Adjust Smart Banners to your website or web app. This guide shows you how to integrate the SDK in your project.

1. Install the SDK

To add the SDK to your existing Javascript project, install it using your package manager.

Once you’ve installed the dependency, import it into your project.

import AdjustSmartBanner from "@adjustcom/smart-banner-sdk";

Using a CDN

You can load the SDK via a CDN (Content Delivery Network) if you don’t want to install it as a runtime dependency. The SDK can be accessed through the global AdjustSmartBanner namespace when loaded.

When loading the SDK via a CDN, you should use a minified version for better performance.

  • A specific version. For example: https://cdn.adjust.com/adjust-smart-banner-0.0.7.min.js
  • The latest version. For example: https://cdn.adjust.com/adjust-smart-banner-latest.min.js

SDK files are cached on the CDN so they’re served as fast as possible. The cache is refreshed every 30 minutes. To receive updates immediately, target a specific version of the SDK.

To load the Smart Banner SDK via a CDN, paste the following snippet inside your page’s <head> tags:

<script type="application/javascript">
   !(function (e, n, t, a, o, s, r, i, c) {
      var d = o + "_q";
      (e[o] = e[o] || {}), (e[d] = e[d] || []);
      for (var u = 0; u < s.length; u++) r(e[o], e[d], s[u]);
      (i = n.createElement(t)),
         (c = n.getElementsByTagName(t)[0]),
         (i.async = !0),
         (i.src = "https://cdn.adjust.com/adjust-smart-banner-latest.min.js"),
         (i.onload = function () {
            e[o] = e[o].default;
            for (var n = 0; n < e[d].length; n++)
               e[o][e[d][n][0]]
                  ? e[o][e[d][n][0]].apply(e[o], e[d][n][1])
                  : console.error(
                       "No such function found in " + o + ": " + e[d][n][0],
                    );
            e[d] = [];
         }),
         c.parentNode.insertBefore(i, c);
   })(
      window,
      document,
      "script",
      0,
      "AdjustSmartBanner",
      [
         "init",
         "show",
         "hide",
         "setLanguage",
         "setIosDeepLinkPath",
         "setAndroidDeepLinkPath",
         "setContext",
         "setAndroidAppSchema",
         "setDeepLinkPath",
      ],
      function (e, n, t) {
         e[t] = function () {
            n.push([t, arguments]);
         };
      },
   );
</script>

2. Initialize the SDK

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

3. Localize your banners

You can localize your smart banners for better user experience. The Smart Banner SDK reads the language used in the browser and displays the localized copy of a banner if it exists. If you want to override this behavior, you can instruct the SDK to use a different language. There are two ways to set the preferred language:

  • Pass it as a language parameter to the AdjustSmartBanner.init method.
  • Call the setLanguage method with the two letter language code as a string parameter.
AdjustSmartBanner.setLanguage("fr");

That’s it! The SDK is now integrated in your project. Check the other guides in this section for information about the SDK’s functionality and how to configure different features.