พัฒนาโฆษณาสำหรับ Google Mobile Ads SDK

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

รูปแบบโฆษณาที่ใช้ได้มีหลายรูปแบบ ได้แก่ แบนเนอร์ในแอป แบนเนอร์ที่ขยายได้ และโฆษณาแบบเต็มหน้าจอ โฆษณาแต่ละรูปแบบจะมีชิ้นงานครีเอทีฟโฆษณาและฟังก์ชันการทำงานของตัวเอง เช่น แบนเนอร์ที่ขยายได้สามารถเปลี่ยนขนาดและสีพื้นหลังได้เมื่อคลิก Google Mobile Ads SDK เข้ากันได้กับมาตรฐาน MRAID

คุณต้องรวบรวมรหัสแอป รหัสหน่วยโฆษณา และขนาดโฆษณาให้กับนักพัฒนาซอฟต์แวร์เพื่อใช้ Google Mobile Ads SDK

ในหน้านี้:

หารหัสแอปพลิเคชันของ Google Mobile Ads

  1. ลงชื่อเข้าใช้ Google Ad Manager
  2. คลิกพื้นที่โฆษณา แล้วคลิกแอป
  3. ค้นหาแอปบนอุปกรณ์เคลื่อนที่ที่คุณต้องการรหัส หรืออ้างสิทธิ์แอปบนอุปกรณ์เคลื่อนที่แอปใหม่
  4. คลิก คลิกเพื่อคัดลอก เพื่อคัดลอก "รหัสแอป" ไปยังคลิปบอร์ด เช่น ca-app-pub-3940256099942544~3347511713
  5. ส่งข้อมูลนี้ให้นักพัฒนาซอฟต์แวร์

ค้นหารหัสและขนาดของหน่วยโฆษณา

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

ฟังก์ชัน JavaScript เพิ่มเติม

หากต้องการใช้ประโยชน์จากฟังก์ชันการทำงานของ Google Mobile Ads SDK ให้อ่านเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์

ตัวอย่างฟังก์ชันการทำงานเด่นๆ สำหรับการแก้ไขส่วน <head> ของครีเอทีฟโฆษณามีดังนี้

ขยายทั้งหมด  ยุบทั้งหมด

เข้าถึงความสามารถต่างๆ ของอุปกรณ์

SDK เผยถึงความสามารถของเบราว์เซอร์ในแอปที่มีให้ใช้งานใน iOS และ Android ซึ่งจะทำให้นักพัฒนาซอฟต์แวร์เข้าถึงความสามารถต่างๆ ของอุปกรณ์ได้ เช่น ตัวตรวจวัดความเร่ง เครื่องวัดการหมุน และเข็มทิศ ผ่าน HTML5 หากแพลตฟอร์มรองรับความสามารถเหล่านั้น

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

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

เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ดูวิธีใช้เหตุการณ์ในแอป
ปรับขนาดภาพให้เต็มหน้าจอ

หากคุณพบว่าโฆษณาแบบเต็มหน้าจอแสดงขึ้นเพียงบางส่วนของจอเท่านั้น ให้แทรกโค้ดต่อไปนี้ลงในส่วน <head> ของโฆษณานั้น

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

โค้ดตัวอย่างสำหรับโฆษณาในแอป: คลิกไปยังปฏิทินบนอุปกรณ์เคลื่อนที่โดยใช้ MRAID v2.0

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

ลักษณะการทำงานและองค์ประกอบของ UI

ครีเอทีฟโฆษณาประกอบด้วยองค์ประกอบ UI ต่อไปนี้

  • รูปภาพแบนเนอร์ รวมถึงความสูงและความกว้าง
  • จำเป็นต้องมีข้อมูลเกี่ยวกับเหตุการณ์ เช่น สรุป คำอธิบาย ตำแหน่ง วันที่เริ่มต้น และวันที่สิ้นสุด
