การเชื่อมต่อแบบฝัง

embedded Connect ช่วยลดอุปสรรคและปรับปรุง Conversion Funnel เมื่อผู้ใช้พยายามเชื่อมต่อ AdSense กับแพลตฟอร์มของคุณ

embedded Connect คือไลบรารี JavaScript ขนาดเล็กที่กำหนดจุดเริ่มต้นที่ดีที่สุดสำหรับผู้ใช้รายหนึ่งๆ และแนะนำผู้ใช้ผ่านขั้นตอนการลงชื่อสมัครใช้ AdSense แบบกำหนดเอง ซึ่งจะช่วยผู้ใช้ผ่านขั้นตอนที่จำเป็นทั้งหมดเพื่อให้แสดงโฆษณาได้ ซึ่งจะจัดการกับสถานการณ์ต่างๆ เช่น การพิจารณาว่าผู้ใช้มีบัญชี AdSense หรือไม่ ผู้ใช้ได้ลงนามในข้อกำหนดและเงื่อนไขของ AdSense แล้วหรือยัง ได้เพิ่มเว็บไซต์แพลตฟอร์มของคุณไปยังบัญชี AdSense หรือไม่ และสถานะของเว็บไซต์เป็น "พร้อม"

ฝัง Connect ที่มีตัวเลือก UX ที่จัดการโดย Google ยังสามารถจัดการ UX ที่เกี่ยวข้องในการแสดงสถานะบัญชีและเว็บไซต์แก่ผู้ใช้ โดยนำผู้ใช้ไปยังตำแหน่งที่ถูกต้องใน AdSense เพื่อแก้ไขปัญหาที่อาจเกิดขึ้น

เพื่อช่วยสร้างประสบการณ์สำหรับนักพัฒนาซอฟต์แวร์ ไลบรารีจะออกโค้ดเรียกกลับไปยังแพลตฟอร์มของคุณที่มีรหัสผู้เผยแพร่โฆษณา AdSense ของผู้ใช้ ซึ่งจำเป็นสำหรับการตั้งค่าการแสดงโฆษณาอย่างถูกต้อง

Connected Connect มี 2 ตัวเลือกสำหรับลักษณะของประสบการณ์ของผู้ใช้ ดังนี้

  • UX ที่จัดการโดย Google ใช้วิดเจ็ต Installed Connect ที่จัดการ UX ทั้งหมด วิดเจ็ตนี้จะช่วยผู้ใช้ผ่านขั้นตอนการลงชื่อสมัครใช้และแสดงข้อมูลผู้ใช้เกี่ยวกับสถานะบัญชีและสถานะเว็บไซต์ภายในวิดเจ็ต ตัวเลือกนี้จะให้การเรียกกลับที่มีรหัสผู้เผยแพร่โฆษณา AdSense ซึ่งเรียกใช้เมื่อผู้ใช้เชื่อมต่อบัญชี AdSense เป็นครั้งแรก
  • UX ที่กำหนดเอง ใช้เมธอด adsenseEmbeddedConnect.connect(...) ของ embedded Connect ซึ่งจะทริกเกอร์ขั้นตอนการลงชื่อสมัครใช้ในหน้าต่างใหม่ ตัวเลือกนี้จะให้การติดต่อกลับด้วยรหัสผู้เผยแพร่โฆษณา AdSense และโทเค็นเพื่อการเข้าถึงที่ใช้เพื่อดึงข้อมูลเพิ่มเติมจากบัญชี AdSense โดยใช้ AdSense Management API โดยคุณต้องออกแบบ UX ด้วยตนเองเมื่อใช้ตัวเลือกนี้

การติดตั้งใช้งาน embedded Connect

คุณต้องทำตามขั้นตอนต่อไปนี้เพื่อใช้ Connected Connect

  1. สร้างโปรเจ็กต์ใน Google Cloud (หรือใช้โปรเจ็กต์ที่มีอยู่)
  2. สร้างรหัสไคลเอ็นต์ OAuth
  3. กำหนดค่ารหัสไคลเอ็นต์ OAuth เพื่อใช้กับ embedded Connect
  4. (ไม่บังคับ) ปรับแต่งหน้าจอขอความยินยอม OAuth
  5. เพิ่มไลบรารี embedded Connect JavaScript ลงในหน้าเว็บ
  6. ติดตั้งใช้งานโค้ด 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 ใดสำหรับการผสานรวม Connected Connect คุณจะต้องกำหนดค่ารหัสดังกล่าว

