มาต่อกันเลย กับ Facebook’s Audience Network หากใครยังไม่รู้จัก หรือยังไม่ได้สมัครใช้งาน กลับไปอ่านบทความตอน [Review] ติดโฆษณาบน Android App ของเรา ด้วย Facebook’s Audience Network : Part 1 สมัครใช้งาน ก่อนนะครับ
สำหรับบทความตอนนี้ ผมจะสอนตั้งแต่การนำ Audience Network Library มาใช้งาน การตั้งค่าต่าง ๆ จนถึงการเขียนคำสั่งเพื่อแสดงโฆษณา ในรูปแบบต่าง ๆ
เพื่อไม่ให้เป็นการเสียเวลา มาดูกันต่อเลยครับ…
List of contents
- การนำ Audience Network Library มาใช้งาน
- กำหนด Permission
- สร้าง Placement ID
- โฆษณาแบบ Banner
- โฆษณาแบบ Interstitial (หรือ Full Screen)
- โฆษณาแบบ Native
- การทดสอบ
การนำ Audience Network Library มาใช้งาน
Audience Network Library นั้น ทาง Facebook ได้รวมอยู่ใน Facebook SDK for Android ไว้อยู่แล้ว เข้าไป Download ได้ที่ URL ด้านล่างนี่ครับ
เมื่อ Download มาแล้ว จะได้ไฟล์ zip มา เมื่อแตกไฟล์ออกมา จะพบกับไฟล์ AudienceNetwork.jar อยู่ที่ facebook-android-sdk-3.18 > AudienceNetwork > bin ดังรูป
ขณะเขียนบทความนี้ Facebook SDK for Android อยู่ที่ Version 3.18 หากผู้อ่าน Download มาแล้วได้ Version ใหม่กว่า สามารถเข้าไปดู Change Log 3.x เพื่อดูสิ่งที่เปลี่ยนแปลงในแต่ละ Version และ Upgrade Guide เพื่อจะได้ทราบว่า มีอะไรเปลี่ยนแปลงสำหรับ Audience Network Library บ้าง จะได้ปรับแก้ไขได้ถูกต้อง
ทำการ Import ไฟล์ AudienceNetwork.jar เข้าสู่ Folder libs ของ Project ใน Eclipse โดยการลากไฟล์ใส่เข้าไปเลย
นอกจากนี้ Audience Network Library ยังต้องการ Android v4 Support Library ด้วยนะ ซึ่งโดยทั่วไปจะมีอยู่แล้ว (ในรูปด้านบน คือไฟล์ android-support-v4.jar นั่นเอง) แต่ถ้า Project ของใครไม่มี สามารถหาได้จาก Android SDK ที่ Folder <android sdk>\extras\android\support\v4 นะครับ1
กำหนด Permission
สำหรับ Audience Network Library นั้น ต้องการ Android Permission 2 ตัวด้วยกัน คือ INTERNET และ ACCESS_NETWORK_STATE จึงต้องเพิ่มไปใน AndroidManifest.xml ดังนี้
|
1 2 |
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> |
สร้าง Placement ID
Placement ID คือ ID ของหน่วยโฆษณาที่เราสร้างขึ้น เพื่อเอาไว้อ้างอิงโฆษณาในแต่ละจุดที่เราจะนำไปติดใน App ซึ่งเราควรจะสร้าง Placement ID หนึ่ง สำหรับโฆษณาจุดหนึ่ง เพื่อที่จะได้แยกกันอิสระ รวมถึงเวลาเราดูรายงาน เพื่อนำไปวิเคราะห์ต่อได้ด้วย
วิธีสร้าง Placement ID นั้น ให้เข้าไปที่ Facebook Apps ที่เราสร้างไว้ ซึ่งในครั้งแรกหลังจาก Facebook อนุมัติ จะพบหน้าจอดังรูปด้านล่างนี้
รูปจาก https://developers.facebook.com/docs/audience-network/getting-started#company_info
ลืม Capture มาเอง เลยต้องยืมรูปจาก facebook -_-
ซึ่งก็คือ… Facebook จะให้เราใส่ข้อมูลเบื้องต้นเกี่ยวกับ “ตัวเลือกการจ่ายเงิน” ระบุเกี่ยวกับข้อมูลบริษัทลงไปด้วย~!! โดยจะให้เราเลือกว่า จะใช้ข้อมูลบริษัทที่เคยใส่ไว้ หรือจะใส่เข้าไปใหม่ ซึ่งผมก็ใส่มั่ว ๆ ไป เพราะไม่ได้อยู่ในรูปแบบบริษัท เพื่อให้ผ่านหน้านี้ไปได้ก่อน แล้วไปแก้ไขเอาทีหลัง ซึ่งเราสามารถเข้าไปแก้ไขได้จากเมนู Company Settings ของ Facebook Developer Account ดังรูป
กลับมาที่เมนู Audience Network ของ Facebook Apps เรา ไปที่เมนู Audience Network (1) ที่ Tab Placements (2) แล้วคลิกปุ่ม Create Ad Placement (3)
จะพบกับหน้าต่าง Create Ad Placement โดยต้องระบุ ชื่อของ Ad Placement (1), รายละเอียดเกี่ยวกับตำแหน่งที่จะติดโฆษณา Steps to Trigger Ad (2), กำหนดอัตราการรีเฟรช Refresh Interval (3) (มีให้เลือกเป็น 30, 60, 90, 120 วินาที และไม่รีเฟรช) และ Status (4) สำหรับกำหนด Enable/Disable Placement นี้
ทั้ง 4 จุด สามารถแก้ไขทีหลังได้ แต่ต้องกำหนดให้ครบทุกจุด เมื่อเรียบร้อยแล้ว กดปุ่ม Save (5)
เราก็จะได้ Placement ID มาแล้ว ดังรูปด้านล่าง และจะมีปุ่ม Edit ให้เรากลับเข้าไปแก้ไข Ad Placement ของเราได้
ซึ่ง Placement ID นี้ล่ะ ที่เราจะต้องนำไปใส่ใน App ของเรา
ส่วนปุ่ม Get Code นั้น ทาง Facebook ได้ทำไว้ให้เราดู Code ตัวอย่าง เพื่ออำนวยความสะดวกในการนำ Placement ID ไปใช้ โดยเราสามารถเลือกได้ว่า จะรับ Code สำหรับ iOS หรือ Android และจะนำไปใช้เป็นโฆษณาในรูปแบบไหน
จุดนี้ขอชื่นชมว่า facebook ทำออกมาได้ค่อนข้างดี เพราะ Code ที่เตรียมไว้ พร้อมสำหรับนำไปใช้ทดสอบได้เลย แต่..!! ก็แค่พอใช้งานได้นะ ยังขาดรายละเอียดไปหลายอย่างเหมือนกัน
โฆษณาแบบ Banner
สำหรับโฆษณาแบบ Banner นั้น ในส่วนของ Design ทาง Audience Network จะให้เราสร้าง Layout เปล่า ๆ ไว้ใน Layout ของเรา ดังนี้
ในบทความนี้ ใช้ RelativeLayout ผู้อ่านจะใช้ LinearLayout หรือ Layout อื่น ๆ ก็ได้ ไม่ว่ากัน แต่ก็อย่าลืมทดสอบด้วยนะ
|
1 2 3 4 |
<RelativeLayout android:id="@+id/adViewContainer" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
ตัวอย่างนี้ ผมต้องการให้โฆษณาแบบ Banner แสดงอยู่ขอบล่างของหน้าจอ ก็เลยกำหนดเพิ่มเติมเข้าไป รวม ๆ แล้ว ได้ออกมาเป็นไฟล์ activity_main.xml ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:id="@+id/adViewContainer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" /> </RelativeLayout> |
หลังจากนั้น ในส่วนของ Activity ทำการ Import ดังนี้
|
1 |
import com.facebook.ads.*; |
และให้ประกาศตัวแปร ชนิด RelativeLayout และ AdView (จาก com.facebook.ads) ดังนี้
|
1 2 |
private RelativeLayout adViewContainer; private AdView adView; |
และประกาศตัวแปร Constant สำหรับเก็บค่า Placement ID ดังนี้
|
1 |
private final String BANNER_PLACEMENT_ID = "000000000000000_000000000000000"; // Your Placement ID |
และประกาศตัวแปร Context ดังนี้
|
1 |
private Context context; |
แล้วไปเขียน Code ใน onCreate() ของ Activity โดย Assign ค่าให้ตัวแปร Context และ RelativeLayout ก่อน ดังนี้
|
1 2 3 |
context = this; adViewContainer = (RelativeLayout) findViewById(R.id.adViewContainer); |
หลังจากนั้น ทำการสร้าง AdView ขึ้นมา ซึ่ง AdView ของ Audience Network มีรูปแบบดังนี้
- AdView(Context context, String placementId, AdSize adSize)
Parameter มี 3 ตัว คือ Context, Placement ID และ AdSize ซึ่ง AdSize สำหรับ Banner นั้น มีให้ใช้งานอยู่ 3 รูปแบบ คือ
- AdSize.BANNER_320_50 – สำหรับ Banner ขนาด 320 x 50 dp
- AdSize.BANNER_HEIGHT_50 – สำหรับ Banner สูง 50 dp เหมาะสำหรับ Phone
- AdSize.BANNER_HEIGHT_90 – สำหรับ Banner สูง 90 dp เหมาะสำหรับ Tablet
ก็จะได้เป็น
|
1 |
adView = new AdView(context, BANNER_PLACEMENT_ID, AdSize.BANNER_320_50); |
เมื่อสร้าง adView ขึ้นมาแล้ว ก็นำไปใส่ใน RelativeLayout ดังนี้
|
1 |
adViewContainer.addView(adView); |
เมื่อเราต้องการแสดงโฆษณาแบบ Banner เมื่อใด ก็เรียกใช้งาน Method loadAd() ของ AdView ซึ่งมีรูปแบบดังนี้
- void loadAd()
ก็จะได้เป็น
|
1 |
adView.loadAd(); |
และที่ onDestroy() ของ Activity ก็ควรเรียกใช้ Method destroy() ของ AdView ซึ่งมีรูปแบบดังนี้
- void destroy()
ก็จะได้เป็น
|
1 |
adView.destroy(); |
และหากว่า ต้องการตรวจสอบผลการโหลดโฆษณา สามารถใช้ Method setAdListener() ของ AdView เพื่อตรวจสอบ ซึ่งมีรูปแบบดังนี้
- void setAdListener(AdListener adListener)
สำหรับ AdListener นั้นเป็น Interface ซึ่งจะให้เรา Implement Callback Method 3 ตัวด้วยกัน ดังนี้
- void onError(Ad ad, AdError error) – เกิดเมื่อเกิด Error
- void onAdLoaded(Ad ad) – เกิดเมื่อ Load โฆษณาสำเร็จ
- void onAdClicked(Ad ad) – เกิดเมื่อมีการคลิกโฆษณา
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
adView.setAdListener(new AdListener() { @Override public void onError(Ad ad, AdError error) { // TODO Auto-generated method stub } @Override public void onAdLoaded(Ad ad) { // TODO Auto-generated method stub } @Override public void onAdClicked(Ad ad) { // TODO Auto-generated method stub } }); |
รวม ๆ แล้ว ปรับ Code นิดหน่อย ก็จะได้ไฟล์ MainActivity.java ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
package com.ethanf.test_facebookaudiencenetwork; import com.facebook.ads.*; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.widget.RelativeLayout; import android.widget.Toast; public class MainActivity extends Activity { // Context private Context context; // Ad Layout & View private RelativeLayout adViewContainer; private AdView adView; // Placement ID private final String BANNER_PLACEMENT_ID = "000000000000000_000000000000000"; // Your Placement ID @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Context context = this; // Ad Layout adViewContainer = (RelativeLayout) findViewById(R.id.adViewContainer); // Ad View adView = new AdView(context, BANNER_PLACEMENT_ID, AdSize.BANNER_320_50); // Add Ad View to Container adViewContainer.addView(adView); // Set Listener adView.setAdListener(new AdListener() { @Override public void onError(Ad ad, AdError error) { Toast.makeText(context, "Banner Ad load error : " + error.getErrorMessage(), Toast.LENGTH_LONG).show(); } @Override public void onAdLoaded(Ad ad) { Toast.makeText(context, "Banner Ad loaded!", Toast.LENGTH_SHORT).show(); } @Override public void onAdClicked(Ad ad) { Toast.makeText(context, "Banner Ad Clicked!", Toast.LENGTH_SHORT).show(); } }); // Load Ad adView.loadAd(); } @Override protected void onDestroy() { // Destroy Ad if (adView != null) adView.destroy(); super.onDestroy(); } } |
เท่านี้ก็สามารถแสดงโฆษณาแบบ Banner ได้แล้ว…
โฆษณาแบบ Interstitial (หรือ Full Screen)
สำหรับโฆษณาแบบ Interstitial นั้น จะเป็นการเปิด Activity ใหม่ จึงต้องทำการเพิ่ม Activity ไว้ที่ AndroidMenifest.xml ก่อน ดังนี้
|
1 2 3 |
<activity android:name="com.facebook.ads.InterstitialAdActivity" android:configChanges="keyboardHidden|orientation|screenSize" /> |
หลังจากนั้น ในส่วนของ Activity ทำการ Import ดังนี้
|
1 |
import com.facebook.ads.*; |
และให้ประกาศตัวแปร ชนิด InterstitialAd (จาก com.facebook.ads) ดังนี้
|
1 |
private InterstitialAd interstitialAd; |
และประกาศตัวแปร Constant สำหรับเก็บค่า Placement ID ดังนี้
|
1 |
private final String INTERSTITIAL_PLACEMENT_ID = "000000000000000_000000000000000"; // Your Placement ID |
และประกาศตัวแปร Context ดังนี้
|
1 |
private Context context; |
แล้วไปเขียน Code ใน onCreate() ของ Activity โดย Assign ค่าให้ตัวแปร Context ก่อน ดังนี้
|
1 |
context = this; |
หลังจากนั้น ทำการสร้าง InterstitialAd ขึ้นมา ซึ่ง InterstitialAd ของ Audience Network มีรูปแบบดังนี้
- InterstitialAd(Context context, String placementId)
Parameter มี 2 ตัว คือ Context และ Placement ID นั่นเอง
ก็จะได้เป็น
|
1 |
interstitialAd = new InterstitialAd(context, INTERSTITIAL_PLACEMENT_ID); |
แล้วก็ใช้ Method loadAd() ของ InterstitialAd ซึ่งมีรูปแบบดังนี้
- void loadAd()
ก็จะได้เป็น
|
1 |
interstitialAd.loadAd(); |
ซึ่ง Method loadAd() ของ InterstitialAd นั้น ต่างจากของ AdView ที่ใช้แสดงแบบ Banner อยู่นิดหน่อย เพราะของ AdView จะแสดงโฆษณาออกมาเลย แต่ของ InterstitialAd นั้น จะยังไม่แสดง
หลังจากสั่ง loadAd() แล้ว เราสามารถตรวจสอบก่อน ว่าทำการโหลดโฆษณาได้เรียบร้อยหรือไม่ ด้วย Method isAdLoaded() โดยมีรูปแบบดังนี้
- boolean isAdLoaded()
ก็จะได้เป็น
|
1 |
interstitialAd.isAdLoaded(); |
ซึ่ง Method isAdLoaded() นั้น Return เป็นชนิด boolean ทำให้เราตรวจสอบได้ว่า โฆษณาได้ถูกโหลดแล้วหรือยัง
และเมื่อโฆษณาถูกโหลดเรียบร้อยแล้ว เมื่อต้องการแสดงโฆษณาที่จุดใด ก็เรียกใช้ Method show() เพื่อแสดงโฆษณาแบบ Interstitial ออกมา ซึ่งมีรูปแบบดังนี้
- boolean show()
ก็จะได้เป็น
|
1 |
interstitialAd.show(); |
ซึ่ง Method show() ก็มี Return เป็นชนิด boolean เช่นกัน ซึ่งจะ Return เป็น false หากเรียกใช้งานในขณะที่โฆษณายังไม่ถูกโหลด
และที่ onDestroy() ของ Activity ก็ควรเรียกใช้ Method destroy() ของ InterstitialAd ซึ่งมีรูปแบบดังนี้
- void destroy()
ก็จะได้เป็น
|
1 |
interstitialAd.destroy(); |
และหากว่า ต้องการตรวจสอบผลการโหลดโฆษณา สามารถใช้ Method setAdListener() ของ InterstitialAd เพื่อตรวจสอบ ซึ่งมีรูปแบบดังนี้
- void setAdListener(InterstitialAdListener adListener)
สำหรับ InterstitialAdListener นั้นเป็น Interface ซึ่งจะให้เรา Implement Callback Method 5 ตัวด้วยกัน ดังนี้
- void onError(Ad ad, AdError error) – เกิดเมื่อเกิด Error
- void onAdLoaded(Ad ad) – เกิดเมื่อ Load โฆษณาสำเร็จ
- void onAdClicked(Ad ad) – เกิดเมื่อมีการคลิกโฆษณา
- void onInterstitialDisplayed(Ad ad) – เกิดเมื่อมีการแสดงโฆษณา
- void onInterstitialDismissed(Ad ad) – เกิดเมื่อโฆษณาถูกปิด
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
interstitialAd.setAdListener(new InterstitialAdListener() { @Override public void onError(Ad ad, AdError error) { // TODO Auto-generated method stub } @Override public void onAdLoaded(Ad ad) { // TODO Auto-generated method stub } @Override public void onAdClicked(Ad ad) { // TODO Auto-generated method stub } @Override public void onInterstitialDisplayed(Ad ad) { // TODO Auto-generated method stub } @Override public void onInterstitialDismissed(Ad ad) { // TODO Auto-generated method stub } }); |
รวม ๆ แล้ว ปรับ Code นิดหน่อย ก็จะได้ไฟล์ MainActivity.java ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
package com.ethanf.test_facebookaudiencenetwork; import com.facebook.ads.*; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.widget.Toast; public class MainActivity extends Activity { // Context private Context context; // Interstitial Ad private InterstitialAd interstitialAd; // Placement ID private final String INTERSTITIAL_PLACEMENT_ID = "000000000000000_000000000000000"; // Your Placement ID @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Context context = this; // Interstitial Ad interstitialAd = new InterstitialAd(context, INTERSTITIAL_PLACEMENT_ID); // Set Listener interstitialAd.setAdListener(new InterstitialAdListener() { @Override public void onError(Ad ad, AdError error) { Toast.makeText(context, "Interstitial Ad load error : " + error.getErrorMessage(), Toast.LENGTH_LONG).show(); } @Override public void onAdLoaded(Ad ad) { Toast.makeText(context, "Interstitial Ad loaded!", Toast.LENGTH_SHORT).show(); // Check & Show Ad if (interstitialAd.isAdLoaded()) interstitialAd.show(); } @Override public void onAdClicked(Ad ad) { Toast.makeText(context, "Interstitial Ad Clicked!", Toast.LENGTH_SHORT).show(); } @Override public void onInterstitialDisplayed(Ad ad) { Toast.makeText(context, "Interstitial Ad Displayed!", Toast.LENGTH_SHORT).show(); } @Override public void onInterstitialDismissed(Ad ad) { Toast.makeText(context, "Interstitial Ad Dismissed!", Toast.LENGTH_SHORT).show(); // Destroy Ad interstitialAd.destroy(); interstitialAd = null; } }); // Load Ad interstitialAd.loadAd(); } @Override protected void onDestroy() { // Destroy Ad if (interstitialAd != null) interstitialAd.destroy(); super.onDestroy(); } } |
เท่านี้ก็สามารถแสดงโฆษณาแบบ Interstitial ได้แล้ว…
โฆษณาแบบ Native
สำหรับโฆษณาแบบ Native นั้น ทาง Audience Network เปิดให้เราสามารถปรับแต่งได้เองอย่างอิสระ เพราะฉะนั้น เราจะเริ่มกันที่การ Design ส่วนของ Native Ad ก่อน
เพื่อความสะดวก ผมแนะนำให้สร้าง Layout ใหม่ขึ้นมา แล้ว Design รูปแบบโฆษณาไว้ก่อนเลย
ตัวอย่างด้านล่างนี้ ผมได้สร้าง Layout ใหม่ ให้ชื่อไฟล์ว่า native_ad.xml โดยการวาง Layout นั้น ผมได้ลอกบางส่วนมาจากตัวอย่างใน SDK ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/black" android:orientation="vertical" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingBottom="10dp" > <ImageView android:id="@+id/nativeAdIcon" android:layout_width="50dp" android:layout_height="50dp" android:contentDescription="Ad icon" android:src="@android:drawable/sym_def_app_icon" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="5dp" > <TextView android:id="@+id/nativeAdTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:text="nativeAdTitle" android:textSize="18sp" /> <TextView android:id="@+id/nativeAdBody" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:lines="2" android:text="nativeAdBody" android:textSize="15sp" /> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/nativeAdImage" android:layout_width="fill_parent" android:layout_height="wrap_content" android:contentDescription="Ad image" android:gravity="center" android:scaleType="centerCrop" android:src="@android:drawable/sym_def_app_icon" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="5dp" android:weightSum="5" > <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" android:orientation="vertical" > <RatingBar android:id="@+id/nativeAdStarRating" style="?android:attr/ratingBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:isIndicator="true" android:numStars="5" android:rating="4.5" android:stepSize="0.1" /> <TextView android:id="@+id/nativeAdSocialContext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ellipsize="end" android:lines="2" android:text="nativeAdSocialContext" android:textSize="15sp" /> </LinearLayout> <Button android:id="@+id/nativeAdCallToAction" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" android:gravity="center" android:text="nativeAdCallToAction" android:textSize="16sp" /> </LinearLayout> </LinearLayout> |
ส่วน Layout ที่จะแสดงโฆษณา ให้สร้าง Layout เปล่า ๆ ที่จะใช้แสดงในตำแหน่งตามต้องการ
|
1 2 3 4 5 6 |
<LinearLayout android:id="@+id/nativeAdContainer" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > </LinearLayout> |
ตัวอย่างด้านล่าง ผมจะใช้ LinearLayout แสดงอยู่กลางหน้าจอ ภายใน RelativeLayout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:id="@+id/nativeAdContainer" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:background="@android:color/white" android:orientation="vertical" android:padding="8dp" > </LinearLayout> </RelativeLayout> |
หลังจากนั้น ในส่วนของ Activity ทำการ Import ดังนี้
|
1 |
import com.facebook.ads.*; |
และให้ประกาศตัวแปร ชนิด NativeAd (จาก com.facebook.ads) ดังนี้
|
1 |
private NativeAd nativeAd; |
และประกาศตัวแปร Constant สำหรับเก็บค่า Placement ID ดังนี้
|
1 |
private final String NATIVE_PLACEMENT_ID = "000000000000000_000000000000000"; // Your Placement ID |
และประกาศตัวแปร Context ดังนี้
|
1 |
private Context context; |
แล้วไปเขียน Code ใน onCreate() ของ Activity โดย Assign ค่าให้ตัวแปร Context ก่อน ดังนี้
|
1 |
context = this; |
หลังจากนั้น ทำการสร้าง NativeAd ขึ้นมา ซึ่ง NativeAd ของ Audience Network มีรูปแบบดังนี้
- NativeAd(Context context, String placementId)
Parameter มี 2 ตัว คือ Context และ Placement ID นั่นเอง
ก็จะได้เป็น
|
1 |
nativeAd = new NativeAd(context, NATIVE_PLACEMENT_ID); |
แล้วก็ใช้ Method loadAd() ของ NativeAd ซึ่งมีรูปแบบดังนี้
- void loadAd()
ก็จะได้เป็น
|
1 |
nativeAd.loadAd(); |
ซึ่ง Method loadAd() ของ NativeAd นั้น จะเหมือนกับของ InterstitialAd เลย ก็คือ จะยังไม่แสดงโฆษณาออกมา
หลังจากสั่ง loadAd() แล้ว เราสามารถตรวจสอบก่อน ว่าทำการโหลดโฆษณาได้เรียบร้อยหรือไม่ ด้วย Method isAdLoaded() ของ NativeAd โดยมีรูปแบบดังนี้
- boolean isAdLoaded()
ก็จะได้เป็น
|
1 |
nativeAd.isAdLoaded(); |
ซึ่ง Method isAdLoaded() นั้น Return เป็นชนิด boolean ทำให้เราตรวจสอบได้ว่า โฆษณาได้ถูกโหลดแล้วหรือยัง
และเมื่อโฆษณาถูกโหลดเรียบร้อยแล้ว ก็ถึงคราวที่จะแสดงโฆษณา ซึ่งจะมีชิ้นส่วนของโฆษณาส่งมาให้ทั้งหมด 7 ชิ้น โดยจะมี Method ของ NativeAd ให้เรียกใช้ เพื่ออ่านค่าออกมา 7 ตัว มีรูปแบบดังนี้
- String getAdBody()
- String getAdCallToAction()
- NativeAd.Image getAdCoverImage()
- NativeAd.Image getAdIcon()
- String getAdSocialContext()
- NativeAd.Rating getAdStarRating()
- String getAdTitle()
ทั้ง 7 Method จะมี Return เป็นข้อความ (String) อยู่ 4 ชิ้น NativeAd.Image อยู่ 1 ชิ้น และ NativeAd.Rating อยู่ 1 ชิ้น ซึ่งเราเลือกที่จะนำไปใช้อย่างไรก็ได้
ในตัวอย่างนี้ จะนำไปใช้ทุกชิ้น เพื่อแสดงออกมาให้เห็นว่า แต่ละชิ้น จะแสดงอะไรออกมาบ้าง
ข้อมูลโฆษณาที่โหลดมานั้น จะมีอายุใช้งานได้ 1 ชั่วโมง หากเกินกว่านี้ ต้องทำการโหลดใหม่
สำหรับการใช้งาน Method ทั้ง 7 ผมจะพักข้อมูลไว้ที่ตัวแปรตามชนิดข้อมูลที่ Method นั้น Return ออกมา ดังนี้
|
1 2 3 4 5 6 7 |
String adBody = nativeAd.getAdBody(); String adCallToAction = nativeAd.getAdCallToAction(); NativeAd.Image adCoverImage = nativeAd.getAdCoverImage(); NativeAd.Image adIcon = nativeAd.getAdIcon(); String adSocialContext = nativeAd.getAdSocialContext(); NativeAd.Rating adStarRating = nativeAd.getAdStarRating(); String adTitle = nativeAd.getAdTitle(); |
ก่อนจะนำแต่ละชิ้นไปแสดงผล จะต้องโหลด Layout ที่ออกแบบไว้ ลงใน Layout ที่จะแสดงผล โดยใช้ LayoutInflater ทำการ Inflate มา ดังนี้
|
1 2 |
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View nativeAdView = inflater.inflate(R.layout.native_ad, nativeAdContainer); |
และทำการอ้างอิงไปยัง View ต่าง ๆ ใน Layout ดังนี้
|
1 2 3 4 5 6 7 |
ImageView nativeAdIcon = (ImageView) nativeAdView.findViewById(R.id.nativeAdIcon); TextView nativeAdTitle = (TextView) nativeAdView.findViewById(R.id.nativeAdTitle); TextView nativeAdBody = (TextView) nativeAdView.findViewById(R.id.nativeAdBody); ImageView nativeAdImage = (ImageView) nativeAdView.findViewById(R.id.nativeAdImage); RatingBar nativeAdStarRating = (RatingBar) nativeAdView.findViewById(R.id.nativeAdStarRating); TextView nativeAdSocialContext = (TextView) nativeAdView.findViewById(R.id.nativeAdSocialContext); Button nativeAdCallToAction = (Button) nativeAdView.findViewById(R.id.nativeAdCallToAction); |
สำหรับชิ้นส่วนที่เป็น String ก็ไม่มีอะไรยุ่งยาก นำไปกำหนดค่าได้เลย
|
1 2 3 4 |
nativeAdTitle.setText(adTitle); nativeAdBody.setText(adBody); nativeAdSocialContext.setText(adSocialContext); nativeAdCallToAction.setText(adCallToAction); |
ส่วนชิ้นส่วนที่เป็น NativeAd.Image จะมี Method downloadAndDisplayImage() ของ NativeAd ในการ Download รูป ซึ่งจะเป็นการนำรูปที่ได้ ไปใส่ใน ImageView ให้ โดยมีรูปแบบดังนี้
- static void downloadAndDisplayImage(NativeAd.Image image, ImageView imageView)
วิธีใช้งานก็…
|
1 2 |
NativeAd.downloadAndDisplayImage(adIcon, nativeAdIcon); NativeAd.downloadAndDisplayImage(adCoverImage, nativeAdImage); |
และชิ้นส่วนที่เป็น NativeAd.Rating นั้น จะมี Method ของ Class NativeAd.Rating ให้เรียกใช้อยู่ 2 Method ดังนี้
- double getScale()
- double getValue()
เราก็สามารถนำไปกำหนดค่าให้ RatingBar ได้ ดังนี้
|
1 2 |
nativeAdStarRating.setNumStars((int) adStarRating.getScale()); nativeAdStarRating.setRating((float) adStarRating.getValue()); |
และจุดที่สำคัญก็คือ กำหนดให้ View ต่าง ๆ สามารถคลิกได้ โดยใช้ Method registerViewForInteraction() ของ NativeAd ซึ่งมีรูปแบบการใช้งาน 2 รูปแบบ ดังนี้
- void registerViewForInteraction(View view) – ใช้สำหรับกำหนดให้ทั้ง Native Ad คลิกได้
- void registerViewForInteraction(View view, List<View> clickableViews) – ใช้สำหรับกำหนดให้ View เฉพาะที่ต้องการภายใน Native Ad คลิกได้
สำหรับรูปแบบแรก นำไปใช้งานได้ดังนี้
|
1 |
nativeAd.registerViewForInteraction(nativeAdView); |
ส่วนรูปแบบที่สอง นำไปใช้งานได้ดังนี้
|
1 2 3 4 |
List<View> viewList = new ArrayList<View>(); viewList.add(nativeAdImage); viewList.add(nativeAdCallToAction); nativeAd.registerViewForInteraction(nativeAdContainer, viewList); |
Code ด้านบน เป็นการกำหนดให้คลิกได้ 2 View คือ nativeAdImage และ nativeAdCallToAction
หากว่ามีการเรียกใช้ Method loadAd() เพื่อเปลี่ยนโฆษณา จำเป็นต้องทำการยกเลิกการคลิก ที่ทำการ register ไว้ ด้วย Method unregisterView() ของ NativeAd โดยมีรูปแบบดังนี้
- void unregisterView()
วิธีใช้ก็แค่…
|
1 |
nativeAd.unregisterView(); |
และที่ onDestroy() ของ Activity ก็ควรเรียกใช้ Method destroy() ของ NativeAd ซึ่งมีรูปแบบดังนี้
- void destroy()
ก็จะได้เป็น
|
1 |
nativeAd.destroy(); |
และหากว่า ต้องการตรวจสอบผลการโหลดโฆษณา สามารถใช้ Method setAdListener() ของ NativeAd เพื่อตรวจสอบ ซึ่งมีรูปแบบดังนี้
- void setAdListener(AdListener adListener)
สำหรับ AdListener นั้นเป็น Interface ซึ่งจะให้เรา Implement Callback Method 3 ตัวด้วยกัน ดังนี้
- void onError(Ad ad, AdError error) – เกิดเมื่อเกิด Error
- void onAdLoaded(Ad ad) – เกิดเมื่อ Load โฆษณาสำเร็จ
- void onAdClicked(Ad ad) – เกิดเมื่อมีการคลิกโฆษณา
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
adView.setAdListener(new AdListener() { @Override public void onError(Ad ad, AdError error) { // TODO Auto-generated method stub } @Override public void onAdLoaded(Ad ad) { // TODO Auto-generated method stub } @Override public void onAdClicked(Ad ad) { // TODO Auto-generated method stub } }); |
รวม ๆ แล้ว ปรับ Code นิดหน่อย ก็จะได้ไฟล์ MainActivity.java ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
package com.ethanf.test_facebookaudiencenetwork; import com.facebook.ads.*; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.Display; import android.view.LayoutInflater; import android.view.View; import android.view.WindowManager; import android.widget.Button; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RatingBar; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends Activity { // Context private Context context; // Native Ad private LinearLayout nativeAdContainer; private NativeAd nativeAd; // Placement ID private final String NATIVE_PLACEMENT_ID = "000000000000000_000000000000000"; // Your Placement ID @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Context context = this; // Ad Layout nativeAdContainer = (LinearLayout) findViewById(R.id.nativeAdContainer); // Native Ad nativeAd = new NativeAd(context, NATIVE_PLACEMENT_ID); // Set Listener nativeAd.setAdListener(new AdListener() { @Override public void onError(Ad ad, AdError error) { Toast.makeText(context, "Native Ad load error : " + error.getErrorMessage(), Toast.LENGTH_LONG).show(); } @Override public void onAdLoaded(Ad ad) { Toast.makeText(context, "Native Ad loaded!", Toast.LENGTH_SHORT).show(); // Unregister Last Ad nativeAd.unregisterView(); // Check Ad if (!nativeAd.isAdLoaded()) return; // Get Ad Content String adBody = nativeAd.getAdBody(); String adCallToAction = nativeAd.getAdCallToAction(); NativeAd.Image adCoverImage = nativeAd.getAdCoverImage(); NativeAd.Image adIcon = nativeAd.getAdIcon(); String adSocialContext = nativeAd.getAdSocialContext(); NativeAd.Rating adStarRating = nativeAd.getAdStarRating(); String adTitle = nativeAd.getAdTitle(); // Inflate native_ad.xml to Ad Layout LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View nativeAdView = inflater.inflate(R.layout.native_ad, nativeAdContainer); ImageView nativeAdIcon = (ImageView) nativeAdView.findViewById(R.id.nativeAdIcon); TextView nativeAdTitle = (TextView) nativeAdView.findViewById(R.id.nativeAdTitle); TextView nativeAdBody = (TextView) nativeAdView.findViewById(R.id.nativeAdBody); ImageView nativeAdImage = (ImageView) nativeAdView.findViewById(R.id.nativeAdImage); RatingBar nativeAdStarRating = (RatingBar) nativeAdView.findViewById(R.id.nativeAdStarRating); TextView nativeAdSocialContext = (TextView) nativeAdView.findViewById(R.id.nativeAdSocialContext); Button nativeAdCallToAction = (Button) nativeAdView.findViewById(R.id.nativeAdCallToAction); // Set Ad to View (String) nativeAdTitle.setText(adTitle); nativeAdBody.setText(adBody); nativeAdSocialContext.setText(adSocialContext); nativeAdCallToAction.setText(adCallToAction); // Setting Cover Image if (adCoverImage != null) setCoverImageSettings(adCoverImage, nativeAdImage); // Set Ad to View (NativeAd.Image) if (adIcon != null) NativeAd.downloadAndDisplayImage(adIcon, nativeAdIcon); if (adCoverImage != null) NativeAd.downloadAndDisplayImage(adCoverImage, nativeAdImage); // Set Ad to View (NativeAd.Rating) nativeAdStarRating.setVisibility(View.GONE); if (adStarRating != null) { nativeAdStarRating.setNumStars((int) adStarRating.getScale()); nativeAdStarRating.setRating((float) adStarRating.getValue()); nativeAdStarRating.setVisibility(View.VISIBLE); } // Set Clickable #1 // nativeAd.registerViewForInteraction(nativeAdView); // Set Clickable #2 List<View> viewList = new ArrayList<View>(); viewList.add(nativeAdImage); viewList.add(nativeAdCallToAction); nativeAd.registerViewForInteraction(nativeAdContainer, viewList); } @Override public void onAdClicked(Ad ad) { Toast.makeText(context, "Native Ad Clicked!", Toast.LENGTH_SHORT).show(); } private void setCoverImageSettings(NativeAd.Image image, ImageView imageView) { int bannerWidth = image.getWidth(); int bannerHeight = image.getHeight(); WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); Display display = wm.getDefaultDisplay(); DisplayMetrics metrics = new DisplayMetrics(); display.getMetrics(metrics); int screenWidth = metrics.widthPixels; int screenHeight = metrics.heightPixels; imageView.setLayoutParams(new LinearLayout.LayoutParams( screenWidth, Math.min((int) (((double) screenWidth / (double) bannerWidth) * bannerHeight), screenHeight / 3) )); } }); nativeAd.loadAd(); } @Override protected void onDestroy() { // Destroy Ad if (nativeAd != null) nativeAd.destroy(); super.onDestroy(); } } |
สำหรับ Method setCoverImageSettings() ในบรรทัดที่ 120-133 เป็นการคำนวณและกำหนดขนาดของรูป Cover Image ไม่เกี่ยวกับการเขียนคำสั่งเพื่อแสดงโฆษณาแต่อย่างใด
เท่านี้ก็สามารถแสดงโฆษณาแบบ Native ได้แล้ว…
ขอบขาว ๆ ที่เห็น นั่นคือพื้นที่ของ nativeAdContainer ซึ่งผมกำหนดให้มี Padding ขนาด 8dp ก็เลยเห็น Native Ad แสดงอยู่ภายในโดยเว้นห่าง nativeAdContainer ด้านละ 8dp นั่นเอง
การทดสอบ
สำหรับการทดสอบนั้น เราสามารถกำหนด Device ที่ใช้ทดสอบ ได้จาก Method ของ Class AdSettings ได้ 2 ตัว คือ
- static void addTestDevice(String deviceIdHash)
- static void addTestDevices(Collection<String> deviceIdHashes)
Method แรก ไว้เพิ่มทีละ 1 Device ส่วน Method ที่สอง ไว้เพิ่มทีละเป็นกลุ่ม
ซึ่งต้องใช้คำสั่งนี้ก่อนการเรียกใช้ Method loadAd() ของโฆษณาทุกรูปแบบ
ซึ่งเราหาค่า Device ID Hash ได้จากการ Run app แล้วหาค่า ID จาก LogCat (1) โดย Search คำว่า text:test (2) ก็จะพบกับค่า Device ID Hash (3) ตามรูป
ตัวอย่างการใช้งานก็…
|
1 |
AdSettings.addTestDevice("00000000000000000000000000000000"); |
หรือ
|
1 2 3 4 |
Collection<String> deviceIdHashes = new ArrayList<String>(); deviceIdHashes.add("00000000000000000000000000000000"); deviceIdHashes.add("11111111111111111111111111111111"); AdSettings.addTestDevices(deviceIdHashes); |
ซึ่งจะแสดงโฆษณาสำหรับกรณีทดสอบ ในแบบ Banner, Interstitial และ Native ดังรูป
สำหรับวิธีการเขียนคำสั่งแสดงโฆษณา ของ Facebook’s Audience Network ก็มีเพียงเท่านี้ หวังว่าคงมีประโยชน์กับผู้ที่สนใจนะครับ
เหนื่อยจัง กว่าจะเขียนเสร็จก็ตั้งหลายวัน >_<
Permalink
ไม่มีการตั้งค่าสำหรับ ios บ้างเหรอคะ ไปไม่เป็นเลย