adjust-icon

スマートバナーSDK連携ガイド

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

1. SDKをインストールする

SDKを既存のJavascriptプロジェクトに追加するには、パッケージマネージャーを使用して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の機能や各種機能の設定方法については、このセクションの他のガイドをご覧ください。