スマートバナー V2
概要
AppsFlyerは、広告主がWebサイトに実装するスマートバナーSDKを提供します。SDKの目的は、スマートバナーを動的に表示するために必要な全てのデータを取得することです。スマートバナーSDKは適切なアトリビューションリンクも自動的に作成するため、手動で作成する必要はありません。
したがって、バナーを表示するすべてのページからスマートバナーSDKにアクセスできる必要があります 。スマートバナーSDKは、Website Workplaceから取得できる一意のWeb keyを使用して認証します。
実装
Smart banners only
- スクリプトの YOUR_WEB_KEY のプレースホルダーを自分の Web keyに置き換えます。Web keyは、新しいWebsite Workplaceを作成する際に生成されます。
- 次のコードスニペットをウェブサイトの
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","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>
注意
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
!importantis 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');
更新済 21日