การเชื่อมต่อแบบฝัง
Embedded Connect ช่วยลดความติดขัดและปรับปรุง Conversion Funnel เมื่อผู้ใช้พยายามเชื่อมต่อ AdSense กับแพลตฟอร์มของคุณ
Embedded Connect เป็นไลบรารี JavaScript ขนาดเล็กที่กำหนดจุดเริ่มต้นที่ดีที่สุดสำหรับผู้ใช้หนึ่งๆ และแนะนํากระบวนการลงชื่อสมัครใช้ AdSense ที่กําหนดเอง ซึ่งจะช่วยให้ผู้ใช้ผ่านขั้นตอนที่จําเป็นทั้งหมดเพื่อให้แสดงโฆษณาได้ โดยจะจัดการกับสถานการณ์ต่างๆ ซึ่งรวมถึงการพิจารณาว่าผู้ใช้มีบัญชี AdSense หรือไม่ ได้ลงนามในข้อกําหนดและเงื่อนไขของ AdSense หรือไม่ ได้เพิ่มเว็บไซต์แพลตฟอร์มของคุณลงในบัญชี AdSense หรือไม่ และสถานะของเว็บไซต์คือ "พร้อม" หรือไม่
Embedded Connect ที่มีตัวเลือก UX ที่จัดการโดย Google ยังจัดการ UX ที่เกี่ยวข้องกับการแสดงสถานะบัญชีและหน้าเว็บไซต์แก่ผู้ใช้ได้ด้วย โดยแนะนําให้ผู้ใช้ไปยังตำแหน่งที่ถูกต้องใน AdSense เพื่อแก้ไขปัญหาที่อาจเกิดขึ้น
เพื่อช่วยประสบการณ์การใช้งานของนักพัฒนาซอฟต์แวร์ ไลบรารียังออก Callback ไปยังแพลตฟอร์มของคุณที่มีรหัสผู้เผยแพร่โฆษณา AdSense ของผู้ใช้ ซึ่งจำเป็นสำหรับการตั้งค่าการแสดงโฆษณาอย่างถูกต้อง
Embedded Connect มี 2 ตัวเลือกในการแสดงประสบการณ์ของผู้ใช้ ดังนี้
- UX ที่จัดการโดย Google ให้ใช้วิดเจ็ต Embedded Connect ที่จัดการ UX ทั้งหมด วิดเจ็ตนี้จะช่วยผู้ใช้ผ่านขั้นตอนการลงชื่อสมัครใช้ และแสดงข้อมูลผู้ใช้เกี่ยวกับสถานะบัญชีและเว็บไซต์ภายในวิดเจ็ต ตัวเลือกนี้จะให้การติดต่อกลับพร้อมด้วยรหัสผู้เผยแพร่โฆษณาของ AdSense ที่ทริกเกอร์เมื่อผู้ใช้เชื่อมต่อบัญชี AdSense เป็นครั้งแรก
- UX ที่กำหนดเอง ใช้เมธอด
adsenseEmbeddedConnect.connect(...)
Embedded Connect ซึ่งจะทริกเกอร์ขั้นตอนการลงชื่อสมัครใช้ในหน้าต่างใหม่ ตัวเลือกนี้จะให้รหัสผู้เผยแพร่โฆษณา AdSense และโทเค็นเพื่อการเข้าถึงที่ใช้เพื่อดึงข้อมูลเพิ่มเติมจากบัญชี AdSense โดยใช้ API การจัดการ AdSense ซึ่งคุณต้องออกแบบ UX ด้วยตัวเองจึงจะใช้ตัวเลือกนี้ได้
การติดตั้งใช้งาน Embedded Connect
ในการใช้ Embedded Connect คุณจะต้องทำตามขั้นตอนต่อไปนี้
- สร้างโปรเจ็กต์ใน Google Cloud (หรือใช้โปรเจ็กต์ที่มีอยู่)
- สร้างรหัสไคลเอ็นต์ OAuth
- กำหนดค่ารหัสไคลเอ็นต์ OAuth สำหรับใช้กับ Embedded Connect
- (ไม่บังคับ) ปรับแต่งหน้าจอขอความยินยอม OAuth
- เพิ่มไลบรารี JavaScript Embedded Connect ลงในหน้าเว็บ
- ติดตั้งใช้งานโค้ด Embedded Connect
ขั้นตอนที่ 1: สร้างโปรเจ็กต์ Google Cloud ใหม่ (หรือใช้โปรเจ็กต์ที่มีอยู่)
หากคุณมีโปรเจ็กต์ Google Cloud อยู่แล้ว คุณก็สามารถใช้โปรเจ็กต์นั้นได้ หรือทำตามคำแนะนำด้านล่างเกี่ยวกับการตั้งค่าโปรเจ็กต์ใหม่
https://cloud.google.com/resource-manager/docs/creating-managing-projects
ขั้นตอนที่ 2: สร้างรหัสไคลเอ็นต์ OAuth
โปรเจ็กต์ Google Cloud จะมีรหัสไคลเอ็นต์ OAuth เริ่มต้นที่คุณใช้ได้ คุณดูข้อมูลนี้ได้โดยไปที่ API และ บริการ > ข้อมูลเข้าสู่ระบบ
หากต้องการสร้างรหัสไคลเอ็นต์ OAuth โดยเฉพาะ ให้ทำตามขั้นตอนต่อไปนี้
- ไปที่ API และ บริการ > ข้อมูลเข้าสู่ระบบ
- คลิก "+ สร้างข้อมูลเข้าสู่ระบบ" ที่ด้านบนของหน้า แล้วเลือกรหัสไคลเอ็นต์ OAuth
- ประเภทแอปพลิเคชันของคุณจะเป็น "เว็บแอปพลิเคชัน"
- ตั้งชื่อรหัสลูกค้าแล้วคลิก "สร้าง"
ขั้นตอนที่ 3: กำหนดค่ารหัสไคลเอ็นต์ OAuth เพื่อใช้กับ Embedded Connect
เมื่อเลือกรหัสไคลเอ็นต์ OAuth ที่ต้องการใช้สำหรับการผสานรวม Embedded Connect ได้แล้ว คุณจะต้องกำหนดค่า
โปรดทำตามขั้นตอนต่อไปนี้
- จากหน้าข้อมูลเข้าสู่ระบบ ให้คลิกไอคอนดินสอของรหัสไคลเอ็นต์ที่ต้องการกำหนดค่า
- ในส่วนต้นทาง JavaScript ที่ได้รับอนุญาต ให้เพิ่ม URI ที่ได้รับอนุญาตให้ส่งคำขอโดยใช้รหัสไคลเอ็นต์ โดยปกติแล้วจะมีการเพิ่ม URI สำหรับเซิร์ฟเวอร์การพัฒนาและสภาพแวดล้อมในเครื่อง (เช่น https://dev.example.com และ http://localhost:5000) คุณควรเพิ่ม URI สำหรับสภาพแวดล้อมการใช้งานจริง (เช่น https://example.com)
(ไม่บังคับ) ขั้นตอนที่ 4: ปรับแต่งหน้าจอขอความยินยอม OAuth
หน้าจอขอความยินยอม OAuth คือที่ที่ผู้ใช้ให้สิทธิ์รหัสไคลเอ็นต์ของคุณในการเข้าถึงข้อมูล AdSense ส่วนนี้เป็นส่วนสำคัญในวิธีการทำงานของ Embedded Connect คุณปรับแต่งหน้าจอนี้ให้รวมชื่อแพลตฟอร์ม โลโก้ ฯลฯ ได้ ไปที่หน้าหน้าจอขอความยินยอม OAuth เพื่อกำหนดค่าการปรับแต่ง คลิก "แก้ไขแอป" ที่ด้านบนของหน้าและติดตามวิซาร์ด
ขั้นตอนที่ 5: ติดตั้งไลบรารี Embedded Connect JavaScript
ไลบรารีนี้ประกอบด้วยเมธอดต่างๆ ที่ใช้ในการเริ่มต้นการเชื่อมต่อแบบฝัง และให้ Callback ที่จำเป็นสำหรับคุณในการดึงและลืมรหัสผู้เผยแพร่โฆษณาของผู้ใช้ วางส่วนนี้ในส่วนหัวของหน้าเว็บ
สำหรับ UX ที่มีการจัดการโดย Google
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}" async defer></script>
สำหรับ UX ที่กำหนดเอง
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>
ตรวจสอบว่าคุณระบุการติดตั้งใช้งานสำหรับชื่อฟังก์ชัน JavaScript ที่ส่งผ่าน
ลงในพารามิเตอร์ load
จะมีการเรียกใช้ฟังก์ชันเมื่อ
adsenseEmbeddedConnect
API พร้อมใช้งานแล้ว
แอตทริบิวต์แท็กสคริปต์
สังเกตในตัวอย่างด้านบนว่ามีแอตทริบิวต์หลายรายการได้รับการตั้งค่าในแท็กสคริปต์ คำอธิบายของแต่ละแอตทริบิวต์มีดังนี้
src
: URL ที่ใช้โหลด Embedded Connect API URL อาจมีพารามิเตอร์การค้นหาหลายรายการตามที่ระบุไว้ด้านล่างasync
: ขอให้เบราว์เซอร์ดาวน์โหลดและเรียกใช้สคริปต์แบบไม่พร้อมกัน เมื่อเรียกใช้สคริปต์ สคริปต์จะเรียกใช้ฟังก์ชันที่ระบุโดยใช้พารามิเตอร์load
defer
: เมื่อตั้งค่าแล้ว เบราว์เซอร์จะดาวน์โหลด JavaScript Embedded Connect ไปพร้อมกับการแยกวิเคราะห์หน้าเว็บ และจะดำเนินการหลังจากที่แยกวิเคราะห์หน้าเว็บเสร็จแล้ว
src
พารามิเตอร์
แอตทริบิวต์ src
มีพารามิเตอร์การค้นหาหลายรายการที่จำเป็นต่อการเริ่มต้น Embedded Connect ดูการใช้พารามิเตอร์แต่ละรายการด้านล่าง
load
คือชื่อของฟังก์ชัน JavaScript ส่วนกลางที่จะถูกเรียกเมื่อโหลด API เสร็จแล้ว คุณสามารถเลือกชื่อใดๆ ให้กับฟังก์ชันนี้ได้hl
จะระบุภาษาที่จะใช้สำหรับการแปลทั้งหมด รวมถึง (ตัวอย่างเช่น) ข้อความในป๊อปอัปการลงชื่อสมัครใช้ นี่เป็นพารามิเตอร์ข้อความค้นหาซึ่งไม่บังคับ และเมื่อไม่มี หรือหาก AdSense ไม่รองรับภาษาดังกล่าว วิดเจ็ตจะตั้งเป็นภาษาอังกฤษแบบสหรัฐอเมริกาโดยค่าเริ่มต้น ดูภาษาที่ AdSense รองรับ ค่าพารามิเตอร์hl
ต้องเป็นไปตาม BCP 47 เช่น สำหรับผู้ใช้ภาษาอังกฤษแบบบริติช สตริงจะเป็นen-GB
headless=true
ระบุว่าจะมีการใช้ Embedded Connect กับตัวเลือก UX ที่กำหนดเองแทน UX ที่จัดการโดย Google
เมื่อเลือกระหว่าง UX ที่มีการจัดการโดย Google และ UX ที่กำหนดเองแล้ว ให้ไปดูตัวอย่างโค้ดของแต่ละวิธีด้านล่าง
ขั้นตอนที่ 6: ติดตั้งใช้งานโค้ด Embedded Connect
ตามที่กล่าวไว้ข้างต้น ประสบการณ์ของผู้ใช้จะมี 2 ตัวเลือกดังนี้
เลือกตัวเลือกการใช้งานที่เหมาะกับความต้องการของแพลตฟอร์มของคุณมากที่สุด
UX ที่จัดการโดย Google
ทำตามขั้นตอนเหล่านี้เพื่อให้ Google แสดงผลวิดเจ็ตซึ่งจะเรียกใช้ขั้นตอนการลงชื่อสมัครใช้ และแสดงข้อมูลที่เกี่ยวข้องแก่ผู้ใช้เกี่ยวกับสถานะบัญชีและเว็บไซต์
โค้ด Embedded Connect มีองค์ประกอบ 2 อย่าง รายการแรกคือ <div>
ที่ว่างเปล่า ซึ่งระบุตำแหน่งที่ Embedded Connect ควรแสดงผลวิดเจ็ตการลงชื่อสมัครใช้ อย่างที่สองคือโค้ดที่มีการกำหนดค่าและจัดการ Callback
องค์ประกอบ HTML ที่วิดเจ็ต Embedded Connect แสดงผล
วาง HTML นี้ในหน้าเว็บที่คุณต้องการให้วิดเจ็ต Embedded Connect แสดงผล:
<div id="adsenseEmbeddedConnect"></div>
รหัส Embedded Connect
ถัดไป ให้วางโค้ดการกําหนดค่าไว้ใต้ไลบรารี Embedded Connect แต่เหนือองค์ประกอบ div
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
},
});
};
ภาพหน้าจอ
วิดเจ็ต Embedded Connect มี 4 สถานะหลัก ได้แก่
- (ค่าเริ่มต้น) เชื่อมต่อกับ AdSense
- กำลังเชื่อมต่อกับ AdSense
- กำลังตรวจสอบข้อมูลเว็บไซต์
- พบปัญหา
1. (ค่าเริ่มต้น) เชื่อมต่อกับ AdSense
นี่คือสถานะเริ่มต้นที่จะแสดงต่อผู้ใช้เมื่อไม่มีช่อง publisherId
ในรหัส Embedded Connect โดยจะเริ่มต้นโฟลว์การเชื่อมต่อ (ป๊อปอัป) และเมื่อผู้ใช้ดำเนินการตามขั้นตอนจนเสร็จสิ้น ระบบจะเรียกใช้ Callback ของ onConnect
2. กำลังเชื่อมต่อกับ AdSense
สถานะนี้จะแสดงต่อผู้ใช้เมื่อเริ่มขั้นตอนการเชื่อมต่อ (และมีป๊อปอัปปรากฏขึ้น) เมื่อปิดป๊อปอัปหรือดำเนินการตามขั้นตอนเสร็จสมบูรณ์แล้ว สถานะนี้จะเปลี่ยนเป็นรัฐอื่น
3. กำลังตรวจสอบข้อมูลเว็บไซต์
เมื่อส่งเว็บไซต์ใหม่ไปยัง AdSense แล้ว ก็จะมีกระบวนการตรวจสอบ แสดงโฆษณาในช่วงเวลานี้ไม่ได้
องค์ประกอบสำคัญของรีวิวคือการตรวจสอบการเป็นเจ้าของ ซึ่งสามารถส่งได้หลายวิธี เช่น
- มีรหัสผู้เผยแพร่โฆษณาของบัญชีย่อยในไฟล์ ads.txt
- รหัสผู้เผยแพร่โฆษณาของบัญชีย่อยมีอยู่ในแท็กโฆษณาบนเว็บไซต์ของผู้ใช้
- เมตาแท็ก google-adsense-child-account มีอยู่ในเว็บไซต์ของผู้ใช้ เพื่อผลลัพธ์ที่ดีที่สุด โปรดตรวจสอบว่ามีการปรากฏอยู่ในหน้าแรกของเว็บไซต์ของผู้ใช้
วิธีการที่ดีที่สุดจะขึ้นอยู่กับโครงสร้าง URL และปัจจัยอื่นๆ โปรดปรึกษาผู้จัดการฝ่ายดูแลลูกค้าเพื่อหาวิธีที่ดีที่สุดสำหรับแพลตฟอร์มของคุณ
4. พบปัญหา
หากบัญชีหรือเว็บไซต์ของผู้ใช้มีปัญหาที่ต้องได้รับการแก้ไข ระบบจะแสดงสถานะนี้ต่อผู้ใช้
UX ที่กำหนดเอง
ทําตามขั้นตอนต่อไปนี้หากต้องการจัดการ UX ด้วยตนเอง และใช้การเรียก API เพื่อเรียกใช้วิธีการลงชื่อสมัครใช้ด้วยตนเอง
ไลบรารี JavaScript Embedded Connect
หากต้องการใช้ตัวเลือก UX ที่กำหนดเอง คุณจะต้องตั้งค่าพารามิเตอร์ headless=true
ในแอตทริบิวต์ src
เช่น
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>
จัดเตรียมปุ่มเชื่อมต่อและยกเลิกการเชื่อมต่อ
เมื่อ adsenseEmbeddedConnect
API พร้อมใช้งานแล้ว (ตามที่ยืนยันโดย
ฟังก์ชัน JavaScript ที่ส่งผ่านพารามิเตอร์ load
) ระบุการติดตั้งใช้งาน
สำหรับการเชื่อมต่อและยกเลิกการเชื่อมต่อจาก AdSense ตัวอย่างเช่น การระบุ
ปุ่ม:
<button onclick="connectAdSense()">Connect to AdSense</button>
<button onclick="disconnectAdSense()">Disconnect account</button>
คุณเลือกได้ว่าจะแสดงปุ่มใด โดยขึ้นอยู่กับว่าคุณมีรหัสผู้เผยแพร่โฆษณาบันทึกมาจากผู้ใช้หรือไม่
รหัสการเชื่อมต่อ
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
}
});
}
รหัสยกเลิกการเชื่อมต่อ
function disconnectAdSense(){
// Your custom code to forget the publisherId from your server.
}