スマートバナーの設定

スマートバナーは、モバイルWebページに追加して、アプリ、セール、特定の製品のプロモーションなどに使用するためのバナーです。バナーにはリンクが貼られており、ユーザーがクリックすると、すでにアプリをインストール済みの場合はアプリに直接誘導し、そうでない場合は、ストアに誘導してダウンロードを促します。

スマートバナーはシームレスなユーザー体験を提供し、Webユーザーをターゲティングして、アプリへのトラフィックを促進するのに役立ちます。これにより、コンバージョンに至った全てのアプリユーザーが、指定された場所からアプリの使用を始めるようになります。

注意:

スマートバナーは、追加機能として提供しています。ご自身のアカウントでご利用を開始するには、sales@adjust.comまでお問い合わせください。

事前準備

はじめに、以下の設定手順をご覧ください。

要件​

スペースを作成する

「スペース（space）」はスマートバナーのためのチャネルレベルのコンテナです。スペース内の全てのバナーが同じアプリにリンクし、同じWebサイトに表示されます。また、同じアトリビューション設定を共有し、同じSDKが使用されます。スペースにはシングルプラットフォームアプリの全てのバージョンを選択することをお勧めします。スペースには、単一のバナー、または、異なるデザインや言語、配置が設定された複数のバナーを含めることができます。

  1. Campaign Lab​ で、 スマートバナー（Smart banners）​ を選択します。
  2. 新規スペース（New space）​ を選択します。
  3. アプリの選択（App selection）​ 画面で、ユーザーを適切なプラットフォームに誘導するアプリの全てのバージョンを選択します。プラットフォームごとに1つのアプリのみ選択でき、スペースの作成後にアプリを変更することはできません。 次（Next）​ を選択します。
  4. スペースの詳細（Space details）​ 画面で、 スペース名（Space name）​ を入力します。スペース名は、レポートのリンク構造のチャネルレベルとして表示されます。キャンペーン構造のチャネル名にsmart bannersを追加すると、レポートでスマートバナーのデータを簡単にフィルタリングできます。
  5. ユーザーの多くがUTMパラメーターを使用してソースからWebサイトにアクセスする場合、 キャンペーンパラメーター（Campaign parameters）​ よりWebキャンペーンのUTMパラメーターをキャンペーン構造に追加します。campaignとadgroupパラメーターの横にある を選択し、以下のプレースホルダーのいずれかを追加します。
    • {banner_language} - 推奨。どの言語のバナーがより優れたパフォーマンスを発揮するかについて、詳細なレポートインサイトを得ることができます。
    • {utm_source}
    • {utm_campaign}
    • {utm_medium}
    • {utm_term}
    • {utm_content}
    • {banner_name}

UTMパラメーターがない場合、以下のキャンペーンパラメーターには静的パラメーターが使用されます。

  • キャンペーン​ - {banner_name}
  • アドグループ​ - {banner_language}

  1. ペイドキャンペーンのユーザー（Paid campaign users）​ で、このバナーをクリックする前に広告にエンゲージしたユーザーをアトリビュートする方法を選択します。その後、 次（Next）​ を選択します。

    • 前の広告
    • スマートバナー

    ユーザーを 前の広告​ にアトリビュートすることを選択すると、 fallback_clickパラメーターがリンクに追加されます。Adjustは、他に利用可能なリンクがない場合にのみ、 fallback_click パラメーターを含むリンクをアトリビューションとして計上します。つまり、本来ならオーガニックとなるユーザーが fallback_clickリンクにアトリビュートされることになります。この仕組みの詳細については、ペイドキャンペーンのユーザーをアトリビュートする方法をご覧ください。

  2. 選択内容を確認します。以下の変更が行えます：

    • スペース名
    • 選択したアプリ
    • アトリビューション設定

  3. スペースを作成する（Create Space）​ を選択します。

スマートバナーSDKを実装する

次に、スマートバナーSDKを実装します。これはスペースごとに必須であり、スペース中で設定された全てのバナーに適用されます。これらのSDK実装手順を開発者と共有してください。

ダイナミックディープリンクを設定する

シングルページのWebサイト向けに、スマートバナーSDKでダイナミックディープリンクを設定します。この場合、ユーザーが別のページに移動すると、現在のページURLが変更されます。ダイナミックディープリンクが設定されると、SDKは新しいWebページに適したバナーを見つけることができます。 また、ユーザーが閲覧しているページに基づいてディープリンクを使用するようにSDKを設定することも可能です。例えば、ユーザーがWebサイトで特定の製品を閲覧している場合、アプリ内の同じ製品に誘導することができます。

サードパーティプラットフォーム経由でSDKを配布する

AdjustのスマートバナーSDKを以下のプラットフォームに実装し、プラットフォームのタグを使用してスマートバナーを配信できます。

バナーを追加する

1つのスペースに複数のスマートバナーを追加できます。