ชื่อ ประเภท จำเป็น คำอธิบาย
ไฟล์ภาพแบนเนอร์ ไฟล์ ใช่ รูปภาพของโฆษณาแบนเนอร์
ความกว้างของรูปภาพแบนเนอร์ ตัวเลข ใช่ ความกว้างของรูปภาพแบนเนอร์
ความสูงของรูปภาพแบนเนอร์ ตัวเลข ใช่ ความสูงของรูปภาพแบนเนอร์
สรุปเหตุการณ์ ข้อความ ใช่ สรุปของเหตุการณ์
คำอธิบายเหตุการณ์ ข้อความ ใช่ คำอธิบายของเหตุการณ์
ตำแหน่งของเหตุการณ์ ข้อความ ไม่ ตำแหน่งของเหตุการณ์
วันที่เริ่มต้นของเหตุการณ์ ข้อความ ใช่ วันที่เริ่มต้นของเหตุการณ์ วันที่เริ่มต้นควรอยู่ในรูปแบบ "2016-10-22T00:00-05:00" ซึ่งในตัวอย่างนี้คือวันที่ 22 ตุลาคม 2016 ตั้งแต่เวลา 0:00 น. - 5:00 น.
วันที่สิ้นสุดของเหตุการณ์ ข้อความ ใช่ วันที่สิ้นสุดของเหตุการณ์ วันที่สิ้นสุดควรอยู่ในรูปแบบ "2016-10-22T00:00-05:00" ซึ่งในตัวอย่างนี้คือวันที่ 22 ตุลาคม 2016 ตั้งแต่เวลา 0:00 น. - 5:00 น.
  

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a href="#" onClick="addToCalendar()"; return false;>
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<script>

// Check whether mraid is ready by adding event listener
function doReadyCheck(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  }else{
    showMyAd();
  }
}

// Once mraid is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Only show Ad when mraid is ready
function showMyAd(){
  var advertElement = document.getElementById("normal");
  advertElement.style.display = 'block';
}

// Add event to the calendar using appropriate input if the device supports calendar manipulation
function addToCalendar(){

  // Register the click by creating an image
  var x = document.createElement("IMG");
  x.setAttribute("src", "%%CLICK_URL_ESC%%");
  window.top.document.body.appendChild(x);

  if(mraid.getVersion()=="2.0"){
    mraid.createCalendarEvent({summary: "[%EventSummary%]", description: "[%EventDescription%]", location: "[%EventLocation%]", start: "[%EventStartDate%]", end: "[%EventEndDate%]"}); 
  } 
  return false;
}

doReadyCheck();
</script>
</body>
</html>

ชื่อหน่วยโฆษณาทดสอบ: ali_Calendar

โค้ดตัวอย่างสำหรับโฆษณา Display: เทมเพลตส่วนท้ายของโฆษณาที่ขยายได้โดยใช้ MRAID v2.0

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

ความกว้างนั้นอาจมีขนาดเท่ากับแบนเนอร์หรือเท่ากับความกว้างของหน้าจอ (หากค่าของ FullWidthResize เป็น "Yes")

ลักษณะการทำงานและองค์ประกอบของ UI

ครีเอทีฟโฆษณาประกอบด้วยองค์ประกอบ UI ต่อไปนี้

  • ชิ้นงานครีเอทีฟโฆษณา (ชิ้นงานแต่ละรายการจะต้องระบุไฟล์ ความสูง และความกว้าง)
    • คอมโพเนนต์รูปภาพแบนเนอร์
    • คอมโพเนนต์แบนเนอร์ที่มีการปรับขนาด
    • ไอคอนปุ่มปิด
  • สามารถปรับตำแหน่งของปุ่มปิดเพื่อให้อยู่ด้านขวาบนหรือด้านซ้ายบนของหน้าจอ
  • สามารถเปลี่ยนสีพื้นหลังของโฆษณา
