開始方法

スマートバナーSDKを使用すると、AdjustスマートバナーをWebサイトまたはWebアプリに追加できます。このガイドでは、SDKをプロジェクトに実装する方法を説明します。

1. SDKのインストール

SDKを既存のJavascriptプロジェクトに追加するには、パッケージマネージャーを使用してSDKをインストールしてください。

NPM
yarn
pnpm
$ npm install --save @adjustcom/smart-banner-sdk

Dependencyをインストールしたら、プロジェクトにインポートします。

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

CDNを使用する

SDKをランタイムのdependencyとしてインストールしたくない場合は、CDNコンテンツデリバリネットワークを介してSDKを読み込むことができます。SDKが読み込まれると、グローバルなAdjustSmartBanner名前空間を介してアクセスできます。

CDN経由でSDKを読み込む場合、パフォーマンスを向上させるために縮小バージョンを使用する必要があります。

  • 特定のバージョン。例：https://cdn.adjust.com/adjust-smart-banner-0.0.7.min.js
  • 最新バージョン。例：https://cdn.adjust.com/adjust-smart-banner-latest.min.js

SDKファイルはCDNにキャッシュされるため、すぐに提供されます。キャッシュは30分ごとに更新されます。アップデートをすぐに受け取るには、特定のバージョンのSDKをターゲットに設定してください。

CDN経由でスマートバナーSDKを読み込むには、ページの<head>タグ内に次のスニペットを貼り付けてください。

<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. SDKの初期化

スマートバナーSDKを初期化するには、AdjustSmartBanner.initメソッドを呼び出します。

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

このメソッドを呼び出すと、SDKはデバイスのプラットフォームを検出します。デバイスがモバイルプラットフォームの場合、SDKは利用可能なスマートバナーを読み込みます。初期化後、利用可能なバナーがすぐに表示されます。

プロジェクトの対象がシングルプラットフォームアプリの場合は、各プラットフォームトークンをappTokenオブジェクトのキーとしてパスします。

AdjustSmartBanner.init({
   appToken: {
      ios: "IOS_APP_TOKEN",
      android: "ANDROID_APP_TOKEN",
   },
});
注意:
設定オプションの全リストについては、 初期化オプション をご覧ください。

3. バナーのローカライズ

スマートバナーをローカライズして、ユーザーエクスペリエンスを向上させることができます。スマートバナーSDKは、ブラウザーで使用されている言語を読み取り、ローカライズされたバナーがある場合はそれを表示します。この動作を上書きしたい場合は、別の言語を使用するようSDKに指示することができます。優先言語を設定するには、次の2つの方法があります。

  • これをlanguageパラメーターとしてAdjustSmartBanner.initメソッドにパスする
  • 2文字の言語コードを 文字列​ パラメーターとしてsetLanguageメソッドを呼び出す
AdjustSmartBanner.setLanguage("fr");

これでSDKがプロジェクトに実装されました。SDKの機能や各種機能の設定方法については、このセクションの他のガイドをご覧ください。