adjust-icon

Web SDK integration guide

The Adjust Web SDK enables you to record attribution, events, and other data in your web app. This guide shows you how to integrate the SDK with your app.

1. Add the SDK to your project

To get started, add the SDK to your web app. The Adjust SDK works in both CommonJS and AMD (Asynchronous Module Definition) environments. You can access it through the global Adjust namespace when loaded through a CDN (Content Delivery Network).

Using a CDN

When loading the SDK through a CDN, you should use a minified version in your production build.

  • To load a specific version, add it to the CDN target, like this: https://cdn.adjust.com/adjust-5.7.0.min.js.
  • To load the latest version, use the adjust-latest package, like this: https://cdn.adjust.com/adjust-latest.min.js. This package updates automatically so you don’t need to change the target file.

To load the SDK through a CDN, add the following snippet inside your web app’s <head> element:

<script type="application/javascript">
!function(t,r,e,a,n,o,i,l,c,s,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];for(let r=0;r<l.length;r++)d(t[i],t[f],l[r]);for(let r=0;r<c.length;r++){var g,b=c[r][0],p=c[r][1];t[i][b]=function(...r){return g=this,t[m].push((function(){g[s]=new t[i][b](...r)})),g};for(let r=0;r<p.length;r++){const e=p[r];t[i][b].prototype[e]=function(...r){t[m].push((function(){g[s][e](...r)}))}}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-latest.min.js",h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0][s]?t[i][t[f][r][0]](t[f][r][1][0][s]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,0,"Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj",(function(t,r,e){t[e]=function(){r.push([e,arguments])}}));
</script>

The Adjust SDK loads on each page and initiates once per page load.

Subresource Integrity

You want to use Subresource Integrity checks to mitigate XSS (Cross-Site Scripting) attacks. To validate the package before running it, use the following call (note the additional crossOrigin, integrity, and encoded hash):

<script type="application/javascript">
!function(t,r,e,a,n,o,i,l,s,c,d,h,u){var f=i+"_q",g=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[g]=t[g]||[];for(let r=0;r<l.length;r++)d(t[i],t[f],l[r]);for(let r=0;r<s.length;r++){var m,b=s[r][0],p=s[r][1];t[i][b]=function(...r){return m=this,t[g].push((function(){m[c]=new t[i][b](...r)})),m};for(let r=0;r<p.length;r++){const e=p[r];t[i][b].prototype[e]=function(...r){t[g].push((function(){m[c][e](...r)}))}}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-latest.min.js",o&&(h.crossOrigin="anonymous",h.integrity=o),h.onload=function(){for(var r=0;r<t[g].length;r++)t[g][r]();t[g]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0][c]?t[i][t[f][r][0]](t[f][r][1][0][c]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,"sha384-WE6fJqvcE0mjcC/fPYooIQAOhsHpTDVYjC52i6Asn3LECEpjHyI5zUwD8/5esthg","Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj",(function(t,r,e){t[e]=function(){r.push([e,arguments])}}));
</script>

Using npm

The Adjust SDK is also available on npm. To add the package to your project, use your preferred package manager:

2. Initialize the SDK

Once you’ve installed the SDK, you need to initialize it. To do this, call the initSdk method. This method has arguments that you can use to customize how the SDK works in your app.

To initialize the SDK, you must add the following arguments to your initSdk call:

  • appToken (string): Your Adjust app token.
  • environment (string): The environment you want to run the SDK in:
    • Pass sandbox to run the SDK in testing mode.
    • Pass production to run the SDK in production mode for release.
Adjust.initSdk({
   appToken: "YOUR_APP_TOKEN",
   environment: "sandbox",
});