ชื่อ ประเภท จำเป็น คำอธิบาย
ไฟล์ภาพแบนเนอร์ ไฟล์ ใช่ รูปภาพที่จะแสดงในโฆษณาแบนเนอร์
ความสูงของรูปภาพแบนเนอร์ ตัวเลข ใช่ ความสูงของรูปภาพแบนเนอร์
ความกว้างของรูปภาพแบนเนอร์ ตัวเลข ใช่ ความกว้างของรูปภาพแบนเนอร์
สีพื้นหลัง ข้อความ ใช่ สีพื้นหลังของรูปภาพที่มีการปรับขนาดและพื้นที่ของแบนเนอร์
URL การคลิกผ่าน URL ใช่ URL ปลายทางที่ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเว็บนั้นเมื่อผู้ใช้คลิกโฆษณาที่มีการปรับขนาด
ไฟล์ภาพที่มีการปรับขนาด ไฟล์ ใช่ รูปภาพที่จะแสดงเมื่อมีการคลิกแบนเนอร์
ความสูงของรูปภาพที่มีการปรับขนาด ตัวเลข ใช่ ความสูงของรูปภาพที่มีการปรับขนาด
ความกว้างของรูปภาพที่มีการปรับขนาด ตัวเลข ใช่ ความกว้างของรูปภาพที่มีการปรับขนาด
ไอคอนปิด ไฟล์ ใช่ ไฟล์ภาพของปุ่ม "ปิด"
ความกว้างของไอคอนปิด ตัวเลข ใช่ ความกว้างของปุ่ม "ปิด" (30 คือความกว้างเฉลี่ย)
ความสูงของไอคอนปิด ตัวเลข ใช่ ความสูงของปุ่ม "ปิด" (30 คือความสูงเฉลี่ย)
ตำแหน่งของปุ่ม "ปิด" รายการ ไม่ วางตำแหน่งของปุ่ม "ปิด" ให้อยู่ด้านขวาบนหรือด้านซ้ายบนของหน้าจอก็ได้ ค่าที่เป็นไปได้คือ "Right" หรือ "Left" หากไม่มีการตั้งค่า ระบบจะวางตำแหน่งปุ่มปิดที่ด้านขวาบนของหน้าจอ
การปรับขนาดความกว้างเต็มขนาด รายการ ไม่ ทำให้โฆษณาที่ปรับขนาดแสดงเต็มความกว้างของหน้าจอได้หากค่านี้คือ "Yes" หากค่าเป็น "No" ความกว้างจะเป็นขนาดเดียวกันกับแบนเนอร์เดิม ค่าที่ใช้ได้คือ "Yes" และ "No" ค่าเริ่มต้นคือ "No"
  

<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
<style>
#close_button {
  position: absolute;
  top: 4px;
  right: 4px;
  display:block;
}

#resized img {
  display : block;
  margin : auto;
}
</style>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="resize();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]"  />
</a>
</div>

<div id="resized" style="display:none; top:0px;">
<a onClick="openURL()">
<img width="[%ResizedImageWidth%]"  height="[%ResizedImageHeight%]" src="[%ResizedImageFile%]"/>
</a>
<div id="close_button">
<img width="[%CloseIconWidth%]" height="[%CloseIconHeight%]" src="[%CloseIcon%]"/> 
</div>
</div>

<script>
<!--
// Variables
var closeButton = document.getElementById("close_button");
var bodyElement = document.body;
var advertElement = document.getElementById("normal");
var resizedElement = document.getElementById("resized");
var resizeBannerWidth;

function changeBodyElementStyle() {
  // Change background color
  if ("[%ResizedBackgroundColor%]") {
    bodyElement.style.backgroundColor = "[%ResizedBackgroundColor%]";
    resizedElement.style.backgroundColor = "[%ResizedBackgroundColor%]";	
  }
}

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

//Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

// Set resizing properties and resize
function resize(){
	// If FullWidthResize is "Yes", then the resized advert takes up the whole width. Otherwise takes up the width of the original banner
	if ("[%FullWidthResize%]" == "Yes") {
	    resizeBannerWidth = screen.width;
	} else {
	    resizeBannerWidth = mraid.getDefaultPosition().width;
	}	
	
  if(mraid.getVersion()=="2.0"){
    if ("[%PositionOfCloseButton%]" === "Left") {
	  closeButton.style.left = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-left", "allowOffscreen":false});
	} else {
	  closeButton.style.right = "0";

mraid.setResizeProperties({"width":""+resizeBannerWidth+"","height":"[%ResizedImageHeight%]","offsetX":"","offsetY":"","customClosePosition":"top-right", "allowOffscreen":false});
	}
    mraid.resize();
	return false;
  }
  else{
    return true;
  }
}

// Displays the advert and add an event listener to it to detect whether to resize
function showMyAd(){
  advertElement.style.display = "inline";
  mraid.addEventListener("stateChange",updateAd); 
}

// updateAd is called when MRAID changes state - calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "resized"){
    toggleLayer('normal', 'resized');
  }else if(state == "default"){
    toggleLayer('resized', 'normal');
  }
}

// Goes to the other state (either resized or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = 'block';
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

ชื่อหน่วยโฆษณาทดสอบ: ali_resizeBanner

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

เทมเพลตนี้ใช้ปุ่ม "ปิด" MRAID เริ่มต้น

ลักษณะการทำงานและองค์ประกอบของ UI

ครีเอทีฟโฆษณาประกอบด้วยองค์ประกอบ UI ต่อไปนี้

  • ชิ้นงานครีเอทีฟโฆษณา:
    • คอมโพเนนต์รูปภาพแบนเนอร์ (ต้องระบุความสูงและความกว้างด้วย)
    • คอมโพเนนต์ขยายแบนเนอร์
  • สามารถเปลี่ยนสีพื้นหลังของโฆษณาแบนเนอร์และโฆษณาที่มีการขยาย