โปรดทำตามขั้นตอนต่อไปนี้

  • จากหน้าข้อมูลเข้าสู่ระบบ ให้คลิกไอคอนดินสอสําหรับรหัสไคลเอ็นต์ที่ต้องการกําหนดค่า
  • ในส่วนต้นทาง JavaScript ที่ได้รับอนุญาต ให้เพิ่ม URI ที่ได้รับอนุญาตให้ส่งคำขอโดยใช้รหัสไคลเอ็นต์ของคุณ โดยปกติแล้ว จะมีการเพิ่ม URI สำหรับเซิร์ฟเวอร์การพัฒนาและสภาพแวดล้อมภายใน (เช่น https://dev.example.com และ http://localhost:5000) คุณควรเพิ่ม URI สำหรับสภาพแวดล้อมของเวอร์ชันที่ใช้งานจริงเพิ่มเติม (เช่น https://example.com)

หน้าจอขอความยินยอม OAuth คือที่ที่ผู้ใช้จะใช้วิธีให้สิทธิ์เข้าถึงข้อมูล AdSense แก่รหัสไคลเอ็นต์ นี่คือส่วนที่สำคัญของวิธีการทำงานของ embedded Connect คุณปรับแต่งหน้าจอนี้ให้รวมชื่อแพลตฟอร์ม โลโก้ ฯลฯ ได้ โปรดไปที่หน้าหน้าจอขอความยินยอม OAuth เพื่อกำหนดค่าการปรับแต่ง คลิก "แก้ไขแอป" ที่ด้านบนของหน้าและทำตามวิซาร์ด

ขั้นตอนที่ 5: ติดตั้งใช้งานไลบรารี JavaScript ของ embedded Connect

ไลบรารีนี้ประกอบด้วยวิธีการต่างๆ ที่ใช้ในการเริ่มต้นการเชื่อมต่อแบบฝัง และมีโค้ดเรียกกลับที่จำเป็นในการดึงและลืมรหัสผู้เผยแพร่โฆษณาของผู้ใช้ นำไปใช้กับส่วนหัวของหน้าเว็บ

สำหรับ 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 ของ Connected Connect ไปพร้อมกับการแยกวิเคราะห์หน้าเว็บ และจะดำเนินการหลังจากแยกวิเคราะห์หน้าเว็บเสร็จแล้ว

พารามิเตอร์ src

แอตทริบิวต์ src มีพารามิเตอร์การค้นหาหลายรายการที่จําเป็นในการเริ่ม embedded Connect ดูการใช้พารามิเตอร์แต่ละรายการด้านล่าง

  • load คือชื่อของฟังก์ชัน JavaScript ส่วนกลางที่จะเรียกใช้เมื่อโหลด API เสร็จสมบูรณ์ คุณจะเลือกชื่อใดก็ได้สำหรับฟังก์ชันนี้
  • hl กำหนดภาษาที่จะใช้ในการแปลทั้งหมด ซึ่งรวมถึง (เช่น) ข้อความในป๊อปอัปการลงชื่อสมัครใช้ ค่านี้เป็นพารามิเตอร์การค้นหาที่ไม่บังคับ และหากไม่มีอยู่ หรือหาก AdSense ไม่สนับสนุนภาษานี้ วิดเจ็ตจะมีค่าเริ่มต้นเป็นภาษาอังกฤษ (สหรัฐอเมริกา) ดูภาษาที่ AdSense รองรับ ค่าพารามิเตอร์ hl ต้องเป็นไปตาม BCP 47 เช่น สำหรับผู้ใช้ภาษาอังกฤษในอังกฤษ สตริงจะเป็น en-GB
  • headless=true ระบุว่าจะใช้ Connected Connect กับตัวเลือก UX ที่กําหนดเองแทน UX ที่จัดการโดย Google

เมื่อเลือกระหว่าง UX ที่ Google จัดการและ UX ที่กำหนดเองแล้ว ให้ดูตัวอย่างโค้ดของแต่ละวิธีด้านล่าง

ขั้นตอนที่ 6: ติดตั้งใช้งานโค้ด embedded Connect

ตามที่ระบุไว้ข้างต้น คุณมี 2 ตัวเลือกสำหรับลักษณะประสบการณ์ของผู้ใช้ดังนี้

เลือกตัวเลือกการใช้งานที่เหมาะกับความต้องการของแพลตฟอร์มของคุณมากที่สุด

UX ที่จัดการโดย Google

ทำตามขั้นตอนเหล่านี้เพื่อให้ Google แสดงผลวิดเจ็ตซึ่งเรียกใช้ขั้นตอนการลงชื่อสมัครใช้และแสดงข้อมูลที่เกี่ยวข้องกับผู้ใช้เกี่ยวกับสถานะบัญชีและเว็บไซต์

สถานะเริ่มต้นของการเชื่อมต่อแบบฝัง

โค้ด embedded Connect มี 2 ส่วน ได้แก่ เครื่องมือแรกคือ <div> ที่ว่างเปล่า ซึ่งระบุว่า Embedded Connect ควรแสดงวิดเจ็ตการลงชื่อสมัครใช้ที่ตําแหน่งใด และอย่างที่สองคือโค้ดที่มีการตั้งค่าการกำหนดค่าและจัดการโค้ดเรียกกลับ

องค์ประกอบ HTML ที่วิดเจ็ต Insert Connect จะแสดงผล

วาง HTML นี้ในหน้าเว็บที่คุณต้องการให้วิดเจ็ต Installed 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
        },
    });
};
ภาพหน้าจอ

