ผสานรวม Pangle กับสื่อกลาง AdMob

คู่มือนี้จะแสดงวิธีใช้ Google Mobile Ads SDK for React Native เพื่อโหลดและแสดงโฆษณา Display จาก Pangle โดยใช้สื่อกลาง ซึ่งครอบคลุมทั้งการผสานรวม Waterfall และการเสนอราคา โดยจะครอบคลุมวิธีเพิ่ม Pangle ลงในการกำหนดค่าสื่อกลางของหน่วยโฆษณา และวิธีผสานรวม SDK และอะแดปเตอร์ของ Pangle เข้ากับแอป React Native

การผสานรวมและรูปแบบโฆษณาที่รองรับ

อะแดปเตอร์สื่อกลาง AdMob สำหรับ Pangle มีความสามารถดังต่อไปนี้

การผสานรวม
การเสนอราคา  1
น้ำตก
รูปแบบ
การเปิดแอป  2
แบนเนอร์  2
โฆษณาคั่นระหว่างหน้า
ได้รับรางวัลแล้ว
โฆษณาคั่นระหว่างหน้าที่มีการให้รางวัล
เนทีฟ  2

1 แหล่งที่มาของโฆษณาซึ่งใช้การเสนอราคาของ Pangle ที่พร้อมใช้งาน ได้แก่ Pangle US, Pangle KR และ Pangle ROW

2 แหล่งที่มาของโฆษณาซึ่งใช้การเสนอราคาของ Pangle ต่อไปนี้ไม่รองรับรูปแบบนี้: Pangle US

ข้อกำหนดเบื้องต้น

  • Google Mobile Ads SDK for React Native เวอร์ชันล่าสุด
  • [สําหรับการเสนอราคาของ Pangle US]: ใช้อะแดปเตอร์ Pangle เวอร์ชัน N/A ขึ้นไป
  • เฟรมเวิร์ก React Native เวอร์ชัน 0.85.0 ขึ้นไป
  • วิธีติดตั้งใช้งานใน Android
    • Android API ระดับ 24 ขึ้นไป
  • วิธีติดตั้งใช้งานใน iOS
    • เป้าหมายการติดตั้งใช้งาน iOS เวอร์ชัน 13.0 ขึ้นไป
  • โปรเจ็กต์ React Native ที่ใช้งานได้ซึ่งกำหนดค่าด้วย Google Mobile Ads SDK for React Native ดูรายละเอียดได้ที่หัวข้อตั้งค่า Google Mobile Ads SDK for React Native
    • ตรวจสอบว่าคุณได้ดาวน์โหลดและแตกโฟลเดอร์ adapters จากโฟลเดอร์ gma-sdk-react-native แล้ว หากไม่มีโฟลเดอร์ adapters ให้ทำตามขั้นตอนที่ 1, 2 และ 3 ในหัวข้อติดตั้ง Google Mobile Ads SDK for React Native
  • ตั้งค่าสื่อกลาง AdMob

ขั้นตอนที่ 1: ตั้งค่าการกำหนดค่าใน UI ของ Pangle

ลงชื่อสมัครใช้หรือเข้าสู่ระบบบัญชี Pangle

เพิ่มแอปพลิเคชันใหม่

ไปที่แท็บ Applications แล้วคลิกปุ่ม Add App

เลือกระบบปฏิบัติการที่ต้องการสร้างแอปพลิเคชัน แล้วกรอกข้อมูลที่เหลือในแบบฟอร์ม จากนั้นคลิกส่ง

Android

iOS

จดบันทึกรหัสแอปของแอปพลิเคชัน

Android

iOS

สร้างตำแหน่งโฆษณา

เมื่อสร้างแอปพลิเคชันแล้ว ให้คลิกปุ่มเพิ่มเพื่อสร้างตำแหน่งโฆษณา

Android

iOS

การเสนอราคา

เลือกรูปแบบโฆษณาและชื่อตำแหน่งโฆษณา แล้วเลือกการเสนอราคาในแอปเป็นประเภทการกำหนดราคา กรอกข้อมูลที่เหลือในแบบฟอร์ม แล้วคลิกส่ง