ชื่อ ประเภท จำเป็น คำอธิบาย
ไฟล์ภาพแบนเนอร์ ไฟล์ ใช่ รูปภาพที่จะแสดงในโฆษณาแบนเนอร์
ความสูงของรูปภาพแบนเนอร์ ตัวเลข ใช่ ความสูงของรูปภาพแบนเนอร์
ความกว้างของรูปภาพแบนเนอร์ ตัวเลข ใช่ ความกว้างของรูปภาพแบนเนอร์
สีพื้นหลัง ข้อความ ใช่ สีพื้นหลังของพื้นที่รูปภาพแบนเนอร์
URL การคลิกผ่าน URL ใช่ URL ปลายทางที่ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเว็บนั้นเมื่อผู้ใช้คลิกโฆษณาที่มีการปรับขนาด
ไฟล์ภาพที่มีการขยาย ไฟล์ ใช่ รูปภาพที่จะแสดงเมื่อมีการคลิกแบนเนอร์
ความสูงของรูปภาพที่มีการขยาย ตัวเลข ใช่ ความสูงของรูปภาพที่มีการขยาย
ความกว้างของรูปภาพที่มีการขยาย ตัวเลข ใช่ ความกว้างของรูปภาพที่มีการขยาย
  

       
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<head>
<script type="text/javascript" src="mraid.js"></script>
</head>
<body>
<div id="normal" style="display:none; margin:auto;top:0px;text-align:center">
<a onClick="expand();">
<img width="[%BannerImageWidth%]" height="[%BannerImageHeight%]" src="[%BannerImageFile%]" />
</a>
</div>
<div id="expanded" style="display:none;top:0px;text-align:center">
<a onClick="openURL()">
<img width="[%ExpandedImageWidth%]"  height="[%ExpandedImageHeight%]" src="[%ExpandedImageFile%]" />
</a>
</div>

<script>
<!--

function openURL() {
  mraid.open("%%CLICK_URL_ESC%%[%ClickThroughURL%]");
}

// Change background color if present
function changeBodyElementStyle() {
  if ("[%BackgroundColor%]") {
    var bodyElement = document.body;
    bodyElement.style.backgroundColor = "[%BackgroundColor%]";
  }
}	

// Check whether MRAID is ready by adding event listener
function checkIfReady(){
  if(mraid.getState() == 'loading'){
    mraid.addEventListener("ready", mraidIsReady);
  } else{
    showMyAd();
  }
}

// Once MRAID is ready, it does not need to listen to the ready event anymore
function mraidIsReady(){
  mraid.removeEventListener("ready", mraidIsReady); 
  showMyAd();
}

function showMyAd(){
  // Displays the advert
  var advertElement = document.getElementById("normal");
  advertElement.style.display = "inline";

  // Add event listener to detect whether to expand or not
  mraid.addEventListener("stateChange",updateAd); 

  // Change background color of the expanded advert
  var expandedDiv = document.getElementById("expanded");
  if ("[%BackgroundColor%]") {
    expandedDiv.style.backgroundColor = "[%BackgroundColor%]";
  }
}

function expand() {
  if(mraid.getVersion()=="2.0"){
    mraid.expand();
    return false;
  }
  else {
    return true;
  }
}

// updateAd is called when mraid changes state
// Calls toggleLayer to expand/ reduce ad size
function updateAd(state){
  if (state == "expanded"){
    toggleLayer('normal', 'expanded');
  }else if(state == "default"){
    toggleLayer('expanded', 'normal');
  }
}

// Goes to the other state (either expands or banner)
function toggleLayer(fromLayer, toLayer){
  var fromLayerElem = document.getElementById(fromLayer);
  fromLayerElem.style.display = 'none';
  var toLayerElem = document.getElementById(toLayer);
  toLayerElem.style.display = "block";
}

changeBodyElementStyle();
checkIfReady();
//-->
</script>
</body>
</html>

ชื่อหน่วยโฆษณาทดสอบ: ali_expandDefaultClose

โค้ดตัวอย่างสำหรับการปิดโฆษณาคั่นระหว่างหน้าโดยอัตโนมัติ
เฉพาะโฆษณาคั่นระหว่างหน้าที่จองไว้โดยตรงจะสามารถปิดโดยอัตโนมัติได้ โฆษณาคั่นระหว่างหน้าที่แสดงผ่านการจัดสรรแบบไดนามิก (เช่น Ad Exchange, AdSense หรือ AdMob) ต้องปิดโดยผู้ใช้เท่านั้น

