การเพิ่มโฆษณาเปิดแอปของ AdMob ลงในแอป Unity

1. บทนำ

ใน Codelab นี้ คุณจะได้ติดตั้งโฆษณาเปิดแอป AdMob ในแอป Unity

สิ่งที่คุณจะสร้าง

Codelab นี้จะแนะนำขั้นตอนการติดตั้งโฆษณาเปิดแอปของ AdMob ในแอป Unity โดยใช้ปลั๊กอิน Unity สำหรับโฆษณาบนอุปกรณ์เคลื่อนที่ของ Google

6338548c3f73e7cf.gif

หากพบปัญหา (ข้อบกพร่องของโค้ด ข้อผิดพลาดด้านไวยากรณ์ การใช้คำที่ไม่ชัดเจน และอื่นๆ) ขณะดำเนินการใน Codelab นี้ ให้รายงานปัญหาโดยใช้ลิงก์รายงานข้อผิดพลาดที่มุมล่างซ้ายของ Codelab

สิ่งที่คุณจะได้เรียนรู้

  • วิธีกำหนดค่าปลั๊กอิน Unity โฆษณาบนอุปกรณ์เคลื่อนที่ของ Google
  • วิธีใช้โฆษณาเปิดแอปในแอป Unity

สิ่งที่คุณต้องมี

  • Unity 2018.4 ขึ้นไป
  • Xcode 12 ขึ้นไปและ CocoaPods (เพื่อทำให้ใช้งานได้ใน iOS)

คุณจะให้คะแนนประสบการณ์การใช้งาน AdMob ในระดับใด

มือใหม่ ระดับกลาง ผู้ชำนาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

ดาวน์โหลดโค้ด

หลังจากที่ดาวน์โหลดไฟล์ ZIP แล้ว ให้แตกเนื้อหาในไฟล์ คุณจะมีโฟลเดอร์ชื่อ admob-appopen-unity-main

หรือจะโคลนที่เก็บ GitHub จากบรรทัดคำสั่งก็ได้ ดังนี้

$ git clone https://github.com/googlecodelabs/admob-appopen-unity

ที่เก็บมี 2 โฟลเดอร์ดังนี้

  • android_studio_folder.png เงื่อนไขเริ่มต้น: โค้ดเริ่มต้นที่คุณจะสร้างใน Codelab นี้
  • android_studio_folder.png เสร็จสมบูรณ์: โค้ดสำหรับ Codelab นี้เสร็จสมบูรณ์แล้ว

3. ตั้งค่าแอปและหน่วยโฆษณา AdMob

เนื่องจาก Unity เป็น SDK หลายแพลตฟอร์ม คุณต้องเพิ่มแอปและหน่วยโฆษณาสำหรับทั้ง Android และ iOS ใน AdMob

ตั้งค่าสำหรับ Android

หากต้องการตั้งค่าสำหรับ Android คุณต้องเพิ่มแอป Android และสร้างหน่วยโฆษณา

เพิ่มแอป Android

  1. ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
  2. เลือก Android เป็นแพลตฟอร์ม เมื่อระบบถามว่าแอปนี้แสดงอยู่ใน App Store ที่รองรับไหม ให้คลิกไม่
  3. ป้อน AdMob app open ad ในช่องชื่อแอป
  4. คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อดำเนินการ Codelab นี้ให้เสร็จสมบูรณ์ แต่เราขอแนะนําให้คุณทำเช่นนั้น เนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อดำเนินการให้เสร็จสมบูรณ์

สร้างหน่วยโฆษณา

  1. เลือกแอปโฆษณาเปิดแอปของ AdMob (Android) จากเมนูแอปในคอนโซล AdMob
  2. คลิกเมนูหน่วยโฆษณา

  1. คลิกเพิ่มหน่วยโฆษณา
  2. เลือกรูปแบบการเปิดแอป
  3. ป้อน android-appopen ในช่องชื่อหน่วยโฆษณา
  4. คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสมบูรณ์

โดยปกติแล้วหน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้

หากต้องการทดสอบลักษณะการทำงานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาที่ระบุไว้ในรหัสแอป Android/รหัสหน่วยโฆษณา และรหัสแอป iOS/รหัสหน่วยโฆษณาในตาราง

ตั้งค่าสําหรับ iOS

หากต้องการตั้งค่าสำหรับ iOS คุณต้องเพิ่มแอป iOS และสร้างหน่วยโฆษณา

