Kết nối được nhúng
Embedded Connect giúp giảm thiểu phiền hà và cải thiện phễu chuyển đổi khi người dùng cố gắng kết nối AdSense với nền tảng của bạn.
Embedded Connect là một thư viện JavaScript nhỏ xác định điểm bắt đầu tốt nhất cho một người dùng nhất định và hướng dẫn họ thông qua quy trình đăng ký AdSense được tuỳ chỉnh nhằm giúp họ thực hiện tất cả các bước bắt buộc để có thể phân phát quảng cáo. Dịch vụ này xử lý các tình huống như xác định xem người dùng đã có tài khoản AdSense hay chưa, họ đã ký các điều khoản và điều kiện của AdSense, xem họ đã thêm trang web nền tảng của bạn vào tài khoản AdSense hay chưa và trạng thái của trang web có phải là "Sẵn sàng" hay không.
Embedded Connect có tuỳ chọn trải nghiệm người dùng do Google quản lý cũng có thể xử lý trải nghiệm người dùng liên quan đến việc hiển thị trạng thái tài khoản và trang web cho người dùng, hướng dẫn họ đến đúng vị trí trong AdSense để giải quyết mọi vấn đề tiềm ẩn.
Để giúp cải thiện trải nghiệm của nhà phát triển, thư viện cũng đưa ra các lệnh gọi lại đến nền tảng của bạn, trong đó chứa mã nhà xuất bản AdSense của người dùng. Mã này cần thiết để thiết lập hoạt động phân phát quảng cáo đúng cách.
Embedded Connect cung cấp hai tuỳ chọn về trải nghiệm người dùng:
- Trải nghiệm người dùng do Google quản lý. Sử dụng tiện ích Embedded Connect (Kết nối được nhúng) để quản lý toàn bộ trải nghiệm người dùng. Tiện ích này sẽ giúp người dùng thông qua quy trình đăng ký, đồng thời cho người dùng thấy thông tin về trạng thái tài khoản và trang web của họ bên trong tiện ích đó. Lựa chọn này cho phép gọi lại với mã nhà xuất bản AdSense được kích hoạt khi người dùng kết nối tài khoản AdSense lần đầu tiên.
- Trải nghiệm người dùng tuỳ chỉnh. Sử dụng phương thức Embedded Connect
adsenseEmbeddedConnect.connect(...)để kích hoạt quy trình đăng ký trong một cửa sổ mới. Lựa chọn này cho phép bạn gọi lại mã nhà xuất bản AdSense và mã truy cập để tìm nạp thêm thông tin từ tài khoản AdSense bằng cách sử dụng AdSense Management API. Lựa chọn này yêu cầu bạn phải tự thiết kế trải nghiệm người dùng.
Triển khai Embedded Connect
Để sử dụng Embedded Connect, bạn cần làm theo các bước sau:
- Tạo một dự án trong Google Cloud (hoặc sử dụng một dự án có sẵn)
- Tạo mã ứng dụng OAuth
- Định cấu hình mã ứng dụng khách OAuth để sử dụng với Embedded Connect
- (Không bắt buộc) Tuỳ chỉnh màn hình xin phép bằng OAuth
- Thêm thư viện Embedded Connect JavaScript vào trang
- Triển khai mã Embedded Connect
Bước 1: Tạo một dự án Google Cloud mới (hoặc sử dụng một dự án hiện có)
Nếu bạn đã có sẵn một dự án trên Google Cloud, hãy sử dụng dự án đó. Nếu không, hãy làm theo hướng dẫn bên dưới về cách thiết lập một dự án mới:
https://cloud.google.com/resource-manager/docs/creating-managing-projects
Bước 2: Tạo mã ứng dụng khách OAuth
Các dự án trên Google Cloud sẽ có mã ứng dụng khách OAuth mặc định mà bạn có thể sử dụng. Bạn có thể tìm thấy thông tin này bằng cách truy cập vào API và dịch vụ > Thông tin xác thực.
Nếu bạn muốn tạo một mã ứng dụng khách OAuth chuyên biệt, hãy làm theo các bước sau:
- Chuyển đến API và dịch vụ > Thông tin xác thực
- Nhấp vào "+ Tạo thông tin xác thực" ở đầu trang, rồi chọn Mã ứng dụng khách OAuth
- Loại ứng dụng của bạn sẽ là "Ứng dụng web"
- Đặt tên cho ID khách hàng của bạn và nhấp vào "Tạo"
Bước 3: Định cấu hình mã ứng dụng khách OAuth để sử dụng với Embedded Connect
Sau khi quyết định mã ứng dụng khách OAuth mà bạn muốn sử dụng để tích hợp Embedded Connect, bạn cần phải định cấu hình mã ứng dụng đó.
Hãy làm theo các bước sau:
- Trên trang Thông tin đăng nhập, hãy nhấp vào biểu tượng bút chì cho mã ứng dụng khách mà bạn muốn thiết lập
- Trong phần Nguồn gốc JavaScript được cho phép, hãy thêm các URI được phép đưa ra yêu cầu bằng mã ứng dụng khách của bạn. Thông thường, URI cho máy chủ phát triển và môi trường cục bộ sẽ được thêm (ví dụ: https://dev.example.com và http://localhost:5000). Ngoài ra, bạn nên thêm URI cho môi trường sản xuất (ví dụ: https://example.com)
(Không bắt buộc) Bước 4: Tuỳ chỉnh màn hình xin phép bằng OAuth
Màn hình xin phép bằng OAuth là nơi việc sử dụng sẽ cấp cho mã ứng dụng khách của bạn quyền truy cập vào dữ liệu AdSense của họ. Đây là một phần thiết yếu trong cách hoạt động của Embedded Connect. Bạn có thể tuỳ chỉnh màn hình này để thêm tên nền tảng, biểu trưng của mình, v.v.. Hãy truy cập trang màn hình xin phép bằng OAuth để định cấu hình các lựa chọn tuỳ chỉnh. Nhấp vào "Chỉnh sửa ứng dụng" ở đầu trang và làm theo trình hướng dẫn.
Bước 5: Triển khai thư viện Embedded Connect JavaScript
Thư viện này chứa nhiều phương thức dùng để khởi động Kết nối được nhúng, đồng thời cung cấp cho bạn các lệnh gọi lại cần thiết để truy xuất và quên mã nhà xuất bản của người dùng. Hãy triển khai thẻ này cho phần đầu trang.
Đối với trải nghiệm người dùng do Google quản lý:
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}" async defer></script>
Đối với Trải nghiệm người dùng tuỳ chỉnh:
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>
Đảm bảo bạn cung cấp phương thức triển khai cho tên hàm JavaScript được chuyển vào thông số load. Hàm này sẽ được gọi khi API
adsenseEmbeddedConnect đã sẵn sàng để sử dụng.
Thuộc tính thẻ tập lệnh
Lưu ý trong ví dụ trên, có một số thuộc tính được đặt trên thẻ tập lệnh. Sau đây là nội dung giải thích về từng thuộc tính.
src: URL nơi Embedded Connect API được tải từ đó. URL này có thể chứa một số tham số truy vấn, được nêu dưới đây.async: Yêu cầu trình duyệt tải xuống và thực thi tập lệnh một cách không đồng bộ. Khi được thực thi, tập lệnh sẽ gọi hàm được chỉ định bằng tham sốload.defer: khi được đặt, trình duyệt sẽ tải JavaScript Embedded Connect xuống song song để phân tích cú pháp trang và sẽ thực thi sau khi trang hoàn tất phân tích cú pháp.
Tham số src
Thuộc tính src chứa một số tham số truy vấn cần thiết để khởi chạy Embedded Connect. Hãy xem phần bên dưới để biết cách sử dụng từng thông số.
loadlà tên của một hàm JavaScript chung sẽ được gọi khi API đã tải hoàn toàn. Bạn có thể chọn bất kỳ tên nào cho hàm này.hlchỉ định ngôn ngữ cần sử dụng cho toàn bộ quá trình bản địa hoá, bao gồm cả văn bản trong cửa sổ bật lên để đăng ký. Đây là tham số truy vấn không bắt buộc và khi không hiện diện hoặc nếu ngôn ngữ này không được AdSense hỗ trợ, tiện ích này sẽ mặc định là tiếng Anh Mỹ. Xem các ngôn ngữ AdSense hỗ trợ. Giá trị tham sốhlphải tuân theo BCP 47. Ví dụ: đối với người dùng tiếng Anh (Anh) thì chuỗi sẽ làen-GB.headless=truecho biết rằng Embedded Connect sẽ được sử dụng với tuỳ chọn Trải nghiệm người dùng tuỳ chỉnh thay vì trải nghiệm người dùng do Google quản lý.
Hiện tại, bạn đã chọn giữa trải nghiệm người dùng do Google quản lý và trải nghiệm người dùng tuỳ chỉnh, hãy tiếp tục xem các đoạn mã ví dụ cho từng phương pháp ở bên dưới.
Bước 6: Triển khai mã Embedded Connect
Như đã đề cập ở trên, có hai tuỳ chọn cho trải nghiệm người dùng:
Hãy chọn phương án triển khai phù hợp nhất với nhu cầu của nền tảng của bạn.
Trải nghiệm người dùng do Google quản lý
Hãy làm theo các bước sau để Google hiển thị tiện ích giúp kích hoạt quy trình đăng ký và hiển thị cho người dùng thông tin liên quan về trạng thái tài khoản cũng như trang web của họ.
Mã Embedded Connect có hai thành phần. Đầu tiên là một <div> trống, chỉ định vị trí Embedded Connect sẽ hiển thị tiện ích đăng ký. Và thứ hai là mã nơi cấu hình được thiết lập và các lệnh gọi lại được quản lý.
Phần tử HTML mà tiện ích Embedded Connect hiển thị
Đặt HTML này trên trang mà bạn muốn tiện ích Embedded Connect kết xuất:
<div id="adsenseEmbeddedConnect"></div>
Mã Embedded Connect
Tiếp theo, bên dưới thư viện Embedded Connect nhưng phía trên phần tử div, hãy đặt mã cấu hình:
function initEmbeddedConnect() {
adsenseEmbeddedConnect.init({
// <div> to show the Embedded Connect widget in
'divId': 'adsenseEmbeddedConnect',
// OAuth client ID from step 2
'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
// Access token from the Google Identity APIs, see
// https://developers.google.com/identity/oauth2/web/guides/use-token-model
// Use the following scope when requesting the access token:
// https://www.googleapis.com/auth/adsense.readonly
'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',
// Login hint, an optional parameter which suppresses the account
// chooser and either pre-fills the email box on the sign-in form,
// or selects the proper session (if the user is using multiple
// sign-in)
'loginHint': 'user@example.com',
// Child site (which is added to AdSense as part of the Embedded Connect flow)
// Consult with your account manager to ensure this value is set correctly for your platform
'siteUrl': 'site.example.com',
// Optional parameter, the publisher ID of the user.
// When set, the Embedded Connect widget will display the state of the user's AdSense account.
// When unset, the Embedded Connect widget will show the default state which triggers the connection flow.
'publisherId': "pub-0000000000000000",
'onConnect': function(pid) {
// Your custom code to send the publisher ID (pid) to your server for it to be saved.
// The onConnect function is called when the user has completed all the onboarding steps
},
'onDisconnect': function() {
// Your custom code to forget the publisher ID.
// This onDisconnect function is called when the user has clicked the "Disconnect" button in the Embedded Connect widget
},
});
};
Ảnh chụp màn hình
Tiện ích Embedded Connect có 4 trạng thái chính:
- (Mặc định) Kết nối với AdSense
- Kết nối với AdSense
- Xem xét thông tin trang web
- Đã phát hiện thấy vấn đề
1. (Mặc định) Kết nối với AdSense
Đây là trạng thái mặc định mà người dùng nhìn thấy khi không có trường publisherId trong mã Embedded Connect (Kết nối được nhúng). Thao tác này sẽ bắt đầu luồng kết nối (bật lên) và khi người dùng hoàn tất thành công luồng, sẽ kích hoạt lệnh gọi lại onConnect.
2. Kết nối với AdSense
Người dùng sẽ thấy trạng thái này khi họ bắt đầu quy trình kết nối (và sẽ có cửa sổ bật lên). Sau khi cửa sổ bật lên hoặc khi quy trình hoàn tất, trạng thái này sẽ thay đổi thành một trong các trạng thái khác.
3. Xem xét thông tin trang web
Sau khi bạn gửi trang web mới cho AdSense, quy trình xem xét sẽ diễn ra. Quảng cáo không thể phân phát trong thời gian này.
Một phần quan trọng của quy trình xem xét là kiểm tra quyền sở hữu. Quy trình này có thể được thông qua theo một số cách, chẳng hạn như:
- mã nhà xuất bản của tài khoản con có trong tệp ads.txt
- mã nhà xuất bản của tài khoản con có trong thẻ quảng cáo trên trang web của người dùng
- thẻ meta google-adsense-child-account hiển thị trên trang web của người dùng. Để có kết quả tốt nhất, hãy đảm bảo rằng thông tin này xuất hiện trên trang chủ trang web của người dùng.
Cách tốt nhất sẽ phụ thuộc vào cấu trúc URL của bạn và một số yếu tố khác. Vui lòng tham khảo ý kiến của người quản lý tài khoản để có phương pháp phù hợp nhất cho nền tảng của bạn.
4. Đã phát hiện thấy vấn đề
Nếu tài khoản hoặc trang web của người dùng có vấn đề cần được giải quyết, thì người dùng sẽ thấy trạng thái này.
Trải nghiệm người dùng tuỳ chỉnh
Hãy làm theo các bước sau nếu bạn muốn tự quản lý trải nghiệm người dùng và sử dụng lệnh gọi API để kích hoạt phương thức đăng ký theo cách thủ công.
Thư viện Embedded JavaScript kết nối
Để sử dụng chế độ Trải nghiệm người dùng tuỳ chỉnh, bạn cần đặt tham số headless=true trong thuộc tính src. Ví dụ:
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>
Cung cấp nút kết nối và ngắt kết nối
Khi API adsenseEmbeddedConnect đã sẵn sàng sử dụng (như đã được hàm JavaScript truyền vào tham số load xác minh), hãy cung cấp phương thức triển khai để kết nối và ngắt kết nối khỏi AdSense. Ví dụ: bằng cách cung cấp 2 nút:
<button onclick="connectAdSense()">Connect to AdSense</button>
<button onclick="disconnectAdSense()">Disconnect account</button>
Tuỳ thuộc vào việc bạn có lưu mã nhà xuất bản từ người dùng hay không, bạn có thể chọn nút sẽ hiển thị.
Mã kết nối
function connectAdSense(){
adsenseEmbeddedConnect.connect({
// OAuth client ID
'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
// Access token from the Google Identity APIs, see
// https://developers.google.com/identity/oauth2/web/guides/use-token-model
// Use the following scope when requesting the access token:
// https://www.googleapis.com/auth/adsense.readonly
'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',
// Child site (which is added to AdSense as part of the Embedded Connect flow)
// Consult with your account manager to ensure this value is set correctly for your platform
'siteUrl': 'site.example.com',
'onConnect': function(response) {
// Your custom code to send the publisher ID (response[publisherId]) to your server for it to be saved.
// The onConnect function is called when the user has completed all the onboarding steps
// Note that you'll additionally receive an OAuth2 access token (response[token]) which can be used with the AdSense Management API to perform other operations
},
'onCancel': function() {
// This callback is called if the user closes the popup window without completing the sign-up flow
}
});
}
Mã ngắt kết nối
function disconnectAdSense(){
// Your custom code to forget the publisherId from your server.
}