เมื่อสร้างตำแหน่งโฆษณาแล้ว ให้จดรหัสตำแหน่งโฆษณาไว้

Android

iOS

น้ำตก

เลือกรูปแบบโฆษณาและชื่อตำแหน่งโฆษณา รวมถึงเลือก CPM ทั่วโลกเป็นประเภทการกำหนดราคา กรอกข้อมูลที่เหลือในแบบฟอร์ม แล้วคลิกส่ง

เมื่อสร้างตำแหน่งโฆษณาแล้ว ให้จดรหัสตำแหน่งโฆษณาไว้

Android

iOS

ค้นหาคีย์ API ของ Pangle Reporting

การเสนอราคา

ขั้นตอนนี้ไม่จำเป็นสำหรับการผสานรวมการเสนอราคา

น้ำตก

จดรหัสผู้ใช้ที่มุมซ้ายล่างของหน้า

คลิกการผสานรวม > SDK และ API > Pangle Reporting API 2.0 จดบันทึกรหัสบทบาทและคีย์ความปลอดภัย

อัปเดต app-ads.txt

ผู้ขายที่ได้รับอนุญาตสำหรับแอปหรือ app-ads.txt เป็นความคิดริเริ่มของ IAB Tech Lab ที่ช่วยตรวจสอบว่าคุณจะขายพื้นที่โฆษณาในแอปผ่านช่องทางที่คุณได้รับอนุญาตเท่านั้น คุณจะต้องใช้ไฟล์ app-ads.txt เพื่อป้องกันไม่ให้เสียรายได้จากโฆษณาเป็นจำนวนมาก หากยังไม่ได้ดำเนินการ ให้สร้างไฟล์ app-ads.txt สำหรับแอป

หากต้องการใช้ app-ads.txt สำหรับ Pangle โปรดดูวิธีเพิ่ม Pangle ลงในไฟล์ app-ads.txt

เปิดโหมดทดสอบ

ทำตามวิธีการในคู่มือวิธีเพิ่มโฆษณาทดสอบของ Pangle เพื่อเปิดใช้โฆษณาทดสอบของ Pangle

ขั้นตอนที่ 2: ตั้งค่าดีมานด์ของ Pangle ใน UI ของ AdMob

กำหนดการตั้งค่าสื่อกลางสำหรับหน่วยโฆษณา

Android

ดูวิธีการได้ที่ขั้นตอนที่ 2 ในคู่มือสำหรับ Android

iOS

ดูวิธีการได้ที่ขั้นตอนที่ 2 ในคู่มือสำหรับ iOS

เพิ่ม DSP ของ Pangle ลงในรายชื่อพาร์ทเนอร์โฆษณาตาม GDPR และกฎระเบียบของรัฐในสหรัฐอเมริกา

ทำตามขั้นตอนใน การตั้งค่ากฎระเบียบของยุโรป และ การตั้งค่ากฎระเบียบของรัฐในสหรัฐอเมริกา เพื่อเพิ่ม Pangle DSP ลงในรายชื่อพาร์ทเนอร์โฆษณาตามกฎระเบียบของยุโรปและรัฐในสหรัฐอเมริกาใน UI ของ AdMob

ขั้นตอนที่ 3: นำเข้า SDK และอะแดปเตอร์ของ Pangle

ติดตั้งGoogle Mobile Ads SDK for React Nativeอะแดปเตอร์สื่อกลางสําหรับ Pangle ในไดเรกทอรีรากของโปรเจ็กต์ ดำเนินการต่อไปนี้ให้เสร็จสมบูรณ์

  1. คัดลอกไฟล์ tar ของอะแดปเตอร์ Google Mobile Ads SDK for React Native จากไดเรกทอรี gma-sdk-react-native/adapters/pangle/ ไปยังไดเรกทอรี local_packages/ ของโปรเจ็กต์ หากไม่มีโฟลเดอร์ adapters โปรดดูข้อกำหนดเบื้องต้น

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/adapters/pangle/gma-mediation-pangle-0.1.0.tgz local_packages/

    แทนที่ EXTRACT_DIR ด้วยเส้นทางไปยังไดเรกทอรีที่คุณแตกไฟล์เก็บถาวร

  2. ติดตั้งแพ็กเกจอะแดปเตอร์โดยใช้เครื่องมือจัดการแพ็กเกจที่ต้องการ ดังนี้

    npm

    npm install ./local_packages/gma-mediation-pangle-0.1.0.tgz

    ไหมพรม

    yarn add ./local_packages/gma-mediation-pangle-0.1.0.tgz

  3. หากคุณกำลังสร้างสำหรับ Android ให้เพิ่มที่เก็บต่อไปนี้ลงในไฟล์ build.gradle ในไดเรกทอรี android ของโปรเจ็กต์

    repositories {
    google()
    mavenCentral()
    maven {
        url = uri("https://artifact.bytedance.com/repository/pangle/")
    }
}