เพิ่มแอป iOS

  1. ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
  2. เลือกแพลตฟอร์มเป็น iOS เมื่อระบบถามว่าแอปนี้แสดงอยู่ใน App Store ที่รองรับไหม ให้คลิกไม่
  3. ป้อน AdMob app open ad ในช่องชื่อแอป
  4. คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อดำเนินการ Codelab นี้ให้เสร็จสมบูรณ์ แต่เราขอแนะนําให้คุณทำเช่นนั้น เนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อดำเนินการให้เสร็จสมบูรณ์

สร้างหน่วยโฆษณา

  1. เลือกแอปโฆษณาในบรรทัดของ AdMob (iOS) จากเมนูแอปในคอนโซล AdMob
  2. คลิกเมนูหน่วยโฆษณา

  1. คลิกเพิ่มหน่วยโฆษณา
  2. เลือกรูปแบบการเปิดแอป
  3. ป้อน ios-appopen ในช่องชื่อหน่วยโฆษณา
  4. คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสมบูรณ์

โดยปกติแล้วหน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้

หากต้องการทดสอบลักษณะการทำงานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาที่ระบุไว้ในตารางต่อไปนี้

ไม่บังคับ: ใช้แอปและหน่วยโฆษณาทดสอบของ AdMob

หากคุณต้องการใช้ Codelab แทนการสร้างแอปพลิเคชันและหน่วยโฆษณาใหม่ด้วยตนเอง คุณสามารถใช้รหัสแอป AdMob และรหัสหน่วยโฆษณาทดสอบในตารางต่อไปนี้

รหัสแอป Android/รหัสหน่วยโฆษณา

รายการ

รหัสแอป/รหัสหน่วยโฆษณา

รหัสแอป AdMob

ca-app-pub-3940256099942544~3347511713

รหัสหน่วยโฆษณา

ca-app-pub-3940256099942544/3419835294

รหัสแอป iOS/รหัสหน่วยโฆษณา

รายการ

รหัสแอป/รหัสหน่วยโฆษณา

รหัสแอป AdMob

ca-app-pub-3940256099942544~1458002511

รหัสหน่วยโฆษณา

ca-app-pub-3940256099942544/5662855259

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโฆษณาทดสอบ โปรดดูเอกสารสำหรับนักพัฒนาซอฟต์แวร์โฆษณาทดสอบ Android และโฆษณาทดสอบ iOS

4. เพิ่มปลั๊กอิน Google Mobile Ads Unity

การผสานรวมปลั๊กอิน Unity โฆษณาบนอุปกรณ์เคลื่อนที่ของ Google เป็นขั้นตอนแรกในการแสดงโฆษณา AdMob และสร้างรายได้

ดาวน์โหลดปลั๊กอิน Mobile Ads Unity

ปลั๊กอิน Unity โฆษณาบนอุปกรณ์เคลื่อนที่ของ Google ช่วยให้นักพัฒนาซอฟต์แวร์ Unity แสดงโฆษณาบนอุปกรณ์เคลื่อนที่ของ Google ในแอป Android และ iOS ได้โดยง่าย ปลั๊กอินมีอินเทอร์เฟซ C# เพื่อขอโฆษณาที่ใช้โดยสคริปต์ C# ในโปรเจ็กต์ Unity

ใช้ลิงก์ด้านล่างเพื่อดาวน์โหลดแพ็กเกจ Unity สำหรับปลั๊กอิน

เปิดโปรเจ็กต์เริ่มต้น

  1. เปิด Unity Hub
  2. ในแท็บโปรเจ็กต์ ให้คลิกปุ่มเพิ่ม
  3. ไปที่โฟลเดอร์ที่คุณดึงโค้ดที่ดาวน์โหลดมาในขั้นตอนตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
  4. เปิดโฟลเดอร์เริ่มต้น
  5. คุณจะเห็นโปรเจ็กต์เงื่อนไขเริ่มต้นในรายการโปรเจ็กต์ คลิกโปรเจ็กต์เพื่อเปิดใน Unity Editor

