Biểu ngữ Thông minh v2

Tổng quan

AppsFlyer cung cấp SDK có Biểu ngữ Thông minh mà các nhà quảng cáo tích hợp vào trang web của họ. Mục đích của SDK là kéo tất cả dữ liệu cần thiết để hiển thị động Biểu ngữ Thông minh. SDK có Biểu ngữ Thông minh cũng tự động tạo các đường dẫn phân bổ thích hợp, vì vậy bạn không cần phải tạo chúng một cách thủ công.

Do đó, SDK có Biểu ngữ Thông minh phải truy cập được từ tất cả các trang hiển thị biểu ngữ trên thiết bị di động của bạn.
SDK có Biểu ngữ Thông minh xác thực bằng cách sử dụng mã khóa Web duy nhất mà bạn có thể nhận được từ vùng làm việc của trang web.

Cài đặt

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 trên trang web của bạn. Đảm bảo dán đoạn mã gần đầu thẻ head .

ℹ️

Lưu ý

The showBanner phương thức ở cuối mã cài đặt có thể nhận nhiều thông số hơn. Tìm hiểu thêm

Smart banners and People-Based Attribution

  1. Thay thế phần giữ chỗ YOUR_WEB_KEY trong tập lệnh bằng mã khóa Web của bạn. Mã khóa web được tạo khi bạn tạo vùng làm việc mới của trang Web.
  2. Thay thế phần giữ chỗ YOUR_PBA_KEY trong tập lệnh bằng dev key web của bạn. Dev key web của bạn được tạo khi bạn tạo gói thương hiệu.
  3. Dán đoạn mã này vào thẻ head trên trang web của bạn. Đảm bảo dán đoạn mã gần đầu thẻ 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>

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;
}

Ví dụ:

[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

Hàm SDK

showBanner

Chữ ký phương thức

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

Mô tả
Bắt đầu hiển thị Biểu ngữ Thông minh theo mã khóa biểu ngữ được cung cấp trong đoạn mã.

ℹ️

Lưu ý

Không sử dụng hàm này khi triển khai Biểu ngữ Thông minh trong lớp wrapper/ứng dụng di động lai để tải trang biểu ngữ từ ứng dụng (chứ không phải từ trình duyệt), vì sử dụng showBanner sẽ hiển thị biểu ngữ trong ứng dụng. Nếu bạn sử dụng showBanner cho lớp wrapper/ứng dụng di động lai, hãy sử dụng hideBanner cho lượng tải ứng dụng di động.

Đối số đầu vào

LoạiTênMô tả
StringbannerContainerQueryNếu được chuyển, SDK sẽ cố gắng định vị một phần tử trong trang bằng truy vấn này và coi phần tử đó là điểm vào cho vị trí biểu ngữ. Nếu không, document.body được sử dụng.
IntegerbannerZIndexTheo mặc định, Biểu ngữ Thông minh được đặt thành giá trị z-index tối đa, nên chúng sẽ không bị ẩn bởi các phần tử của trang web. Điều này có thể thay đổi được nếu bạn muốn một số thành phần của trang web ở trên đầu biểu ngữ.
<Key, Value Dictionary>additionalParamsNếu được thông qua, các mã khóa và giá trị này (ví dụ: deep_link_value: apples) sẽ được thêm vào URL OneLink dưới dạng thông số truy vấn.

Ví dụ cách dùng

  • Thêm thông số vào URL OneLink
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
  • Đặt Z-index của biểu ngữ này và ID vùng chứa cho vị trí của biểu ngữ
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

Chữ ký phương thức

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

Mô tả
Thêm tối đa 10 thông số theo cách lập trình (ví dụ: deep_link_value) vào URL OneLink được gán cho nút kêu gọi hành động (CTA), sau khi biểu ngữ hiển thị.

Đầu vào là một đối tượng có giá trị và mã khóa thông số.

Mã khóa không được có giá trị trống.
Mã khóa không được đặt tên là: undefined, null, NaN, hay arg
Ký tự không hợp lệ:
Mã khóa: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Giá trị = \, ;, $, >, <, ^, #, ``

  • Các thông số được thêm vào URL OneLink dưới dạng thông số truy vấn.
  • Khi bạn sử dụng updateParams để thêm thông số, URL lượt hiển thị sẽ khác với URL lượt nhấp.
  • Các thông số được thêm không thay thế các thông số trên URL OneLink ban đầu. Nếu thông số bạn thêm đã có trong URL OneLink, thông số đó sẽ không thay đổi.
  • Nếu updateParams được gọi nhiều lần, chỉ các thông số từ lần gọi cuối cùng mới được thêm vào URL.

Đối số đầu vào

LoạiTênMô tả
<Key, Value Dictionary>N/ACác mã khóa và giá trị này (ví dụ: deep_link_value: apples) sẽ được thêm vào URL OneLink dưới dạng thông số truy vấn.

Ví dụ cách dùng

  • Thêm thông số vào URL OneLink
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

Chữ ký phương thức

AF('banners', 'hideBanner');

Mô tả

Xóa theo cách lập trình mọi biểu ngữ được hiển thị khỏi trang (ví dụ: sau khi một người dùng nhất định nhập).

Đối số đầu vào

Không

Ví dụ cách dùng

  • Ẩn biểu ngữ
AF('banners', 'hideBanner');

Traits and Limitations

Đặc điểmNhận xét
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.