スマートバナー 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');
Traits and Limitations
特性 | 備考 |
---|---|
Single page application (SPA) | Smart Banners are by default only displayed once, even if users navigate between pages. To display banners when users navigate between pages, you need to manually call hideBanner and showBanner for every navigation that doesn't reload the page and trigger the Smart Banners default logic. |
更新済 9か月前