ขั้นตอนที่ 4: ใช้การตั้งค่าความเป็นส่วนตัวใน Pangle SDK

เพื่อให้เป็นไปตามนโยบายความยินยอมของผู้ใช้ EU ของ Google คุณต้องเปิดเผยข้อมูลบางอย่างต่อผู้ใช้ในเขตเศรษฐกิจยุโรป (EEA), สหราชอาณาจักร และสวิตเซอร์แลนด์ และได้รับความยินยอมในการใช้คุกกี้หรือพื้นที่เก็บข้อมูลอื่นในเครื่องในกรณีที่กฎหมายกำหนด รวมถึงการรวบรวม การแชร์ และการใช้ข้อมูลส่วนตัวสำหรับการปรับโฆษณาตามโปรไฟล์ของผู้ใช้ นโยบายนี้เป็นผลมาจากข้อกำหนดด้าน ePrivacy และกฎระเบียบให้ความคุ้มครองข้อมูลส่วนบุคคลของผู้บริโภค (GDPR) ของสหภาพยุโรป คุณมีหน้าที่ ตรวจสอบว่ามีการส่งต่อความยินยอมไปยังแหล่งที่มาของโฆษณาแต่ละแห่งใน เชนสื่อกลาง (Mediation Chain)

อะแดปเตอร์ React Native ของ Pangle เวอร์ชัน 0.1.0 ขึ้นไปรองรับการส่งสัญญาณความยินยอมตาม GDPR จาก UMP SDK และแพลตฟอร์มการจัดการความยินยอมที่ผสานรวมกับข้อกำหนดความยินยอมเพิ่มเติมของ Google ไปยัง SDK ของ Pangle

กฎหมายคุ้มครองความเป็นส่วนตัวของรัฐในสหรัฐอเมริกา

กฎหมายคุ้มครองความเป็นส่วนตัวของรัฐในสหรัฐอเมริกากำหนดให้ผู้ใช้มีสิทธิ์เลือกไม่รับ "การขาย" "ข้อมูลส่วนบุคคล" (ตามที่กฎหมายให้คำจำกัดความไว้) โดยเว็บไซต์จะต้องให้ตัวเลือกการเลือกไม่รับผ่านลิงก์ "ไม่อนุญาตให้ขายข้อมูลส่วนบุคคลของฉัน" ที่แสดงไว้อย่างชัดเจนบนหน้าแรกของฝ่ายที่ทำ "การขาย" คู่มือการปฏิบัติตามกฎหมายคุ้มครองความเป็นส่วนตัวของรัฐในสหรัฐอเมริกาให้ความสามารถในการเปิดใช้การประมวลผลข้อมูลแบบจำกัดสำหรับการแสดงโฆษณา Google แต่ Google ไม่สามารถใช้การตั้งค่านี้กับเครือข่ายโฆษณาแต่ละเครือข่ายในเชนสื่อกลาง (Mediation Chain) ของคุณได้ ดังนั้น คุณต้องระบุเครือข่ายโฆษณาแต่ละเครือข่ายในเชนสื่อกลาง (Mediation Chain) ที่อาจมีส่วนร่วมในการขายข้อมูลส่วนบุคคล และปฏิบัติตามคำแนะนำจากเครือข่ายแต่ละเครือข่ายเพื่อให้เป็นไปตามข้อกำหนด

