Singular Bannersは企業向け機能です。この機能の詳細については、カスタマー・サクセス・マネージャーにお問い合わせください。
アップデート（2023年3月）：Singularがクライアントのヒントを受け取るための新しいステップが追加さ
れました。
Singularバナーをモバイルウェブサイトに表示することで、ウェブユーザーをシームレスにアプリに誘導し、最も関連性の高いアプリコンテンツを表示することができます。ウェブサイトにSingular Bannersを有効にすると、Singular Banners UIから簡単にバナーのデザイン、デプロイ、メンテナンスができます。
| ガイド |
開発者 |
| 前提条件 |
ディープリンクサポートを含むSingular Mobile SDKがアプリに統合されていること。 |
| 関連記事 |
- Singularバナーの作り方（ビジュアルガイド）
- SingularバナーFAQ
|
ステップバイステップ
| 1 |
Singular ウェブサイトSDKスクリプトをあなたのサイトに追加します。
SingularはSDKのJavaScriptコードをSingularのCDNでホストしています。トラッキングしたい各ページの<head>タグ内に以下のコードを追加してください。 これは、バナーをサポートするバージョンのSDKを使用するために追加するコードです。
<head>
<!-- 最新のSDKバージョンを使用する -->
<script
src="https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk.js">
</script>
</head>
|
| 2 |
クライアントヒントデータへのアクセス許可を与える
2023年2月から3月にかけてChromiumベースのウェブブラウザのユーザーエージェントデータに新たな制限が設けられたため、広告主は代わりにクライアントヒントデータを取得し、Singular Web SDKにこのデータの受信許可を与える必要があります。詳しくはバナーFAQをご覧ください。
ウェブサイトが必要とすること
- クライアントヒント（accept-chヘッダー）の取得を開始する。
- ブラウザがフェッチバナーリクエストでクライアントヒントを送信するように、Singularに（サードパーティとして）許可を与えます（permissions-policyヘッダー）。
ページ読み込みレスポンスに以下のレスポンスヘッダを追加する：
accept-ch:
sec-ch-ua-model,
sec-ch-ua-platform-version,
sec-ch-ua-full-version-list
permissions-policy:
ch-ua-model=("https://sdk-api-v1.singular.net"),
ch-ua-platform-version=("https://sdk-api-v1.singular.net"),
ch-ua-full-version-list=("https://sdk-api-v1.singular.net")
|
| 3 |
Singular Website SDKの初期化とバナーの表示
SDK初期化コードはページがロードされるたびに呼び出される必要があります。これはすべてのSingularバナーおよび/またはWebアトリビューション機能の前提条件です。
SDKを初期化するには、以下のコードを使用してください。
- SDKキーと SDKシークレットが必要です。SDKキーはSingularプラットフォームからDeveloper Tools > SDK Keysで取得できます。
- また、お客様のウェブサイトのプロダクトIDを入力する必要があります。com.example.site」など、DNSの逆引き表記を使用することをお勧めします。これはSingularプラットフォーム全体でお客様のウェブサイトを識別するために使用されます。
// Singular Banners設定オブジェクトを作成し、Web-to-Appサポートを有効にする。
// どの広告ネットワークがユーザーをあなたのサイトに導いたかを追跡したい場合は、Web-to-appが必要です。
var bannersOptions = new BannersOptions().withWebToAppSupport();
// 一般的なSDK設定オブジェクトを作成し、Singular Bannersを有効にします。
var config = new SingularConfig(sdkKey, sdkSecret,
productId).withBannersSupport(bannersOptions);
// SDKの初期化
singularSdk.init(config);
// ディスプレイバナー
singularSdk.showBanner();
|
| 4 |
ページルートでバナーを再表示する（シングルページアプリケーションのみ）
アプリケーションがシングルページの場合、各ページルートでバナーを非表示にし、再表示する必要があります。これにより、Singularがウェブ体験に適したバナーを配信するようになります。
バナーの非表示と再表示を行うには、以下のコードを使用します：
singularSdk.hideBanner();
singularSdk.showBanner();
|
これが標準的な統合のためのプロセスの最後のステップです。 UAチームは、Singularにログインし、Automation > Bannersに進み、バナーの作成を開始できます。バナーはAutomation > Bannersで選択したオプションに基づいてウェブサイトに表示されます。
次のステップはオプションです。
|
| 5 |
[詳細オプション] リンク設定のカスタマイズ
Singularはコードを通してバナーのリンクをパーソナライズする方法を提供します。
リンクをパーソナライズするには
- LinkParamsオブジェクトを作成し、以下の関数を1つ以上使用します。これはsingularSdk.showBanner()を呼び出す前に行います。
- その後、showBanner() を呼び出すときに LinkParams オブジェクトを渡します。
例
// LinkParamsオブジェクトを定義する
let bannerParams = new LinkParams();
// リンクオプションの設定（各オプションの詳細は以下を参照）
bannerParams.withAndroidRedirect("androidRedirectValue");
bannerParams.withAndroidDL("androidDLParamValue");
bannerParams.withAndroidDDL("androidDDLparamValue");
bannerParams.withIosRedirect("iosRedirectValue");
bannerParams.withIosDL("iosDLValue");
bannerParams.withIosDDL("iosDDLValue");
// 定義されたオプションでバナーを表示する
singularSdk.showBanner(bannerParams);
オプションのリスト：
| メソッド |
説明 |
| withAndroidRedirect |
Androidアプリのダウンロードページ（通常はPlayストアのページ）へのリダイレクトリンクを渡します。 |
| withAndroidDL |
Androidアプリ内のページへのディープリンクを渡します。 |
| withAndroidDDL |
延期されたディープリンク、つまり、ユーザーがまだインストールしていないAndroidアプリのページへのリンクを渡します。 |
| withIosRedirect |
iOSアプリのダウンロードページ（通常はApp Storeページ）へのリダイレクトリンクを渡します。 |
| withIosDL |
iOSアプリ内のページへのディープリンクを渡します。 |
| withIosDDL |
延期されたディープリンク、つまりユーザーがまだインストールしていないiOSアプリ内のページへのリンクを渡します。 |
|
| 6 |
[詳細オプション] コードを使ってバナーを強制的に隠す/表示する
ステップ3で述べたように、単一ページのアプリケーションの場合、適切なバナーが配信されるように、各ページのルートでhideBanner() メソッドとshowBanner() メソッドを使用する必要があります（上記ステップ3参照）。
hideBanner()とshowBanner()は、表示されているバナーを非表示にしたり、非表示にしたバナーを再度表示したりしたい場合に、コード全体で使用することもできます。
| メソッド |
説明 |
| singularSdk.hideBanner() |
表示されているバナーをページから非表示にします。 |
| singularSdk.showBanner() |
設定済みのバナーを表示する。 |
| singularSdk.showBanner(params) |
設定済みのバナーを表示するが、linkParamsオブジェクトで定義されたオプションでリンクを上書きする（ステップ4参照）。 |
|
