Hướng dẫn tích hợp SDK Web PBA

Khái quát: Tích hợp AppsFlyer vào các trang web sử dụng SDK Web để ghi nhận và đo lường lượt truy cập, sự kiện, lượt chuyển đổi và doanh thu.

5107_Infographic_Web_S2S_759x270_option1.jpg

Hướng dẫn tích hợp và người dùng SDK Web

  • Thẻ JavaScript SDK Web:
    • là một phần của giải pháp Phân bổ trên cơ sở người dùng (PBA) để phân tích hành trình của người dùng trên nhiều nền tảng.
    • báo cáo lượt truy cập và hành động của người dùng trên trang web của bạn cho nền tảng AppsFlyer.
    • là một mô-đun plug-in của trang web không cần lập trình. Nó không cần biết đến hệ điều hành và trình duyệt của khách truy cập trang web.
    • Kích thước: 40-60Kb.
  • Triển khai SDK Web cùng với SDK AppsFlyer di động để ghi nhận và lập bản đồ hoạt động của người dùng trên các môi trường web và ứng dụng di động của bạn.
  • Các sự kiện xảy ra bên ngoài trang web có thể được ghi nhận bằng cách sử dụng API sự kiện từ máy chủ đến máy chủ Web (Web S2S)

Tích hợp SDK Web vào trang web

Cài đặt và tích hợp

Những điều cần lưu ý và hành động cần thiết

Danh sách kiểm tra tích hợp

Để đảm bảo rằng các lượt truy cập và sự kiện được ghi nhận, SDK Web phải được cài đặt trên tất cả các trang của trang web. 

Đặt đoạn mã để đoạn mã để có thể tải càng sớm càng tốt trong phạm vi trang. Có thể thực hiện điều đó bằng cách đặt mã gần đầu thẻ head.

Nếu bạn đang tích hợp SDK bằng Trình quản lý Thẻ của Google (GTM):

  • Đảm bảo rằng SDK tải một lần một trang.
  • Đặt SDK để tải ngay khi trang tải bằng chế độ ưu tiên GTM.

Bạn có thể triển khai SDK Web hoặc không có Biểu ngữ Thông minh. Làm theo các hướng dẫn liên quan trong các phần tiếp theo.

Các yêu cầu bắt buộc về tích hợp

  • Ghi nhận lượt truy cập
  • Ghi nhận sự kiện
  • Đặt Customer User ID (CUID) : Nếu bạn không có CUID, hãy liên hệ với CSM của bạn để trao đổi về các lựa chọn thay thế. 

Xác thực việc tích hợp bằng công cụ thử nghiệm

Trước khi bắt đầu, bạn phải:

  • Xác minh với nhà tiếp thị rằng họ đã tạo gói thương hiệu. 
  • Để biết thêm hướng dẫn bổ sung, hãy xem Hướng dẫn về PBA dành cho người mới bắt đầu.
  • Lưu ý: Nếu bạn đã có SDK web Biểu ngữ Thông minh độc lập, hãy xóa đi và thay thế bằng SDK Web cho cả Biểu ngữ Thông minh và Phân bổ trên cơ sở người dùng; đừng chỉ thêm SDK Web độc lập cho PBA. 

Thực hiện như sau: 

  • Nhận Dev Key Web của SDK Web. Lưu ý! Đây không phải là khóa tương tự được sử dụng bởi các ứng dụng di động.
    • Để nhận Dev Key Web: 
      1. Trong AppsFlyer, chuyển đến tab My Apps (Ứng dụng của Tôi).
      2. Nhấp vào View brand bundles (Xem gói thương hiệu).
      3. Sao chép Dev Key Web được yêu cầu. (WEB_DEV_KEY)
  • Nếu bạn triển khai Biểu ngữ Thông minh, hãy lấy khóa Biểu ngữ Thông minh. 
    • Để lấy Khóa Biểu ngữ Thông minh:
      1. Trong AppsFlyer, đi đến Engagement & Deep Linking (Thu hút & Liên kết Sâu) > Smart Banners (Biểu ngữ Thông minh).
      2. Sao chép Smart Banner Key (Khóa Biểu ngữ Thông minh) bắt buộc. 
  • Quyền thêm tập lệnh vào thẻ head trên trang web.
  • Nếu bạn sử dụng Trình quản lý Thẻ của Google thì nó phải được tích hợp vào trang web.