โค้ดตัวอย่างต่อไปนี้แสดงวิธีส่งข้อมูลความยินยอมไปยัง Pangle SDK ตั้งค่าข้อมูลความยินยอมก่อนเริ่มต้น Google Mobile Ads SDK for React Native เพื่อให้มั่นใจว่าระบบจะส่งต่อข้อมูลไปยัง SDK ของ Pangle อย่างถูกต้อง

import {
  PangleMediation,
  PanglePAConsentType,
} from '@google/gma-mediation-pangle';
// ...

PangleMediation.setPAConsent(PanglePAConsentType.CONSENT);

ดูรายละเอียดเพิ่มเติมและค่าที่ระบุได้ในแต่ละเมธอดได้ที่คู่มือการผสานรวมของ Pangle

ขั้นตอนที่ 5: เพิ่มโค้ดที่จำเป็น

Android

ไม่จำเป็นต้องใช้โค้ดเพิ่มเติมสำหรับการผสานรวม Pangle

iOS

การผสานรวม SKAdNetwork

ทำตามเอกสารประกอบของ Pangle เพื่อเพิ่มตัวระบุ SKAdNetwork ลงในไฟล์ Info.plist ของโปรเจ็กต์

ขั้นตอนที่ 6: ทดสอบการติดตั้งใช้งาน

เปิดใช้โฆษณาทดสอบ

ตรวจสอบว่าคุณได้ลงทะเบียนอุปกรณ์ทดสอบสำหรับ AdMob และเปิดใช้โหมดทดสอบใน UI ของ Pangle แล้ว

ยืนยันโฆษณาทดสอบ

หากต้องการยืนยันว่าคุณได้รับโฆษณาทดสอบจาก Pangle ให้เปิดใช้การทดสอบแหล่งที่มาของโฆษณาแหล่งเดียว ในเครื่องมือตรวจสอบโฆษณาโดยใช้แหล่งที่มาของโฆษณา Pangle (Waterfall), Pangle US SDK (การเสนอราคา), Pangle KR SDK (การเสนอราคา) และ Pangle ROW SDK (การเสนอราคา)

รหัสข้อผิดพลาด

หากอะแดปเตอร์ไม่ได้รับโฆษณาจาก Pangle ผู้เผยแพร่โฆษณาสามารถตรวจสอบข้อผิดพลาดที่สำคัญจากการตอบกลับโฆษณาโดยใช้ ResponseInfo ในคลาสต่อไปนี้

Android

com.pangle.ads
com.google.ads.mediation.pangle.PangleMediationAdapter

iOS

GADMediationAdapterPangle

ต่อไปนี้คือรหัสและข้อความที่แสดงโดยอะแดปเตอร์ Pangle เมื่อโหลดโฆษณาไม่สำเร็จ

Android

รหัสข้อผิดพลาด โดเมน เหตุผล
101 com.google.ads.mediation.pangle พารามิเตอร์เซิร์ฟเวอร์ไม่ถูกต้อง (เช่น ไม่มีรหัสแอปหรือรหัสตำแหน่งโฆษณา)
102 com.google.ads.mediation.pangle ขนาดโฆษณาที่ขอไม่ตรงกับขนาดแบนเนอร์ที่ Pangle รองรับ
103 com.google.ads.mediation.pangle SDK ของ Pangle ไม่รองรับผู้ใช้ที่เป็นเด็ก
-1-60000 com.pangle.ads Pangle SDK แสดงข้อผิดพลาด ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบของ Pangle

iOS

รหัสข้อผิดพลาด โดเมน เหตุผล
101 com.google.mediation.pangle พารามิเตอร์เซิร์ฟเวอร์ไม่ถูกต้อง (เช่น ไม่มีรหัสแอปหรือรหัสตำแหน่งโฆษณา)
102 com.google.mediation.pangle ขนาดโฆษณาที่ขอไม่ตรงกับขนาดแบนเนอร์ที่ Pangle รองรับ
104 com.google.mediation.pangle SDK ของ Pangle ไม่รองรับผู้ใช้ที่เป็นเด็ก
-1-60000 ส่งโดย Pangle SDK Pangle SDK แสดงข้อผิดพลาด ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบของ Pangle

เวอร์ชัน 0.1.0

  • การเผยแพร่ครั้งแรก