Smart Banner v2
Overview
AppsFlyer menyediakan SDK Spanduk Cerdas yang diintegrasikan oleh pemasang iklan ke situs web mereka. Tujuan SDK adalah untuk menarik semua data yang dibutuhkan untuk menampilkan Spanduk Cerdas secara dinamis. SDK Spanduk Cerdas juga secara otomatis membangun tautan atribusi yang tepat, jadi Anda tidak perlu membuat mereka secara manual.
Maka, SDK Spanduk Cerdas harus dapat diakses dari semua halaman yang menampilkan spanduk seluler Anda.
SDK Spanduk Cerdas mengautentikasi menggunakan Kode web yang unik, yang dapat Anda dapatkan dari Tempat kerja situs web.
Instalasi
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
tag di situs web Anda. Pastikan untuk menempelnya dekat sisi atas darihead
tag.
Catatan
The
showBanner
metode di akhir kode penginstalan dapat mengambil lebih banyak parameter. Pelajari lebih lanjut
Smart banners and People-Based Attribution
- Ganti placeholder YOUR_WEB_KEY di skrip dengan Kode web Anda. Kode web dibuat ketika Anda menciptakan Tempat kerja situs web yang baru.
- Ganti placeholder YOUR_PBA_KEY di skrip dengan kode pengembang web Anda. Kode pengembang web dibuat ketika Anda membuat kumpulan merek.
- Tempel cuplikan kode ini di head tag situs web Anda. Pastikan untuk menempelnya dekat sisi atas dari 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", "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>
Control Smart Banner font
Using the same font in the smart banner as the rest of the website creates a consistent and cohesive visual identity for your brand.
In order to change the default font in the Smart Banner, you need to add the following rule to your CSS
[data-af-custom-fonts="af-creatives-text"] {
font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}
Contoh:
[data-af-custom-fonts="af-creatives-text"] {
font-family: museo-sans !important;
}
- The
!important
is required- Make sure that the font is already loaded in your website
- The custom font will apply to all banners on the website
- If the font doesn't display correctly, resave your banner in the creative editor
Fungsi SDK
showBanner
Signature metode
AF('banners', 'showBanner', { bannerContainerQuery: String,
bannerZIndex: Integer,
additionalParams: <Key, Value Dictionary>);
Deskripsi
Mulai menampilkan Spanduk Cerdas menurut kode spanduk yang disediakan di cuplikan.
Catatan
Jangan menggunakan fungsi ini ketika menerapkan Spanduk Cerdas di aplikasi wrapper/hybrid untuk memuat halaman spanduk dari aplikasi (dan bukan dari browser), karena menggunakan
showBanner
akan menampilkan spanduk di dalam aplikasi. Jika Anda menggunakanshowBanner
untuk aplikasi wrapper/hybrid, gunakanhideBanner
untuk muatan aplikasi seluler.
Argumen input
Jenis | Nama | Deskripsi |
---|---|---|
String | bannerContainerQuery | Jika lulus, SDK mencoba untuk mencari elemen di halaman dengan kueri ini dan memperlakukannya sebagai titik masuk untuk penempatan spanduk. Jika tidak, document.body akan digunakan. |
Integer | bannerZIndex | Spanduk Cerdas secara default disetel ke nilai indeks-z maksimal sehingga tidak akan disembunyikan oleh elemen situs web. Ini dapat diubah jika Anda menginginkan beberapa komponen situs web berada di atas spanduk. |
<Key, Value Dictionary> | additionalParams | Jika lulus, kode dan nilai ini (misalnya, deep_link_value: apples ) akan ditambahkan sebagai parameter kueri ke URL OneLink. |
Contoh penggunaan
- Tambahkan parameter ke URL OneLink
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
- Atur indeks-Z dari spanduk ini dan Id kontainer untuk penempatannya
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
bannerZIndex: 999});
updateParams
Signature metode
AF('banners', 'updateParams', { <Key, Value Dictionary> });
Deskripsi
Tambahkan secara terprogram hingga 10 parameter (contoh, deep_link_value
) ke URL OneLink yang ditetapkan ke tombol call-to-action (CTA), setelah tampilan spanduk.
Masukannya adalah objek dengan kode dan nilai parameter.
Kode tidak boleh memiliki nilai kosong.
Kode tidak boleh dinamai: undefined, null, Nan, atau arg
Karakter tidak valid:
Kunci: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Nilai = \, ;, $, >, <, ^, #, ``
- Parameter ditambahkan sebagai parameter kueri ke URL OneLink.
- Ketika Anda menggunakan updateParams untuk menambahkan parameter, URL tayangan berbeda dengan URL klik.
- Parameter yang ditambahkan tidak mengganti yang ada di URL OneLink asli. Jika parameter yang Anda tambahkan sudah ada di URL OneLink, hal itu tidak berubah.
- Jika updateParams dipanggil lebih dari satu kali, hanya parameter dari panggilan terakhir yang ditambahkan ke URL.
Argumen input
Jenis | Nama | Deskripsi |
---|---|---|
<Key, Value Dictionary> | N/A | Kode dan nilai ini (misalnya, deep_link_value: apples ) akan ditambahkan sebagai parameter kueri ke URL OneLink. |
Contoh penggunaan
- Tambahkan parameter ke URL OneLink
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});
hideBanner
Signature metode
AF('banners', 'hideBanner');
Deskripsi
Hapus semua spanduk yang ditampilkan dari halaman secara terprogram (mis. setelah masukan pengguna tertentu).
Argumen input
Tidak ada
Contoh penggunaan
- Sembunyikan spanduk
AF('banners', 'hideBanner');
Traits and Limitations
Sifat | Catatan |
---|---|
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. |
Diperbarui 6 bulan yang lalu