วิธีปิดโฆษณาคั่นระหว่างหน้าหลังจากผ่านช่วงเวลาที่กำหนดแล้ว

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
      <script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
      <script>
        <!--
          function
          _admStartCountDown(){setTimeout('admob.opener.close()',parseInt('[%displayTime%]')*1000)}
          function
          _admOnload(){if(admob.opener.isOverlayShowing()){_admStartCountDown()}else{admob.events.addEventListener('onshow',
          _admStartCountDown)}}
          if(window.addEventListener){window.addEventListener("load",_admOnload,false)}else{window.attachEvent("onload",_admOnload)}
        //-->
      </script>
  </head>
  <body>
    [Your_AdCode_Goes_Here]
  </body>
</html>
หน้าต่างเป้าหมาย: หน้าต่างที่วางซ้อนอยู่ในแอป

เมื่อใช้ admob.opener.openOverlay() คุณจะสามารถเปิดเบราว์เซอร์วางซ้อนแบบเต็มหน้าจอที่เป็นภาพเคลื่อนไหวจากด้านล่างของหน้าจอ เบราว์เซอร์นี้จะไม่มีแถบสถานะและแสดงปุ่มปิดที่มุมซ้ายบนเสมอ ตัวเลือกนี้ทำงานได้ดีสำหรับโฆษณาที่ขยายได้ซึ่งสามารถโฮสต์ครีเอทีฟโฆษณาแบบเต็มหน้าจอในหน้าแยกต่างหากได้

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

  • [BANNER_UNIT]: URL ของครีเอทีฟโฆษณาแบนเนอร์
  • [WIDTH]: ความกว้างของครีเอทีฟโฆษณาแบนเนอร์
  • [HEIGHT]: ความสูงของครีเอทีฟโฆษณาแบนเนอร์
  • [FULLSCREEN_UNIT]: URL ของครีเอทีฟโฆษณาแบบเต็มหน้าจอ หมายเหตุ: หน่วยโฆษณาแบบเต็มหน้าจอจะต้องมีโค้ด JavaScript เพื่อแยกวิเคราะห์ URL ปลายทางและเปลี่ยนเส้นทางผู้ใช้ไปยังหน้า Landing Page เมื่อมีการคลิก ดูรายละเอียดเพิ่มเติมได้ในการจัดการ URL ปลายทางจากหน่วยโฆษณาแบบเต็มหน้าจอ
  • [DESTINATION_URL]: URL ของหน้าปลายทาง
  • [FALLBACK_URL]: URL ปลายทางสำรองที่จะใช้ในกรณีที่ฟังก์ชัน JavaScript ไม่ทำงาน
  • [ORIENTATION]: การวางแนวที่ใช้ได้กับ URL ปลายทาง (ใช้ "p" สำหรับแนวตั้ง, "l" สำหรับแนวนอน หรือไม่ต้องใส่ค่านี้เพื่อให้วางแนวอย่างไรก็ได้)

นี่คือตัวอย่างโค้ดโฆษณา


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
</head>

<body>
<a href="[FALLBACK_CLICKURL]" 
onClick="admob.opener.openOverlay('%%CLICK_URL_ESC%%[FULLSCREEN_UNIT]?destination=[DESTINATION_URL]', 
'[ORIENTATION]'); return false;"><img border="0" 
src="[BANNER_UNIT]" width="[WIDTH]" height="[HEIGHT]"></a>
</body>
</html>

การจัดการ URL ปลายทางจากหน่วยโฆษณาแบบเต็มหน้าจอ

ฟังก์ชัน admob.opener.openOverlay() ไม่มีตัวเลือกในการระบุ URL ปลายทางของเนื้อหา html

สมมติว่าคุณได้ส่ง URL ปลายทางในรูปแบบของคู่คีย์-ค่าเมื่อระบุหน่วยโฆษณาแบบเต็มหน้าจอ เช่น "https://link.to.fullscreen.unit?destination=https://my.destination.url" คุณจะเขียนฟังก์ชัน JavaScript และใส่ข้อมูลโค้ด HTML เพื่อจับการคลิกและเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าปลายทางได้

นี่คือซอร์สโค้ดหน้าตัวอย่าง


<!DOCTYPE html>
<head>
<meta name="viewport" 
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

<script type="text/javascript" src="https://www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>