Tiến hành tích hợp SDK web bằng cách sử dụng một trong các tùy chọn sau. 

Gốc Trình quản lý Thẻ của Google  Trình quản lý Thẻ Khởi chạy Adobe 

Đoạn mã JavaScript

Tích hợp SDK web bằng một trong các phương thức sau. 

Để cài đặt SDK Web không có Biểu ngữ Thông minh:

  1. Lặp lại quy trình sau trên tất cả các trang trong trang web của bạn.
  2. Trong đoạn mã tiếp sau đó, hãy thay thế WEB_DEV_KEY  bằng cách sử dụng khóa được chỉ định trong điều kiện tiên quyết.
  3. Dán đoạn mã vào thẻ head trên trang web của bạn. Dán vào 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",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>

Để triển khai SDK Web với Biểu ngữ Thông minh:

  1. Lặp lại quy trình sau trên tất cả các trang trong trang web của bạn.
  2. Trong đoạn mã tiếp sau đó, hãy thay thế WEB_DEV_KEY và YOUR_BANNER_KEY bằng các khóa được chỉ định trong điều kiện tiên quyết.
  3. Dán đoạn mã này vào thẻ head của trang web. Dán vào 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: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
AF('banners', 'showBanner');
</script>

Đảm bảo rằng SDK đang hoạt động

Sau khi cài đặt, hãy xác nhận rằng SDK web AppsFlyer được trình duyệt của khách truy cập gọi và đang gửi thông báo. Có thể thực hiện thao tác này bằng cách kiểm tra kết nối mạng thông báo được báo cáo trong trình duyệt.

Để đảm bảo rằng SDK sẽ tải và đang hoạt động:

  1. Đi đến trang web.
  2. Mở công cụ dành cho nhà phát triển trong trình duyệt.

    WebSDK_us-en.jpg

  3. Đi đến tab (A) Network (Mạng). 
  4. Làm mới trang.
  5. Lọc theo (B) wa.appsflyer.
  6. Chọn (C) thông báo sự kiện.
  7. Trong tab tiêu đề (D), hãy đảm bảo rằng:
    • URL yêu cầu là wa.appsflyer.com/events.
    • thông số truy vấn site_id= WEB_DEV_KEY.
    • (E) mã trạng thái là 200.
  8. Xác minh rằng giá trị của site_id bằng với giá trị của WEB_DEV_KEY trong cài đặt gói thương hiệu:
    1. Trong AppsFlyer, đi tới Configuration (Cấu hình) > Brand Bundles (Gói Thương hiệu).
    2. Nhấp vào Web dev key, như vậy sẽ sao chép mã khóa này.
    3. Dán mã khóa vào bất kỳ vị trí nào (tab trình duyệt mới, notepad) để hiển thị mã khóa.
    4. Xác minh rằng site_id và WEB_DEV_KEY khớp nhau. 
  9. Đảm bảo rằng SDK chỉ tải một lần. Việc tải nhiều SDK có thể khiến SDK ngừng hoạt động.

Gửi sự kiện lựa chọn tham gia/lựa chọn không tham gia

5578-VistiorPrivacyOptIn_us-en.png

SDK Web gửi dữ liệu sự kiện của khách truy cập tới AppsFlyer. Bạn có thể kiểm soát, dừng hoặc bắt đầu sự kiện như được mô tả trong phần này. 

Cân nhắc:

  • Cài đặt trạng thái ban đầu của SDK: Xác định xem SDK có gửi các sự kiện khi tải trang web ban đầu hay không hay liệu SDK phải đợi cho đến khi bạn đưa ra một lệnh cụ thể để bắt đầu gửi các sự kiện. Cài đặt chứa trong đoạn mã web này.
  • Kiểm soát cụ thể:Sử dụng để dừng hoặc bắt đầu gửi sự kiện. Ví dụ: nếu bạn triển khai biểu ngữ lựa chọn tham gia/lựa chọn không tham gia dữ liệu (còn được gọi là biểu ngữ chấp thuận cookie), hãy tích hợp các lệnh cụ thể vào các tùy chọn kiểm soát biểu ngữ của bạn để bắt đầu và dừng gửi sự kiện. Kiểm soát cụ thể có mức độ ưu tiên hơn so với cài đặt trạng thái ban đầu SDK và sử dụng cookie liên tục của bên thứ nhất có các đặc điểm sau:
    • Đặt miền trang web.
    • Hết hạn sau một khoảng thời gian do SDK Web đặt hoặc do trình duyệt xác định. Sau khi cookie hết hạn, SDK Web sẽ trở về cài đặt trạng thái ban đầu.
    • Cookie SDK Web không ảnh hưởng và luôn tuân theo cài đặt cookie dành riêng cho trình duyệt.
