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.

  1. 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>
  1. Paste the code snippet in the head tag di situs web Anda. Pastikan untuk menempelnya dekat sisi atas dari head tag.

ℹ️

Catatan

The showBanner metode di akhir kode penginstalan dapat mengambil lebih banyak parameter. Pelajari lebih lanjut

Smart banners and People-Based Attribution

  1. Ganti placeholder YOUR_WEB_KEY di skrip dengan Kode web Anda. Kode web dibuat ketika Anda menciptakan Tempat kerja situs web yang baru.
  2. Ganti placeholder YOUR_PBA_KEY di skrip dengan kode pengembang web Anda. Kode pengembang web dibuat ketika Anda membuat kumpulan merek.
  3. 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 menggunakan showBanner untuk aplikasi wrapper/hybrid, gunakan hideBanner untuk muatan aplikasi seluler.

Argumen input

JenisNamaDeskripsi
StringbannerContainerQueryJika 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.
IntegerbannerZIndexSpanduk 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>additionalParamsJika 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

JenisNamaDeskripsi
<Key, Value Dictionary>N/AKode 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

SifatCatatan
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.