วิดเจ็ตการเชื่อมต่อแบบฝังจะมีสถานะหลัก 4 สถานะดังนี้

  1. (ค่าเริ่มต้น) เชื่อมต่อกับ AdSense
  2. กำลังเชื่อมต่อกับ AdSense
  3. กำลังตรวจสอบข้อมูลเว็บไซต์
  4. พบปัญหา
1. (ค่าเริ่มต้น) เชื่อมต่อกับ AdSense

นี่คือสถานะเริ่มต้นที่จะแสดงต่อผู้ใช้เมื่อไม่มีช่อง publisherId ในโค้ด embedded Connect อยู่ การเริ่มต้นโฟลว์การเชื่อมต่อ (ป๊อปอัป) และเมื่อผู้ใช้ดำเนินขั้นตอนการเชื่อมต่อจนเสร็จสมบูรณ์แล้ว จะเรียกโค้ดเรียกกลับ onConnect ให้แสดง

สถานะเริ่มต้นของการเชื่อมต่อแบบฝัง

2. กำลังเชื่อมต่อกับ AdSense

สถานะนี้จะแสดงต่อผู้ใช้เมื่อเริ่มขั้นตอนการเชื่อมต่อ (และมีป๊อปอัป) เมื่อปิดป๊อปอัปหรือทำขั้นตอนเสร็จสมบูรณ์ สถานะนี้จะเปลี่ยนเป็นสถานะอื่น

การเชื่อมต่อแบบฝัง - การเชื่อมต่อกับ AdSense

3. กำลังตรวจสอบข้อมูลเว็บไซต์

เมื่อส่งเว็บไซต์ใหม่ไปยัง AdSense แล้ว จะมีกระบวนการตรวจสอบ โฆษณาแสดงไม่ได้ในช่วงเวลานี้

Insert Connect - การตรวจสอบข้อมูลเว็บไซต์

embedded Connect - การตรวจสอบข้อมูลเว็บไซต์ด้วยเมนูที่เปิดอยู่

องค์ประกอบสำคัญของรีวิวคือการตรวจสอบการเป็นเจ้าของ ซึ่งส่งผ่านได้หลายวิธี เช่น

  • รหัสผู้เผยแพร่โฆษณาบัญชีย่อยแสดงอยู่ในไฟล์ ads.txt
  • รหัสผู้เผยแพร่โฆษณาของบัญชีย่อยแสดงอยู่ในแท็กโฆษณาบนเว็บไซต์ของผู้ใช้
  • เมตาแท็ก google-adsense-child-account จะแสดงอยู่ในเว็บไซต์ของผู้ใช้ เพื่อผลลัพธ์ที่ดีที่สุด โปรดตรวจสอบว่าได้แสดงอยู่ในหน้าแรกของเว็บไซต์ผู้ใช้แล้ว

วิธีที่ดีที่สุดจะขึ้นอยู่กับโครงสร้าง URL ของคุณและปัจจัยอื่นๆ โปรดปรึกษาผู้จัดการฝ่ายดูแลลูกค้าเพื่อหาแนวทางที่ดีที่สุดสำหรับแพลตฟอร์มของคุณ

4. พบปัญหา

หากบัญชีหรือเว็บไซต์ของผู้ใช้มีปัญหาที่ต้องได้รับการแก้ไข ระบบจะแสดงสถานะนี้ให้ผู้ใช้เห็น

embedded Connect - ตรวจพบปัญหา

embedded Connect - พบปัญหาเกี่ยวกับการเปิดเมนู

UX ที่กำหนดเอง

ทำตามขั้นตอนต่อไปนี้ หากคุณต้องการจัดการ UX ด้วยตนเอง และใช้การเรียก API เพื่อทริกเกอร์วิธีการลงชื่อสมัครใช้ด้วยตนเอง

ไลบรารี JavaScript ของการเชื่อมต่อแบบฝัง

หากต้องการใช้ตัวเลือก 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 ตัวอย่างเช่น การระบุปุ่ม 2 ปุ่ม

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