スマートバナー V2

概要

AppsFlyerは、広告主がWebサイトに実装するスマートバナーSDKを提供します。SDKの目的は、スマートバナーを動的に表示するために必要な全てのデータを取得することです。スマートバナーSDKは適切なアトリビューションリンクも自動的に作成するため、手動で作成する必要はありません。

したがって、バナーを表示するすべてのページからスマートバナーSDKにアクセスできる必要があります 。スマートバナーSDKは、Website Workplaceから取得できる一意のWeb keyを使用して認証します。

実装

Smart banners only

You can either copy the smart banner script from the AppsFlyer dashboard or from below.

Copy the script code snippet in one of the following ways:
- Copy the script from the Smart Banner’s Website workplace in the AppsFlyer dashboard. Your web key is already included in the script.
- Copy the script from the the code snippet below and replace YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: ">>>>>YOUR_WEB_KEY<<<<"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner');
</script>

Paste the code snippet in the head タグに実装します。必ず head タグの上部に貼り付けてください。

ℹ️
注意
The showBanner メソッドは、インストールコードの最後にあり、より多くのパラメータを取得することができます。[詳細はこちら]

Smart banners and People-Based Attribution

スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite Workplaceを作成する際に生成されます。
スクリプトのYOUR_PBA_KEYプレースホルダーをWeb Devキーに置き換えます。Web dev keyはAppsFlyer管理画面でブランドバンドルを作成した時に生成されます。
以下コードをWebサイトのheadタグに貼り付けます。必ず、headタグの上部近くに貼り付けてください。

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</script>

スマートバナーのフォント制御

スマートバナーに、ウェブサイトの他の部分と同じフォントを使用することで、ブランドの一貫したまとまりのあるビジュアル・アイデンティティを実現します。

スマートバナーのデフォルトフォントを変更するためには、CSSに以下のルールを追加する必要があります。

[data-af-custom-fonts="af-creatives-text"] {
    font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}

例：

[data-af-custom-fonts="af-creatives-text"] {
    font-family: museo-sans !important;
}

🚧

The !important is required

フォントがすでにWebサイトに読み込まれていることを確認してください。

カスタムフォントは、ウェブサイト上のすべてのバナーに適用されます。

If the font doesn't display correctly, resave your banner in the creative editor

SDKの機能

showBanner

メソッドのシグネチャ

AF('banners', 'showBanner', { bannerContainerQuery: String,
              bannerZIndex: Integer,              
              additionalParams: <Key, Value Dictionary>);

詳細
以下で提供されるバナーキーに従ってスマートバナーの表示を開始します。

ℹ️
注意
Wrapper / ハイブリッドアプリにスマートバナーを実装して、（ブラウザからではなく）アプリからバナーページを読み込む場合は、この関数を使用しないでください。 showBanner メソッドによりアプリ内にアプリインストールバナーが表示されます。Wrapper / ハイブリッドアプリで showBanner を使用する場合は、 hideBanner を代わりに使用してください。

引数の入力

タイプ	名前	詳細
`String`	`bannerContainerQuery`	渡された場合、SDはこのクエリを使用してページ内のelementを見つけようとし、それをバナー配置のエントリポイントとして扱います。もしくは `document.body` を使用します。
`Integer`	`bannerZIndex`	スマートバナーはデフォルトで最大z-index値に設定されているため、Webサイトのelementによって非表示にされることはありません。これは、一部のWebサイトコンポーネントをバナーの上に配置したい場合は変更できます。
`<Key, Value Dictionary>`	`additionalParams`	渡された場合、これらのキーと値（例： `deep_link_value: apples`）がクエリパラメータとしてOneLink URLに追加されます。

使用例

OneLink URL にパラメーターを追加する

AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});

このバナーの Z-index とその配置の container ID を設定します。

AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

メソッドのシグネチャ

AF('banners', 'updateParams', { <Key, Value Dictionary> });

詳細
バナー表示後、CTAボタンに割り当てられたOneLink URLに最大10個のパラメータ（例： deep_link_value）をプログラムにより追加します。

インプットは、パラメータキーと値を持つオブジェクトです。

キーに空の値を設定することはできません。
次のようにキーの名前を指定することはできません：undefined、null、NaN、arg
無効な文字：
Key: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Value = \, ;, $, >, <, ^, #, ``

パラメーターは、クエリパラメーターとして OneLink URL に追加されます。
updateParams を使用してパラメータを追加する場合、インプレッションURLはクリックURLとは異なります。
追加されたパラメーターが元のOneLink URLのパラメーターを置き換えることはありません。追加するパラメータがすでに OneLink URL にある場合は、変更されません。
updateParams が複数回呼び出された場合、最後の呼び出しのパラメーターだけが URLに追加されます。

引数の入力

タイプ	名前	詳細
`<Key, Value Dictionary>`	N/A	These keys and values (for example, `deep_link_value: apples`）がクエリパラメータとしてOneLink URLに追加されます。

使用例

OneLink URL にパラメーターを追加する

AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

メソッドのシグネチャ

AF('banners', 'hideBanner');

詳細

表示されたバナーをプログラムから削除します（例：特定のユーザー入力後）。

引数の入力

None

使用例

Hide banner

AF('banners', 'hideBanner');