adjust-icon

Web SDK 連携ガイド

Adjust Web SDKを実装することで、アトリビューションやイベントなどのさまざまなデータをWebアプリで記録できます。このガイドでは、Adjust SDKをアプリに実装する方法をご紹介します。

1. プロジェクトにSDKを追加する

まずは、WebアプリにSDKを追加します。Adjust SDKは、CommonJSとAMD（Asynchronous Module Definition）の両方の環境で動作します。CDN（Content Delivery Network）を利用して読み込むと、グローバルのAdjust名前空間を介してアクセスできます。

CDNを使用する

CDNを利用してSDKを読み込むときは、本番用ビルドには縮小バージョンを使用する必要があります。

  • バージョンを指定するには、https://cdn.adjust.com/adjust-5.8.0.min.jsのようにCDNターゲットに追加します。
  • 最新バージョンを読み込むには、次のようにadjust-latestパッケージを使用してください：https://cdn.adjust.com/adjust-latest.min.js 。このパッケージは自動的にアップデートされるため、ターゲットファイルを変更する必要はありません。

CDNを利用してSDKを読み込むには、Webアプリの<head>タグ間に次のスニペットを追加します。

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

Adjust SDKはページごとに読み込まれ、ページの読み込みごとに1回起動されます。

サブリソース完全性

XSS（クロスサイトスクリプティング）攻撃を緩和するために、サブリソース完全性チェックを使用します。実行前にパッケージを検証するには、次のスニペットを使用します（追加のcrossOrigin、 integrity、およびエンコードされたハッシュに留意してください）。

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

npmを使用する

Adjust SDKはnpmでも提供されています。パッケージをプロジェクトに追加するには、好みのパッケージマネージャーを使用します。

2. SDKを初期化する

SDKをインストールしたら初期化する必要があります。これを行うには、initSdkメソッドを呼び出してください。このメソッドには、アプリでのSDKの動作をカスタマイズするために使用できる引数があります。

SDKを初期化するには、 initSdkの呼び出しに次の引数を追加する必要があります。

  • appToken （string）：お客様のAdjustアプリトークン。
  • environment （string）：SDKを実行したい環境。
    • SDKをテストモードで実行するには、 sandboxをパスします。
    • リリースの本番用モードでSDKを実行するには、 productionをパスします。
Adjust.initSdk({
   appToken: "YOUR_APP_TOKEN",
   environment: "sandbox",
});