นำเข้าปลั๊กอิน Mobile Ads Unity

  1. ในตัวแก้ไข Unity ให้เลือกเนื้อหา > นำเข้าแพ็กเกจ > แพ็กเกจที่กำหนดเองจากเมนู
  2. เลือก GoogleMobileAds-{VERSION}.unitypackage ที่คุณดาวน์โหลดในขั้นตอนก่อนหน้า
  3. ตรวจสอบว่าได้เลือกไฟล์ทั้งหมดแล้ว และคลิกนำเข้า

ตั้งรหัสแอป AdMob

  1. ใน Unity Editor ให้เลือกเนื้อหา > โฆษณาบนมือถือของ Google > การตั้งค่าจากเมนู
  2. ป้อนรหัสแอป AdMob สำหรับ Android และ iOS ในแต่ละช่อง หากคุณต้องการทำตาม Codelab แทนการสร้างแอปพลิเคชันและหน่วยโฆษณาใหม่ด้วยตนเอง โปรดป้อนรหัสแอป AdMob ทดสอบดังนี้

8890521e199b1090.png

5. สร้างคลาสยูทิลิตี

สร้างชั้นเรียนใหม่ชื่อ AppOpenAdManager ในโฟลเดอร์สคริปต์ คลาสนี้จัดการตัวแปรอินสแตนซ์เพื่อติดตามโฆษณาที่โหลดและรหัสหน่วยโฆษณาสำหรับแต่ละแพลตฟอร์ม

AppOpenAdManager.cs

using System;
using GoogleMobileAds.Api;
using UnityEngine;

public class AppOpenAdManager
{
#if UNITY_ANDROID
    // Test ad unit ID: ca-app-pub-3940256099942544/3419835294
    private const string AD_UNIT_ID = "<YOUR_ANDROID_APPOPEN_AD_UNIT_ID>";
#elif UNITY_IOS
    // Test ad unit ID: ca-app-pub-3940256099942544/5662855259
    private const string AD_UNIT_ID = "<YOUR_IOS_APPOPEN_AD_UNIT_ID>";
#else
    private const string AD_UNIT_ID = "unexpected_platform";
#endif

    private static AppOpenAdManager instance;

    private AppOpenAd ad;

    private bool isShowingAd = false;

    public static AppOpenAdManager Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new AppOpenAdManager();
            }

            return instance;
        }
    }

    private bool IsAdAvailable
    {
        get
        {
            return ad != null;
        }
    }

    public void LoadAd()
    {
        // TODO: Load an app open ad.
    }
}

โหลดโฆษณา

การโหลดโฆษณาจะใช้เมธอด AppOpenAd.LoadAd() แบบคงที่ วิธีโหลดต้องมีรหัสหน่วยโฆษณา โหมด ScreenOrientation ออบเจ็กต์ AdRequest และตัวแฮนเดิลการเสร็จสิ้น ซึ่งระบบจะเรียกใช้เมื่อการโหลดโฆษณาสำเร็จหรือล้มเหลว

ออบเจ็กต์ AppOpenAd ที่โหลดจะระบุเป็นพารามิเตอร์ในเครื่องจัดการเสร็จสมบูรณ์ ใช้เมธอด LoadAd() ดังต่อไปนี้

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void LoadAd()
    {
        AdRequest request = new AdRequest.Builder().Build();

        // Load an app open ad for portrait orientation
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                // Handle the error.
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            // App open ad is loaded.
            ad = appOpenAd;
        }));
    }
}

แสดงโฆษณา

ก่อนแสดงโฆษณา ให้ลงทะเบียนสำหรับเครื่องจัดการเหตุการณ์แต่ละรายการเพื่อฟังเหตุการณ์โฆษณาแต่ละรายการ

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void ShowAdIfAvailable()
    {
        if (!IsAdAvailable || isShowingAd)
        {
            return;
        }

        ad.OnAdDidDismissFullScreenContent += HandleAdDidDismissFullScreenContent;
        ad.OnAdFailedToPresentFullScreenContent += HandleAdFailedToPresentFullScreenContent;
        ad.OnAdDidPresentFullScreenContent += HandleAdDidPresentFullScreenContent;
        ad.OnAdDidRecordImpression += HandleAdDidRecordImpression;
        ad.OnPaidEvent += HandlePaidEvent;

        ad.Show();
    }

    private void HandleAdDidDismissFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Closed app open ad");
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        isShowingAd = false;
        LoadAd();
    }

    private void HandleAdFailedToPresentFullScreenContent(object sender, AdErrorEventArgs args)
    {
        Debug.LogFormat("Failed to present the ad (reason: {0})", args.AdError.GetMessage());
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        LoadAd();
    }

    private void HandleAdDidPresentFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Displayed app open ad");
        isShowingAd = true;
    }

    private void HandleAdDidRecordImpression(object sender, EventArgs args)
    {
        Debug.Log("Recorded ad impression");
    }

    private void HandlePaidEvent(object sender, AdValueEventArgs args)
    {
        Debug.LogFormat("Received paid event. (currency: {0}, value: {1}",
                args.AdValue.CurrencyCode, args.AdValue.Value);
    }
}

