@adjustcom/smart-banner-sdk
Advanced tools
This is the guide to the Adjust Smart Banner SDK for web sites or web apps. You can read more about Adjust™ at adjust.com.
The recommended way to install the SDK is npm:
npm install @adjustcom/smart-banner-sdk --save
And then import it into your code:
import AdjustSmartBanner from '@adjustcom/smart-banner-sdk'
The sdk is also available through CDN and then accessible through global AdjustSmartBanner.
To load Smart Banner SDK through CDN paste the following snippet into the <head> tag:
<script type="application/javascript">
!function(n,t,e,a,o,s,r,c,i){var u=o+"_q";n[o]=n[o]||{},n[u]=n[u]||[];for(var d=0;d<s.length;d++)r(n[o],n[u],s[d]);c=t.createElement(e),i=t.getElementsByTagName(e)[0],c.async=!0,c.src="https://cdn.adjust.com/adjust-smart-banner-latest.min.js",c.onload=function(){n[o]=n[o].default;for(var t=0;t<n[u].length;t++)n[o][n[u][t][0]]?n[o][n[u][t][0]].apply(n[o],n[u][t][1]):console.error("No such function found in "+o+": "+n[u][t][0]);n[u]=[]},i.parentNode.insertBefore(c,i)}(window,document,"script",0,"AdjustSmartBanner",["init","show","hide","setLanguage","setAndroidAppSchema","setDeepLinkPath","setContext"],(function(n,t,e){n[e]=function(){t.push([e,arguments])}}));
</script>
When loading the sdk through CDN we suggest using minified version. You can target specific version like https://cdn.adjust.com/adjust-smart-banner-0.0.6.min.js, or you can target latest version https://cdn.adjust.com/adjust-smart-banner-latest.min.js if you want automatic updates without need to change the target file. The sdk files are cached so they are served as fast as possible, and the cache is refreshed every half an hour. If you want updates immediately make sure to target specific version.
In order to initialize the Smart Banner SDK you should call the AdjustSmartBanner.init method:
AdjustSmartBanner.init({
appToken: "APP_TOKEN",
})
When you call this method Smart Banner SDK detects device platform, and if it's a mobile platform then the SDK loads available smart banners. If a banner for current page exists, it would be shown right after initialisation finished.
Here is the full list of available parameters for the init method:
string | objectDepending on what apps you have in your space you provide one or multiple app tokens.
For multiplatform app pass its app token to initialise the SDK:
AdjustSmartBanner.init({
appToken: "APP_TOKEN",
})
For single-platform apps pass app tokens for each platform:
AdjustSmartBanner.init({
appToken: {
ios: "IOS_APP_TOKEN",
android: "ANDROID_APP_TOKEN"
}
})
stringBy default this param is set to error. Possible values are none, error, warning, info, verbose. We highly recommend that you use verbose when testing in order to see precise logs and to make sure integration is done properly.
Here are more details about each log level:
verbose - will print detailed messages in case of certain actionsinfo - will print only basic info messages, warnings and errorswarning - will print only warning and error messageserror - will print only error messagenone - won't print anythingstringYou can instruct the sdk what localisation it should use to display the banner. For further information see Localisation.
Example:
AdjustSmartBanner.init({
// other initialisation parameters including mandatory ones
language: "fr"
})
stringstringobjectThese parameters allow you to specify where your user land in your app when they click on banner. For further information see Deeplinks.
Example:
AdjustSmartBanner.init({
// other initialisation parameters including mandatory ones
androidAppSchema: "myapp",
deepLinkPath: "products/promotion",
})
AdjustSmartBanner.init({
// other initialisation parameters including mandatory ones
androidAppSchema: "myapp",
deepLinkPath: "products/promo={promotion_id}",
context: {
promotion_id: "new_user"
}
})
HTMLElementBy default banner is attached to document.body. To change this behaviour you could specify the parent for the banner. It should be an existing HTMLElement.
const element = document.querySelector('#root-for-banner');
AdjustSmartBanner.init({
// other initialisation parameters including mandatory ones
bannerParent: element
})
functionA function to be called after banner displayed.
AdjustSmartBanner.init({
// other initialisation parameters including mandatory ones
onCreated: () => console.log('Smart banner shown')
})
functionA function to be called when dismiss button of the banner was clicked.
AdjustSmartBanner.init({
// other initialisation parameters including mandatory ones
onDismissed: () => console.log('Smart banner dismissed')
})
It's possible to hide smart banner after initialisation and show it again when needed.
Hides smart banner. Note: this function does not remove the banner from the DOM.
AdjustSmartBanner.hide();
Shows smart banner.
Important: If your web application is a single page application (SPA) you should call this method after navigation happens and current page URL changes. This forces the SDK to read the updated URL of the page and the SDK can find suitable banners for the current page or use updated GET parameters when it builds a tracker link with a dynamic deeplink.
AdjustSmartBanner.show();
For better user experience you could localise your smart banners. Smart Banner SDK reads language used in browser, and if there is such localisation of banner, the banner will be displayed in proper language. But default choice might be not the best one, most likely you know better what language your user prefers. In this case you can instruct the sdk what language it should use.
There are two ways to set preferred language
AdjustSmartBanner.initsetLanguage setter as shown below:AdjustSmartBanner.setLanguage("fr");
The setter accepts a two-letters language code, i.e. en, de, etc.
Deeplink is a link which allows to direct user to a certain events or pages in your mobile application, offering a seamless user experience. Smart banner sdk supports plain string deeplinks and deeplink templates which contain placeholders to be filled out by the sdk using provided deeplink context or GET parameters of the web page URL.
There are two ways to set a deeplink:
AdjustSmartBanner.initsetDeepLinkPath and setAndroidAppSchema setters as shown belowThere are ways to provide context to interpolate deeplink template:
AdjustSmartBanner.initsetContext setter as shown belowThere are several functions to set custom deeplink path and context.
Accepts a string representing Android scheme name of your mobile app. Android scheme name is required to build a deeplink for Android.
Note that the sdk preserves the scheme name, so it is not needed to call this method every time you update a deeplink path.
Example:
AdjustSmartBanner.setAndroidAppSchema("adjustExample")
Accepts a deep link path which is an event or a screen in your mobile app.
Important: On Android app scheme name is required, you can provide it with androidAppSchema parameter within initialisation or with setAndroidAppSchema function.
Example:
AdjustSmartBanner.setDeepLinkPath("products/jeans/?product=cool-jeans&promo=spring_10")
A deeplink template could contain any number of parameters enclosed in curly brackets.
Example:
AdjustSmartBanner.setDeepLinkPath("products/{category}/?product={product_id}&promo={promo}")
The sdk will replace these parameters with values from context provided within initialisation or with setContext function, or from URL parameters.
An object with data to fill placeholders in deeplink template.
Example:
AdjustSmartBanner.setContext({
category: "jeans",
product_id: "cool-jeans",
promo: "spring_10"
})
The sdk searches a placeholder among the keys of passed context and replaces the placeholder with according value.
Example:
AdjustSmartBanner.setDeepLinkPath("products/{category}/?product={product_id}&promo={promo}");
AdjustSmartBanner.setContext({
category: "jeans",
product_id: "cool-jeans",
promo: "spring_10"
});
// Resulting deeplink path is "products/jeans/?product=cool-jeans&promo=spring_10"
Important: if there is no such key in context found the sdk will try to get value from GET parameters of current URL address. Then if it's unable to find a value to be filled in, placeholder is replaced with an empty string.
Example:
AdjustSmartBanner.setDeepLinkPath("products/{category}/?product={product_id}&promo={promo}");
AdjustSmartBanner.setContext({ category: "jeans" });
// Resulting deeplink path is "products/jeans/?product=&promo="
Important: Note that setContext overrides the last preserved context, instead of sequential calls you should combine all needed parameters in a single object and then call setContext with it.
Example:
// Wrong
AdjustSmartBanner.setDeepLinkPath("products/{category}/?product={product_id}");
AdjustSmartBanner.setContext({ category: "jeans" });
AdjustSmartBanner.setContext({ product_id: "blue-jeans" }); // Previous context is lost
// Resulting deeplink path is "products//?product=blue-jeans&promo="
// Correct
AdjustSmartBanner.setDeepLinkPath("products/{category}/?product={product_id}");
AdjustSmartBanner.setContext({
category: "shoes",
product_id: "red-sneakers"
});
// Resulting deeplink path is "products/shoes/?product=red-sneakers"
If some of the parameters present in the deeplink template are missing in the context, the sdk tries to find them among the GET parameters of the current URL.
Example:
AdjustSmartBanner.setDeepLinkPath("products/{category}/?product={product_id}&promo={promo}");
AdjustSmartBanner.setContext({ category: "jeans" });
// Let's say the current URL is "my-shop.com/spring-promo?product_id=cool-jeans&promo=spring_10"
// Then resulting deeplink path is "products/jeans/?product=cool-jeans&promo=spring_10"
Important: if your web app is a single page applications (SPA) you should call AdjustSmartBanner.show() when page address changes since the sdk on its own is unable to track navigation events and retrieve an updated URL.
Important: the context passed to the sdk is a prior choice to fill in placeholders, and GET parameters with the same keys are ignored in favor of the context.
Example:
AdjustSmartBanner.setDeepLinkPath("products/jeans/?product={product_id}&promo={promo}");
AdjustSmartBanner.setContext({ product_id: "floral-jeans" });
// Let's say the current URL is "my-shop.com/spring-promo?product_id=cool-jeans&promo=spring_10",
// so we have product_id parameter in the URL and in the context
// Then resulting deeplink path is "products/jeans/?product=floral-jeans&promo=spring_10"
The Adjust SDK is licensed under the MIT License.
Copyright (c) 2023 Adjust GmbH, https://www.adjust.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
FAQs
Adjust Smart Banner SDK
The npm package @adjustcom/smart-banner-sdk receives a total of 2,687 weekly downloads. As such, @adjustcom/smart-banner-sdk popularity was classified as popular.
We found that @adjustcom/smart-banner-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.