スマートバナー V2

概要

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

Therefore, the Smart Banner SDK should be accessible from all pages displaying your mobile banners.
The Smart Banner SDK authenticates using the unique Web key, which you can get from the Website workplace.

実装

Smart banners only

1. Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
2. Paste the following code snippet in the head tag on your website. Make sure to paste it near the top of the head tag.

<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 method at the end of installation code can take more parameters. Learn more

Smart banners and People-Based Attribution

1. Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
2. Replace the YOUR_PBA_KEY placeholder in the script with your web dev key. The web dev key is created when you create a brand bundle.
3. 以下コードを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>

SDKの機能

showBanner

メソッドのシグネチャ

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

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

ℹ️

注意

Don't use this function when implementing Smart Banners in a wrapper/hybrid app to load the banner page from the app (and not from the browser), as using showBanner will display the banner within the app. If you do use showBanner for a wrapper/hybrid app, use hideBanner for mobile app loads.

引数の入力

Usage examples

• Add parameters to the OneLink URL

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

• Set Z-index of this banner and a container Id for its placement

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

updateParams

メソッドのシグネチャ

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

詳細
Programmatically add up to 10 parameters (for example, deep_link_value) to the OneLink URL assigned to the call-to-action (CTA) button, after the banner displays.

The input is an object with parameter keys and values.

A key can’t have an empty value.
A key can’t be named: undefined, null, NaN, or arg
Invalid characters:
Key: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Value = \, ;, $, >, <, ^, #, ``

• The parameters are added as query parameters to the OneLink URL.
• When you use updateParams to add parameters, the impression URL is different than the click URL.
• Parameters added don’t replace those on the original OneLink URL. If the parameter you add is already in the OneLink URL, it doesn’t change.
• updateParams が複数回呼び出された場合、最後の呼び出しのパラメーターだけが URLに追加されます。

引数の入力

Usage examples

• Add parameters to the OneLink URL

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

hideBanner

メソッドのシグネチャ

AF('banners', 'hideBanner');

詳細

Programmatically remove any displayed banner from the page (e.g. after a certain user input).

引数の入力

None

Usage examples

• Hide banner

AF('banners', 'hideBanner');