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

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 คุณจะต้องทำตามขั้นตอนต่อไปนี้

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

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

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

หน้าจอขอความยินยอม 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

โค้ด 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 สถานะหลัก ได้แก่

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

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

สถานะเริ่มต้นของ Embedded Connect

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

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

Embedded Connect - การเชื่อมต่อกับ AdSense

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

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

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

Embedded Connect - กำลังตรวจสอบข้อมูลเว็บไซต์โดยเปิดเมนู

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

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

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

4. พบปัญหา

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

Embedded Connect - พบปัญหา

Embedded Connect - ตรวจพบปัญหาที่เมนูเปิดอยู่

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