พิจารณาการหมดอายุของโฆษณา

การอ้างอิงโฆษณาในการเปิดแอปจะหมดเวลาหลังจากผ่านไป 4 ชั่วโมง โฆษณาที่แสดงนานกว่า 4 ชั่วโมงหลังจากเวลาที่ขอจะใช้ไม่ได้อีกต่อไปและอาจไม่สร้างรายได้

โปรดแก้ไขพร็อพเพอร์ตี้ IsAdAvailable เป็น AppOpenAdManager เพื่อตรวจสอบว่าโฆษณาโหลดมานานเท่าใดแล้ว ทั้งนี้เพื่อให้แน่ใจว่าจะไม่แสดงโฆษณาที่หมดอายุแล้ว จากนั้น ใช้วิธีการดังกล่าวเพื่อตรวจสอบว่าโฆษณายังคงใช้งานได้หรือไม่

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    // TODO: Add loadTime field
    private DateTime loadTime;

    private bool IsAdAvailable
    {
        get
        {
            // TODO: Consider ad expiration
            return ad != null && (System.DateTime.UtcNow - loadTime).TotalHours < 4;
        }
    }

    public void LoadAd()
    {
        if (IsAdAvailable)
        {
            return;
        }

        AdRequest request = new AdRequest.Builder().Build();
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            ad = appOpenAd;
            Debug.Log("App open ad loaded");

            // TODO: Keep track of time when the ad is loaded.
            loadTime = DateTime.UtcNow;
        }));
    }
}

6. อัปเดตฉากเพื่อโหลด/แสดงโฆษณา

อัปเดตเมธอด Start() ในคลาส MainScene เพื่อโหลดโฆษณาเปิดแอปเมื่อฉากเริ่มต้นขึ้น

หากต้องการรับการแจ้งเตือนเกี่ยวกับเหตุการณ์ที่ทำงานอยู่เบื้องหน้าของแอป เราขอแนะนำให้ฟัง Singleton ของ AppStateEventNotifier เมื่อใช้ผู้รับมอบสิทธิ์ AppStateEventNotifier.AppStateChanged แอปจะได้รับการแจ้งเตือนเกี่ยวกับเหตุการณ์การเปิดตัวและการเบื้องหน้าของแอป และจะแสดงโฆษณาได้

MainScene.cs

using GoogleMobileAds.Api;
using GoogleMobileAds.Common;
using UnityEngine;

public class MainScene : MonoBehaviour
{
    public void Start()
    {
        // TODO: Request an app open ad.
        MobileAds.Initialize((initStatus) =>
        {
            AppOpenAdManager.Instance.LoadAd();
            AppStateEventNotifier.AppStateChanged += OnAppStateChanged;
        });
    }

    public void OnAppStateChanged(AppState state)
    {
        if (state == AppState.Foreground)
        {
            // TODO: Show an app open ad if available.
            AppOpenAdManager.Instance.ShowAdIfAvailable();
        }
    }
}

เท่านี้ก็เรียบร้อย สร้างและเรียกใช้โปรเจ็กต์ในอุปกรณ์หรือโปรแกรมจำลอง เมื่อแอปเปิดขึ้นแล้ว ให้รอ 2-3 วินาทีเพื่อให้โฆษณาโหลดได้อย่างสมบูรณ์

หลังจากนั้น เมื่อคุณสลับกลับมาที่แอป/หน้าจอหลักอื่นๆ ไปยังแอป โฆษณาเปิดแอปจะแสดงตามด้านล่าง

6338548c3f73e7cf.gif

7. เสร็จเรียบร้อย

คุณทำ Codelab เสร็จสมบูรณ์แล้ว คุณดูโค้ดที่เสร็จสมบูรณ์ของ Codelab นี้ได้ในโฟลเดอร์ android_studio_folder.pngcomplete