<script type="text/javascript">
function destinationUrl() {
  // Get current url after ?
  var destinationUrl = window.location.search;

  // Strip off the leading '?'
  destinationUrl = destinationUrl.substring(1);
  // Parse destination=url key-value pair
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // key: destination
  var value = kvPair[1]; // value: url
  var url = decodeURIComponent(value); 

  // Open destination inside overlay
  window.location = url;

  // Open destination in an external browser
  // admob.opener.openUrl(url, true);
}
</script>
</head>

<body>
<div style="position:relative;">
<!-- Load content source into an iframe -->
<iframe src="https://creative.admob.com/t1/bestBuy/tradeinJul/gi/" 
align="middle" frameborder=0 width=320 height=480 marginheight=0 marginwidth=0 scrolling=no></iframe>
<!-- Create a clickable area -->
<a href="#" onClick="destinationUrl(); return false;" style="position:absolute; top:0; left:0; 
display:inline-block; width:320px; height:480px; z-index:5;"></a>
</div>
</body>
</html>

ความเข้ากันได้กับ MRAID

Google Mobile Ads SDK รองรับมาตรฐาน Mobile Rich Media Ad Interface Definitions (MRAID) ของ IAB สำหรับการโฆษณาในแอปบนอุปกรณ์เคลื่อนที่ คุณจะตั้งค่ารายการโฆษณาเป็น MRAID v1 หรือ MRAID v2 ได้ผ่านการตั้งค่าการกำหนดเป้าหมายรายการโฆษณาในส่วนเพิ่มการกำหนดเป้าหมาย ตามด้วยความสามารถของอุปกรณ์

ข้อกำหนดของ MRAID

  • MRAID v2 ต้องใช้บริการ Google Play v7.8 ขึ้นไปสำหรับ SDK โฆษณาบนอุปกรณ์เคลื่อนที่ของ Android และ Google v7.4.0 หรือใหม่กว่านี้สำหรับ iOS
  • MRAID v3 ต้องใช้บริการ Google Play v15.0.0 ขึ้นไปสำหรับ SDK โฆษณาบนอุปกรณ์เคลื่อนที่ของ Android และ Google v7.30.0 หรือใหม่กว่านี้สำหรับ iOS

ในการใช้ฟังก์ชัน MRAID ในครีเอทีฟโฆษณา คุณต้องนําเข้า mraid.js ไปในครีเอทีฟโฆษณา โดยใส่ <script src="mraid.js"> ในครีเอทีฟโฆษณา SDK โฆษณาบนอุปกรณ์เคลื่อนที่ของ Google ในฐานะที่เป็น SDK ที่ใช้ได้กับ MRAID จะมองหาโค้ดนั้นในครีเอทีฟโฆษณาและแทนที่โค้ดด้วย URL จริงที่ชี้ไปที่การใช้งาน MRAID ส่วน SDK อื่นๆ ที่รองรับ MRAID จะทำเช่นเดียวกันแม้ว่า URL จริงจะแตกต่างไปก็ตาม

คุณเลือกที่จะรวมไลบรารี MRAID รวมถึงการทำงานของ SDK โฆษณาบนอุปกรณ์เคลื่อนที่ของ Google ไว้ในครีเอทีฟโฆษณาเดียวกันได้

mraid.resize() และฟังก์ชันอื่นๆ ที่คล้ายคลึงกันจะไม่มีผลใดๆ จนกว่าจะมีคนคลิกโฆษณา ซึ่งจะป้องกันไม่ให้ครีเอทีฟโฆษณาที่เป็นอันตรายปรับขนาดและแสดงเต็มพื้นที่หน้าจอโดยอัตโนมัติ
เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ดูข้อมูลเพิ่มเติมเกี่ยวกับการรองรับ MRAID สำหรับ Android หรือ iOS

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร

หากต้องการความช่วยเหลือเพิ่มเติม

ลองทำตามขั้นตอนต่อไปนี้

โพสต์ในชุมชนความช่วยเหลือ ดูคําตอบจากสมาชิกในชุมชน
ติดต่อเรา บอกเราเพิ่มเติมและเราจะช่วยเหลือคุณ
true
บันทึกประจำรุ่น

อ่านเกี่ยวกับฟีเจอร์ล่าสุดของ Ad Manager และการอัปเดตในศูนย์ช่วยเหลือ

ดูว่ามีอะไรใหม่

ค้นหา
ล้างการค้นหา
ปิดการค้นหา
เมนูหลัก
16464224979904957330
true
ค้นหาศูนย์ช่วยเหลือ
true
true
true
true
true
148
false
false