Cài đặt Đoạn mã bắt buộc

[Mặc định] Gửi sự kiện

Thực hiện thay đổi sau đối với đoạn mã SDK Web.Nếu cần, hãy thêm thông số measurementStatus:

Đặt measurementStatus=true

{pba: {webAppId: "********-****-****-*****************", measurementStatus:true}

Không gửi sự kiện

 

Thực hiện thay đổi sau đối với đoạn mã SDK Web. Nếu cần, hãy thêm thông số measurementStatus:

Đặt measurementStatus=false

{pba: {webAppId: "********-****-****-*****************", measurementStatus:false}

Cài đặt trạng thái SDK ban đầu
Tùy chọn Lệnh
Bắt đầu gửi sự kiện (lựa chọn tham gia) window.AF_SDK.PLUGINS.PBA.enableMeasurement()
Dừng gửi sự kiện (lựa chọn không tham gia) window.AF_SDK.PLUGINS.PBA.disableMeasurement()
Kiểm soát cụ thể

Triển khai chính sách Chính sách Bảo mật Nội dung (CSP)

Một số quản trị viên web yêu cầu phải bảo mật Javascript bằng CSP của họ. Bạn có thể sử dụng một số cơ chế CSP để thực hiện điều này, bao gồm bất kỳ cơ chế nào sau đây:

  • CSP sử dụng self
  • CSP sử dụng nonce: Nối lệnh nonce vào thẻ script bằng cách sử dụng giá trị nonce ngẫu nhiên do bạn tạo. 
    <script nonce="random value generated by you">
    !function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
    ....
    </script>

Loại bỏ thông số truy vấn

Nếu các thông số truy vấn của bạn chứa dữ liệu mà bạn không muốn AppsFlyer ghi lại, thì bạn có thể chỉ thị nền tảng AppsFlyer loại bỏ một số hoặc tất cả các thông số truy vấn. Bằng cách đó, chúng sẽ không xuất hiện trong dữ liệu thô hoặc các báo cáo. 

Bạn có thể thực hiện các phương thức được mô tả liên quan đến url, người giới thiệu và header_referer.

Phương thức Mô tả 
Loại bỏ tất cả các thông số truy vấn Nối af_url=true vào url
Loại bỏ các thông số truy vấn đã chỉ định

Bằng cách cài đặt mặt nạ thông số truy vấn, bạn sẽ chỉ định thông số nào cần được loại bỏ.  Đặt mặt nạ loại bỏ bằng cách sử dụng af_url_mask=param trong đó param là tên thông số.

Ví dụ: 

Url có mặt nạ:

param1=value1&param2=value2&param3=value3&af_url_mask=param2;param3

Url sau khi loại bỏ:

param1=value1&af_url_mask=param2;param3

Tùy chọn loại bỏ truy vấn

Nguyên tắc ghi nhận sự kiện

Sự kiện chuyển đổi và tiêu chuẩn

  • Các sự kiện của người dùng được SDK ghi nhận, sẽ gửi sự kiện đến nền tảng AppsFlyer.
  • Sử dụng danh sách sự kiện chuyển đổi do nhà tiếp thị đặt, AppsFlyer chia các sự kiện thành các sự kiện chuyển đổi và tiêu chuẩn.
  • Dữ liệu sự kiện chuyển đổi có sẵn trong các bảng điều khiển PBA.
  • Dữ liệu sự kiện chuyển đổi và tiêu chuẩn có sẵn trong báo cáo dữ liệu thô.

Sự kiện chuyển đổi

  • Sự kiện chuyển đổi cung cấp thông tin chi tiết về nỗ lực tiếp thị và kinh doanh của bạn. Các sự kiện chuyển đổi bao gồm mua, tải xuống, đăng ký và đặt mua dài hạn.
  • PBA phân bổ các sự kiện chuyển đổi cho nguồn truyền thông đã thúc đẩy người dùng truy cập trang web.
  • Bằng cách xác định nguồn truyền thông được phân bổ, bạn có thể đo lường và phân biệt được chất lượng của người dùng do các nguồn truyền thông khác nhau mang lại.
  • Sự kiện chuyển đổi được sử dụng để ghi nhận doanh thu và tính toán ROI.
  • Sử dụng chúng để so sánh ngân sách quảng cáo cho các nguồn truyền thông cụ thể so với doanh thu được tạo ra từ người dùng đến từ các nguồn truyền thông này.

Sự kiện tiêu chuẩn

  • Các sự kiện tiêu chuẩn được sử dụng để xác thực hành trình của người dùng và các kênh đưa đến lượt chuyển đổi.
  • Sử dụng chúng để đo lường hoạt động của người dùng và đánh dấu các nguồn truyền thông mang đến người dùng bị thu hút.
  • Ghi nhận hoạt động của người dùng để đánh dấu người dùng cho các chiến dịch thu hút lại.

Ghi nhận sự kiện

Kích hoạt SDK web để ghi nhận các sự kiện khi đáp ứng các điều kiện nhất định, chẳng hạn như khi tải trang đích hoặc khi người dùng tương tác với các phần tử của trang web. Xem các ví dụ về ghi nhận sự kiện.

Xác định người dùng bằng customer user ID (CUID)

  • Người dùng web được xác định trong AppsFlyer bằng cách sử dụng CUID duy nhất mà bạn phân bổ cho họ. Thông thường, CUID được quản lý bởi các máy chủ backend của bạn. 
  • Sử dụng cùng một giá trị CUID mà bạn sử dụng trong môi trường di động.Bằng cách đó, bạn sẽ có được cái nhìn tổng thể về hoạt động của người dùng trên nhiều nền tảng. Chức năng trong SDK dành cho thiết bị di động là hàm setCustomerUserId(iOS, Android, Unity).
  • Để đặt CUID trong SDK web:
    • Đặt CUID tại điểm sớm nhất mà bạn có quyền truy cập vào. Điều này thường có nghĩa là bạn cần phải đợi người dùng xác định thông qua đăng nhập hoặc đăng ký.
    • Kích hoạt lệnh gọi JavaScript tới setCustomerUserId() như được hiển thị trong ví dụ sau. 
      Lưu ý! Gửi CUID dưới dạng một chuỗi ngay cả khi nó là dạng số. Thực hiện bằng cách đặt CUID vào dấu ngoặc kép.
  • Nếu bạn triển khai S2S web, hãy lưu ý rằng bạn có thể cần thông báo cho PBA khi bạn liên kết CUID với id khách truy cập web trong phần backend của bạn. 
  • CUID không được chứa thông tin cá nhân có thể nhận dạng trực tiếp như số điện thoại hoặc địa chỉ email.
Ví dụ: đặt CUID
// Liên kết tất cả sự kiện web của người dùng hiện tại với ID 663274 riêng 
AF('pba', 'setCustomerUserId' , '663274')

Thông số sự kiện SDK Web

Tên thông số Bắt buộc Mô tả
eventType

Loại sự kiện

Định dạng: Chuỗi

Luôn điền thông số này với SỰ KIỆN.

Ví dụ: eventType: "EVENT" (SỰ KIỆN)

Tên của sự kiện

Tên của sự kiện

Định dạng: Chuỗi

Ví dụ: Mua hàng, Đặt mua dài hạn

eventCategory Không

Thông số này không còn được hỗ trợ nữa và sẽ bị xóa khỏi hệ thống vào một ngày sẽ được công bố. Thay vào đó, hãy sử dụng thông số eventValue.

eventLabel

 

Không

Thông số này không còn được hỗ trợ nữa và sẽ bị xóa khỏi hệ thống vào một ngày sẽ được công bố. Thay vào đó, hãy sử dụng thông số eventValue.

eventRevenue Không

Doanh thu được chỉ định cho một sự kiện chuyển đổi

Định dạng: Động

eventRevenueCurrency Không

Tiền tệ doanh thu

  • Mã tiền tệ 3 ký tự ISO 4217
  • Mặc định: USD

Định dạng: Chuỗi

Giá trị của sự kiện Không
Bản đồ các thông số sự kiện mô tả sự kiện. Sử dụng thông số này để gửi các sự kiện phong phú trong ứng dụng như SKU sản phẩm, giá của mục hàng. 
Định dạng: JSON

Ví dụ: Để gửi SKU ABC123, có màu xanh lam và đơn giá là $3,99

{"sku": "ABC123", “color": "blue", "unit_price":3.99,"currency": "USD"} 

Giới hạn: 1000 ký tự. Không được vượt quá mức này, vì nội dung sẽ bị cắt bớt. 

Ghi nhận các tình huống sự kiện

Sự kiện ví dụ

// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

Các sự kiện mà bạn gửi phụ thuộc vào bản chất của ứng dụng web của bạn. Ví dụ: một ứng dụng cửa hàng trực tuyến yêu cầu một tập hợp các sự kiện khác với một đơn vị đưa tin. Xem các tình huống sau để biết các sự kiện bạn nên gửi và thời điểm gửi.

Cửa hàng trực tuyến

Giả sử bạn đang quản lý một cửa hàng trực tuyến. Một số sự kiện tiêu chuẩn mà bạn có thể muốn ghi nhận sẽ là: 

  • Tìm kiếm: sự kiện tiêu chuẩn
  • Thêm vào giỏ hàng: sự kiện tiêu chuẩn
  • Xóa khỏi giỏ hàng: sự kiện tiêu chuẩn
  • Mua hàng: sự kiện chuyển đổi

Đơn vị đưa tin

Giả sử bạn đang quản lý một cửa hàng mới. Một số sự kiện mà bạn có thể muốn ghi nhận sẽ là:

  • Đăng ký: sự kiện chuyển đổi
  • Mua gói đặt mua dài hạn: sự kiện chuyển đổi

Đảm bảo rằng các sự kiện được gửi đi

Phần này dành cho các nhà phát triển web.

Thử nghiệm tích hợp SDK web PBA: xem các sự kiện thử nghiệm theo thời gian thực.

Để đảm bảo rằng các sự kiện được gửi đến AppsFlyer:

  1. Mở trang web.
  2. Mở công cụ dành cho nhà phát triển trong trình duyệt.
  3. Chuyển sang tab Network (Mạng).
  4. Kích hoạt sự kiện.
  5. Lọc theo thông báo.

    pba_af_event.png

  6. Tìm kiếm một yêu cầu mạng bắt đầu bằng đích wa.appsflyer.com (xem ảnh chụp màn hình bên dưới).
  7. Đảm bảo rằng:
    1. Mã trạng thái là 200.
    2. Tải trọng Yêu cầu phù hợp với các thông số trong sự kiện.

Ví dụ:

Ghi nhận sự kiện

Mã được cung cấp chỉ dành cho mục đích minh họa. Không sử dụng y nguyên mã này. 

  • Giả định: SDK Web đã được trang tải vào thời điểm sự kiện được gửi.
  • Các tình huống ví dụ chứa mã để ghi nhận các sự kiện khi: 
    • trang đích tải.
    • người dùng tương tác với trang web.
Ghi nhận sự kiện gốc Ghi nhận sự kiện trong Trình quản lý Thẻ

Ghi nhận các sự kiện khi trang đích tải

  • Bạn có một trang đặt mua dài hạn cho các bản tin và bạn muốn ghi nhận đặt mua dài hạn.
  • Bạn cũng có thể thiết lập trang cảm ơn và chuyển hướng người dùng đến trang đó sau khi họ đăng ký.
<html>
    <head>
        <!-- Assume that the server returns a response with details about the newly subscribed user -->
        <!-- Alternatively, you can extract data from localStorage or cookies,
            in case data was set in either of them during the subscription process
        -->
        <script>window.onload = function(){
            AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion', eventValue: {'label' : 'newspaper'}, eventName: 'subscription',}); } </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>
  • Mã trước chứa một trang HTML cơ bản. Trang web cần tải SDK Web để bạn gửi các sự kiện.
  • Khi trang tải, sau khi người dùng được chuyển hướng đến trang đó, phương thức tải cửa sổ gọi ra phương thức AF() để gửi sự kiện đặt mua dài hạn đến AppsFlyer.

Ghi nhận các sự kiện khi người dùng tương tác với trang web

  • Bạn có một trang web Thương mại điện tử và bạn muốn ghi nhận các sự kiện thanh toán.
  • Khi người dùng nhấp vào nút thanh toán, SDK Web sẽ gửi một sự kiện đến AppsFlyer.
<html>
<head>
    <!-- Assume that data about products in the shopping cart
    is stored in localStorage -->
    <script>
        window.onload = function () {
            document.getElementById('checkout').addEventListener('click', function () {
                AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
            });
        }
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <h2>Shirt</h2>
    <p>
        <ul>
            <li>Color: Blue</li>
            <li>Quantity: 2</li>
            <li>Price: $20</li>
        </ul>
    </p>
    <h2>Pants</h2>
    <p>
        <ul>
            <li>Color: Black</li>
            <li>Quantity: 3</li>
            <li>Price: $15</li>
        </ul>
    </p>
    <button id='checkout'>Checkout</button>
</body>
</html>

Đoạn mã trước ở trên hiển thị một trang HTML cơ bản. Trang web cần tải SDK Web để bạn gửi các sự kiện.

  • Sau khi tải trang, phương thức liên kết trình nghe nhấp chuột vào nút Checkout (Thanh toán).
  • Khi người dùng nhấp vào nút Checkout (Thanh toán), hàm gọi lại sẽ:
    • tìm nạp dữ liệu từ localStorage.
    • gọi ra phương thức AF() và chuyển dữ liệu cho nó.
  • Phương thức AF() gửi sự kiện đến AppsFlyer.
  • Đảm bảo rằng thẻ hàm SDK web được tải trước khi sự kiện được kích hoạt
  • Không gửi các ký tự đặc biệt trong giá trị sự kiện, chẳng hạn như ký hiệu tiền tệ trong giá trị doanh thu.
  • Chuỗi giá trị phải ngắn hơn 50 ký tự.

Đặt customer user ID sau khi đăng ký

Mã được cung cấp trong các ví dụ này chỉ để tham khảo. Không sử dụng y nguyên mã này. Nếu bạn không chắc chắn về cách sử dụng mã này, hãy tham khảo ý kiến nhà phát triển web của bạn. 

Giả định: SDK Web được tải bởi trang trước khi sự kiện được gửi đi; đừng tải lại SDK.

Tình huống người dùng:

  • Có người dùng đăng ký vào trang web của bạn.
  • Mã trang web thu thập thông tin chi tiết người dùng và gửi đến máy chủ của bạn.
  • Máy chủ tạo CUID duy nhất cho người dùng đó.
  • Trong trang cảm ơn sau khi đăng ký, bạn truy vấn máy chủ về CUID mới.
  • Bằng cách sử dụng phản hồi của máy chủ, bạn đặt CUID AppsFlyer bằng phương thức SDK Web setCustomerUserId().
Native Google Tag Manager

Thiết lập trang đăng ký:

<html>
<head>
    <!-- The Web SDK script loads first -->
    <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",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        };
    // This function stores the user email sent to the server after the user reaches the thank you page
    // The response from the server is a unique CUID that should be set using the web SDK setCustomerUserId method
        function storeUserEmail (){
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Sign Up</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Name</label>
            <input type="text" name="name" id="name"></div>
        <br />
        <div> <label>Email</label>
            <input type="email" name="email" id="email"></div>
        <br />
        <input type="submit" id="submit">
    </form>
</body>
</html>

Mã trước ở trên là một biểu mẫu đăng ký đơn giản. Khi biểu mẫu được gửi, email được lưu trữ trong localStorage. Khi người dùng đến trang cảm ơn, địa chỉ email của người dùng sẽ được gửi đến máy chủ để tạo CUID duy nhất cho địa chỉ email đó.

Thiết lập trang cảm ơn cho những người dùng đăng ký:

<html>
<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",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        // Using the fetch API to send the user email to the server
        // and get the unique user id in return	
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                   res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }  </script> 
     </head> 
     <body> 
        <h1>Thank You for Signing Up!</h1> 
     </body> 
</html>

Đoạn mã sử dụng API tìm nạp. Đoạn mã này sẽ gửi cho máy chủ địa chỉ email được nhập bởi người dùng. Giả sử rằng máy chủ tạo cho người dùng một CUID duy nhất khi đăng ký, việc gửi địa chỉ email đến máy chủ là nhằm mục đích nhận một CUID duy nhất. Máy chủ phản hồi bằng một CUID duy nhất và CUID duy nhất này là giá trị được chuyển bằng phương thức setCustomerUserId.

Hàm setCustomerUserId có thể được gửi ở bất kỳ giai đoạn nào trong luồng người dùng, ví dụ: sau khi người dùng đăng nhập và đăng ký. AppsFlyer sử dụng CUID được gửi gần đây nhất để cập nhật người dùng hiện tại đang được quan sát cho các điểm tiếp xúc và sự kiện trong quá khứ hoặc tương lai.

Sử dụng cùng một giá trị CUID như bạn đã làm trong hàm setCustomerUserId trong ứng dụng dành cho thiết bị di động (xem setCustomerUserId dành cho thiết bị di động cho: iOS, Android, Unity)

Thông tin bổ sung

Cookie SDK Web

Các cookie được liệt kê trong bảng sau do SDK Web đặt hoặc sử dụng trên trang web của bạn. 

Trong bảng sử dụng các từ viết tắt sau:

  • AMP: Trang Nhanh cho Thiết bị di động (Accelerated Mobile Pages) 
  • CDN: Mạng Phân phối Nội dung (Content Delivery Network)
  • 3PC: Cookie của Bên Thứ ba (Third-party Cookies)
SDK web và các cookie  liên quan
Tên cookie  Miền Tuổi thọ  Thời gian sử dụng Chi tiết
afUserid Miền trang web của bạn 2 năm không phải AMP Xác định người dùng trong trường hợp các sự kiện điều hướng và tải web
AF_SYNC Miền trang web của bạn 1 tuần không phải AMP
  • Cờ hiệu cho biết rằng mã định danh người dùng cuối cùng đã được đặt
  • Điều này được tận dụng để giảm thời gian tải trang web
af_id appsflyer.com 2 năm không phải AMP khi 3PC được phép Xác định người dùng trong trường hợp các sự kiện điều hướng và khởi chạy ứng dụng 
af_id onelink.me 2 năm không phải AMP khi 3PC được phép Liên kết các hành động thu hút với biểu ngữ, thu hút với onelink hoặc cả hai với các sự kiện khởi chạy ứng dụng.
amp-afUserid AMP CDN hoặc miền trang web của bạn 1 năm Đối với dịch vụ trang của AMP  

Ghi chú phát hành

Ghi chú phát hành SDK Web
Ngày  Phiên bản Lưu ý
01/07/2021 1.0 Loại bỏ thông số truy vấn
01/06/2021 1.0 Thực hiện Chính sách Bảo mật Nội dung (CSP) 
31/08/2020 1.0 Đã thêm chức năng lựa chọn tham gia và lựa chọn không tham gia
Ngày 16 tháng 04 năm 2020 1.0 Hàm customerUserId () thay thế sự kiện IDENTIFY để gửi CUID duy nhất
Ngày 30 tháng 7 năm 2020 1.0
  • Bắt đầu/dừng kiểm soát cụ thể để gửi sự kiện
  • Thay đổi trạng thái mặc định ban đầu

Ngừng hỗ trợ

  •  Thông báo ngừng hỗ trợ nêu rõ ý định của chúng tôi về việc ngừng hỗ trợ một tính năng hoặc phương thức. Tính năng hoặc phương thức sẽ tiếp tục hoạt động cho đến ngày ngừng hỗ trợ.
  • Hãy coi các thông báo ngừng hỗ trợ là cơ hội để thực hiện các thay đổi đối với mã của bạn.
Ngừng hỗ trợ

Ngày ngừng hỗ trợ

Ngày ngừng hỗ trợ Chi tiết
Ngày 16 tháng 04 năm 2020 Sẽ được công bố

Phương thức không còn được hỗ trợ: Gửi customer user ID (CUID) trong thông số sự kiện customUserId với eventType được đặt thành "IDENTIFY" (XÁC ĐỊNH) 

Phương thức hiện tại: Gửi CUID bằng cách sử dụng hàm setCustomerUserId(). 

Bài viết này có hữu ích không?