バナーの詳細を入力する

  1. バナー名（Banner name）​ フィールドに、バナーの名前を入力します。この名前は、レポートのリンク構造のキャンペーンレベルとして表示されます。

  2. バナーを配置（Place your banner）​ で、バナーをWebサイトの全てのページに表示するか、特定のページに表示するかを選択します。選択内容はSDKをインストールするドメインに適用されます。 条件付きページ（Conditional pages）​ を選択した場合、複数の条件を指定してページをフィルタリングし、さらに および（And）​ や あるいは（Or）​ を使用して条件をグループ化できます。

    • 指定ドメイン（Domain is）​ 、 Domain is not​ - 有効なドメイン。例：subdomain.example.com
    • Domain contains​ - 有効なドメイン、または有効なドメインの一部。
    • 指定URLパス（URL path is）​ 、 URL path is not​ 、 URL path starts with​ - 値は/で始まる必要があります。例：/product/detail
    • URL path contains​ - 値をドメインで始めることはできません。
    • URLが次のパラメーターを含む（URL path contains）​ 、 URL does not contain parameter​ - 有効なURLパラメーター。値を?または&で始めることはできません。例：utm_source=google
    • URLの正規表現（URL regular expression）​ - 正規表現。

  3. Dismissal period​ フィールドに、ユーザーがバナーを解除した後、バナーが再び表示されるまでの期間を入力します。デフォルトでは1日、つまりユーザーがバナーを解除してから24時間に設定されています。

  4. ユーザーの遷移先を定義（Define your destination destination）​ で、ユーザーがバナーに接触した後にユーザーを送る遷移先を選択します。デフォルトでは、ユーザーは適切なアプリストアに送信されます。ユーザーがアプリをインストールした後にユーザーを特定のアプリ内画面に送るには、 アプリ内画面（In-app screen）​ を選択し、以下の詳細を入力します。

    • （iOSアプリの場合） iOSのアプリスキーム（iOS app scheme）​ と iOSのアプリ画面（iOS app screen）​ を入力します。
    • （Androidアプリの場合） Androidのアプリスキーム（Android app scheme）​ と Androidのアプリ画面（Android app screen）​ を入力します。 これらの値を取得する方法の詳細については、ディープリンクの設定を参照してください。

  5. 次（NEXT）​ を選択します。

注意:
シングルページのWebサイト向けに、スマートバナーSDKでダイナミックディープリンクを設定 します。この場合、ユーザーが別のページに移動すると、現在のページURLが変更されます。ダイナミックディープリンクが設定されると、SDKは新しいWebページに適したバナーを見つけることができます。 特定の製品ページを閲覧しているユーザーをアプリ内の同じ製品に直接誘導したい場合に役立ちます。

バナーをカスタマイズする

バナーをカスタマイズする際は、Webページのレイアウトについて検討してください。

  • バナーのサイズが小さい + 画面上の位置が上部の場合、ページのコンテンツが下に押し下げられて表示されます。
  • バナーのサイズと画面上の位置の組み合わせがこれ以外の場合、バナーはWebページのコンテンツにオーバーレイ表示されます。

バナーをカスタマイズするには、以下の手順に従ってください。

  1. バナーサイズ（Banner size）​ リストで、バナーのサイズを選択します。

    • 小
    • 中
    • 全画面表示

  2. 画面上の位置（Screen position）​ で、Webページ上のバナーの位置を選択します。

    • 上部（Top）​ - バナーを上部に配置すると、ページのコンテンツが下に押し下げられて表示されます。
    • 下部（Bottom）​ - スマートバナーを下部に配置すると、ページのコンテンツにオーバーレイ表示されます。ユーザーは、スクロールして隠れたコンテンツを見ることができます。

  3. アプリ画像（App image）​ で、次のいずれかを選択します。

    • アプリアイコン（App icon）​ - アプリストアのアプリアイコンを使用します。
    • カスタム画像（Custom image）​ - バナーの画像のアクセス可能なURLをJPGまたはPNG形式で指定します。画像は168 x 168 px、最大1MBでなければなりません。

  4. タイトル（Title）​ フィールドに、バナーに表示する見出しを入力し、 タイトルの色（Title color）​ フィールドに、タイトルの文字の16進数のカラーコードを入力します。

  5. 説明文（Description）​ フィールドに、バナーに表示する説明文を入力し、 説明文の色（Description color）​ フィールドに、説明文の16進数のカラーコードを入力します。

  6. ボタン（Button）​ フィールドに、ボタン上に表示するテキストを入力します。 ボタンの文字色（Button text color）​ と ボタンの背景色（Button background）​ フィールドに、ボタンの文字と背景の16進数のカラーコードを入力します。

  7. 「閉じる」アイコンの色（Close icon color）​ フィールドに、16進数のカラーコードを入力します。

  8. 背景色（Background color）​ フィールドに、背景の16進数のカラーコードを入力するか、アクセス可能なJPGまたはPNG形式の画像のURLを背景バナーとして入力します。画像は1080 x 240 px、最大1MBでなければなりません。

  9. Preview device​ を選択してバナーのプレビューを確認し、問題がなければ 次（Next）​ を選択します。

バナーをローカライズ

ユーザーに表示されるバナーは、ユーザーのブラウザー言語によって異なります。ブラウザー言語がどのローカライズ版にもマッチしない場合、ユーザーにはオリジナルのバナーが表示されます。ユーザーがブラウザーではなくWebサイトのドメインの言語でバナーを閲覧するようにしたい場合は、スマートバナーSDKで次の手順に従ってください。

  1. 言語を追加（Add language）​ を選択し、リストから言語を選択します。
  2. タイトル（Title）​ 、 説明文（Description）​ 、 ボタン（Button）​ の各フィールドに入力します。
  3. 言語を追加するには、ローカライズされたコンテンツを追加し、 次（Next）​ を選択します。

バナーを確認する

  1. 選択内容を確認します。前に戻って、以下の変更が行えます：

    • バナーの詳細
    • バナーのコンテンツ
    • ローカライズされたコンテンツ

  2. スマートバナーの作成（Create smart banner）​ を選択し、作成したスペースでバナーを公開します。

バナーを公開

バナーを保存すると、作成したスペースの下に表示されます。バナーを公開するには、 公開（Publish）​ の下にあるトグルをONにします。公開されたバナーは、開発者がスマートバナーSDKを実装した後に初めて有効になります。