Ανάπτυξη διαφημίσεων για το SDK διαφημίσεων Google για κινητά

Αυτό είναι ένα άρθρο σχετικά με την ανάπτυξη διαφημίσεων για το SDK διαφημίσεων Google για κινητά. Περιγράφει τις πληροφορίες που απαιτούνται για τον προγραμματιστή σας. Στη συνέχεια, παρουσιάζεται ο τρόπος χρήσης αυτών των πληροφοριών για τη δημιουργία ετικετών που καθορίζουν τη συμπεριφορά των διαφημίσεων.

Διατίθενται διαφορετικές μορφές διαφήμισης, όπως banner εντός εφαρμογής, banner με δυνατότητα επέκτασης και διαφημίσεις πλήρους οθόνης. Κάθε μορφή διαφήμισης έχει τη δική της λειτουργικότητα και τα δικά της στοιχεία δημιουργικού. Για παράδειγμα, τα banner με δυνατότητα ανάπτυξης μπορούν να αλλάξουν μέγεθος και χρώμα φόντου όταν γίνει κλικ σε αυτά. Το SDK διαφημίσεων Google για κινητά είναι συμβατό με τα πρότυπα MRAID.

Για να χρησιμοποιήσετε το SDK διαφημίσεων Google για κινητά, θα πρέπει να συγκεντρώσετε το αναγνωριστικό εφαρμογής, τα αναγνωριστικά στοιχείων διαφημίσεων και τα μεγέθη διαφημίσεων για τον προγραμματιστή σας.

Σε αυτή τη σελίδα:

Εύρεση των αναγνωριστικών εφαρμογών διαφημίσεων Google για κινητά

  1. Συνδεθείτε στο Google Ad Manager.
  2. Κάντε κλικ στο στοιχείο Απόθεμα και έπειτα στις Εφαρμογές.
  3. Βρείτε την εφαρμογή για κινητά για την οποία χρειάζεστε το αναγνωριστικό ή διεκδικήστε μια νέα εφαρμογή για κινητά.
  4. Κάντε κλικ στο Κλικ για αντιγραφή για να αντιγράψετε το Αναγνωριστικό εφαρμογής στο πρόχειρο. Για παράδειγμα, ca-app-pub-3940256099942544~3347511713.
  5. Στείλτε αυτές τις πληροφορίες στον προγραμματιστή σας.

Εύρεση αναγνωριστικών και μεγεθών στοιχείων διαφημίσεων

  1. Κάντε κλικ στην επιλογή Απόθεμα και έπειτα στην επιλογή Στοιχεία διαφημίσεων.
  2. Κάντε κλικ στο όνομα του στοιχείου διαφημίσεων για το οποίο θέλετε να δημιουργήσετε μια ετικέτα διαφήμισης ή δημιουργήστε ένα νέο στοιχείο διαφημίσεων.
  3. Κάντε κλικ στο στοιχείο Ετικέτες.
  4. Επιλέξτε τον τύπο ετικέτας Ετικέτα εφαρμογής για κινητά και κάντε κλικ στο κουμπί Συνέχεια.
  5. Από τα Αποτελέσματα ετικέτας, αντιγράψτε το Αναγνωριστικό στοιχείου διαφημίσεων και τα Μεγέθη στοιχείου διαφημίσεων. Στείλτε αυτές τις πληροφορίες στον προγραμματιστή σας.

Πρόσθετες λειτουργίες JavaScript

Για να αξιοποιήσετε τη λειτουργικότητα του SDK διαφημίσεων Google για κινητά, ανατρέξτε στην τεκμηρίωση για προγραμματιστές.

Δείτε μερικές επισημασμένες λειτουργίες για την τροποποίηση της ενότητας <head> του δημιουργικού.

Ανάπτυξη όλων  Σύμπτυξη όλων

Πρόσβαση στις δυνατότητες της συσκευής

Το SDK εμφανίζει τις δυνατότητες των προγραμμάτων περιήγησης εντός εφαρμογής που διατίθενται σε iOS και Android. Αυτό επιτρέπει στους προγραμματιστές να έχουν πρόσβαση σε δυνατότητες της συσκευής, όπως είναι το επιταχύμετρο, το γυροσκόπιο και η πυξίδα μέσω HTML5 όπου η πλατφόρμα τα υποστηρίζει.

τεκμηρίωση για προγραμματιστέςΜάθετε περισσότερα σχετικά με αυτές τις δυνατότητες για Android και iOS.
Συμβάντα εφαρμογής

Τα συμβάντα εφαρμογής σάς επιτρέπουν να εκτελείτε προσαρμοσμένο κώδικα στην εφαρμογή σας, όταν κάποιο δημιουργικό αποστέλλει ένα συμβάν εφαρμογής. Με τα συμβάντα εφαρμογής, μπορείτε να εισαγάγετε προσαρμοσμένες εκτελέσεις διαφημίσεων οι οποίες αλληλεπιδρούν με την εφαρμογή, αλλάζοντας, για παράδειγμα το χρώμα φόντου της εφαρμογής.

τεκμηρίωση για προγραμματιστέςΜάθετε πώς μπορείτε να υλοποιήσετε συμβάντα εφαρμογής.
Κλιμάκωση εικόνας σε προβολή πλήρους οθόνης

Αν δείτε ότι η διαφήμιση πλήρους οθόνης καταλαμβάνει μόνο κάποιο τμήμα της οθόνης, εισαγάγετε τον παρακάτω κώδικα στο τμήμα <head> του δημιουργικού:

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

Δείγμα κώδικα για χρήση εντός εφαρμογής: Mobile Click To Calendar με χρήση του MRAID v2.0

Αυτό το πρότυπο είναι ένα στοιχείο διαφημίσεων banner το οποίο ξεκινά ως banner που εμφανίζεται στο κάτω τμήμα της οθόνης. Αν κάποιος χρήστης κάνει κλικ στο banner, η προεπιλεγμένη εφαρμογή ημερολογίου του χρήστη θα δημιουργήσει ένα νέο συμβάν με τη συναίνεσή του.

Συμπεριφορά και στοιχεία διεπαφής χρήστη

Το δημιουργικό αποτελείται από τα παρακάτω στοιχεία διεπαφής χρήστη:

  • Την εικόνα banner και το ύψος και πλάτος της εικόνας.
  • Απαιτούνται ορισμένες πληροφορίες σχετικά με το συμβάν, όπως σύνοψη, περιγραφή, τοποθεσία, ημερομηνία έναρξης και ημερομηνία λήξης.
Όνομα Τύπος Υποχρεωτικό Περιγραφή
Αρχείο εικόνας banner Αρχείο Ναι Η εικόνα της διαφήμισης banner.
Πλάτος εικόνας banner Αριθμός Ναι Το πλάτος της εικόνας banner.
Ύψος εικόνας banner Αριθμός Ναι Το ύψος της εικόνας banner.
Σύνοψη συμβάντος Κείμενο Ναι Η σύνοψη του συμβάντος.
Περιγραφή συμβάντος Κείμενο Ναι Η περιγραφή του συμβάντος.
Τοποθεσία συμβάντος Κείμενο Όχι Η τοποθεσία του συμβάντος.
Ημερομηνία έναρξης συμβάντος Κείμενο Ναι Η ημερομηνία έναρξης του συμβάντος. Η ημερομηνία έναρξης θα πρέπει να έχει την εξής μορφή: "2016-10-22T00:00-05:00". Για παράδειγμα, αυτό σημαίνει στις 22 Οκτωβρίου 2016 από 0:00 έως 05:00.
Ημερομηνία λήξης συμβάντος Κείμενο Ναι Η ημερομηνία λήξης του συμβάντος. Η ημερομηνία λήξης θα πρέπει να έχει την εξής μορφή: "2016-10-22T00:00-05:00". Για παράδειγμα, αυτό σημαίνει στις 22 Οκτωβρίου 2016 από 0:00 έως 05: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

Δείγμα κώδικα για διαφημίσεις προβολής: Πρότυπο επεκτάσιμου υποσέλιδου με χρήση του MRAID v2.0

Αυτό το πρότυπο είναι ένα στοιχείο διαφημίσεων δύο στοιχείων που ξεκινά ως διαφήμιση banner στο κάτω μέρος της οθόνης. Αν κάποιος χρήστης κάνει κλικ στο banner, το μέγεθος της διαφήμισης θα αλλάξει και θα αποκτήσει συγκεκριμένες διευρυμένες διαστάσεις. Αν ο χρήστης κάνει κλικ στη διαφήμιση με τις διευρυμένες διαστάσεις, θα ανακατευθυνθεί στο URL που ορίζεται ως το URL προορισμού.

Το πλάτος μπορεί να είναι αντίστοιχο του μεγέθους του banner ή να καταλαμβάνει ολόκληρο το πλάτος της οθόνης (αν η παράμετρος FullWidthResize είναι Yes).

Συμπεριφορά και στοιχεία διεπαφής χρήστη

Το δημιουργικό αποτελείται από τα παρακάτω στοιχεία διεπαφής χρήστη:

  • Στοιχεία δημιουργικού (για κάθε ένα από αυτά τα στοιχεία, απαιτούνται το αρχείο, το ύψος και το πλάτος)
    • Στοιχείο εικόνας banner
    • Στοιχείο banner επαναπροσδιορισμένου μεγέθους
    • Εικονίδιο κουμπιού κλεισίματος
  • Μπορεί να προσαρμόσει τη θέση του κουμπιού κλεισίματος, έτσι ώστε να βρίσκεται είτε στο επάνω δεξί είτε στο επάνω αριστερό τμήμα της οθόνης.
  • Μπορεί να αλλάξει το χρώμα φόντου της διαφήμισης.
Όνομα Τύπος Υποχρεωτικό Περιγραφή
Αρχείο εικόνας banner Αρχείο Ναι Η εικόνα που θα εμφανίζεται στη διαφήμιση banner.
Ύψος εικόνας banner Αριθμός Ναι Το ύψος της εικόνας banner.
Πλάτος εικόνας banner Αριθμός Ναι Το πλάτος της εικόνας banner.
Χρώμα φόντου Κείμενο Ναι Το χρώμα φόντου του χώρου που καταλαμβάνεται από την εικόνα με το επαναπροσδιορισμένο μέγεθος και του χώρου που καταλαμβάνεται από το banner.
URL προορισμού URL Ναι Το URL στο οποίο θα ανακατευθυνθεί ο χρήστης μόλις κάνει κλικ στη διαφήμιση με το επαναπροσδιορισμένο μέγεθος.
Αρχείο εικόνας επαναπροσδιορισμένου μεγέθους Αρχείο Ναι Η εικόνα που θα εμφανίζεται μετά το κλικ στο banner.
Ύψος εικόνας επαναπροσδιορισμένου μεγέθους Αριθμός Ναι Το ύψος της εικόνας επαναπροσδιορισμένου μεγέθους.
Πλάτος εικόνας επαναπροσδιορισμένου μεγέθους Αριθμός Ναι Το πλάτος της εικόνας επαναπροσδιορισμένου μεγέθους.
Εικονίδιο κλεισίματος Αρχείο Ναι Το αρχείο εικόνας για το κουμπί κλεισίματος.
Πλάτος εικονιδίου κλεισίματος Αριθμός Ναι Το πλάτος του κουμπιού κλεισίματος. (Το μέσο πλάτος είναι 30).
Ύψος εικονιδίου κλεισίματος Αριθμός Ναι Το ύψος του κουμπιού κλεισίματος. (Το μέσο ύψος είναι 30).
Θέση κουμπιού κλεισίματος Λίστα Όχι Το κουμπί κλεισίματος μπορεί να τοποθετηθεί με τέτοιο τρόπο, ώστε να βρίσκεται είτε επάνω δεξιά είτε επάνω αριστερά στην οθόνη. Οι πιθανές τιμές είναι Δεξιά ή Αριστερά. Αν αυτό το πεδίο μείνει κενό, το κουμπί κλεισίματος θα τοποθετηθεί επάνω δεξιά στην οθόνη.
Πλήρης αλλαγή μεγέθους πλάτους Λίστα Όχι Αν η τιμή είναι Ναι, η διαφήμιση επαναπροσδιορισμένου μεγέθους θα μπορεί να καταλάβει ολόκληρο το πλάτος της οθόνης. Αν η τιμή είναι Όχι, το πλάτος θα έχει το ίδιο μέγεθος με το αρχικό banner 468x60. Οι πιθανές τιμές είναι Ναι και Όχι και η προεπιλεγμένη τιμή είναι Όχι.
  

<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

Αυτό το πρότυπο είναι ένα στοιχείο διαφημίσεων δύο στοιχείων που ξεκινά ως διαφήμιση banner στο κάτω μέρος της οθόνης. Αν κάποιος χρήστης κάνει κλικ στο banner, το μέγεθος της διαφήμισης θα αλλάξει για να καλύψει ολόκληρη την οθόνη. Αν ο χρήστης κάνει κλικ στη διαφήμιση με τις διευρυμένες διαστάσεις, θα ανακατευθυνθεί στο URL που ορίζεται ως το URL προορισμού.

Αυτό το πρότυπο χρησιμοποιεί το προεπιλεγμένο κουμπί κλεισίματος MRAID.

Συμπεριφορά και στοιχεία διεπαφής χρήστη

Το δημιουργικό αποτελείται από τα παρακάτω στοιχεία διεπαφής χρήστη:

  • Στοιχεία δημιουργικού:
    • Στοιχείο εικόνας banner (απαιτούνται επίσης το ύψος και το πλάτος)
    • Ανάπτυξη στοιχείου banner
  • Μπορεί να αλλάξει το χρώμα φόντου της διαφήμισης banner και τη διευρυμένη διαφήμιση
Όνομα Τύπος Υποχρεωτικό Περιγραφή
Αρχείο εικόνας banner Αρχείο Ναι Η εικόνα που θα εμφανίζεται στη διαφήμιση banner.
Ύψος εικόνας banner Αριθμός Ναι Το ύψος της εικόνας banner.
Πλάτος εικόνας banner Αριθμός Ναι Το πλάτος της εικόνας banner.
Χρώμα φόντου Κείμενο Ναι Το χρώμα φόντου του χώρου που καταλαμβάνεται από την εικόνα banner.
URL προορισμού URL Ναι Το URL στο οποίο θα ανακατευθυνθεί ο χρήστης μόλις κάνει κλικ στη διαφήμιση με το επαναπροσδιορισμένο μέγεθος.
Αρχείο ανεπτυγμένης εικόνας Αρχείο Ναι Η εικόνα που θα εμφανίζεται μετά το κλικ στο banner.
Ύψος ανεπτυγμένης εικόνας Αριθμός Ναι Το ύψος της ανεπτυγμένης εικόνας.
Πλάτος ανεπτυγμένης εικόνας Αριθμός Ναι Το πλάτος της ανεπτυγμένης εικόνας.
  

       
<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 στο οποίο το στοιχείο πλήρους οθόνης μπορεί να φορτωθεί σε ένα παράθυρο προγράμματος περιήγησης επικάλυψης. Θα πρέπει να αντικαταστήσετε τα εξής στοιχεία placeholder με τις δικές σας τιμές. Μπορείτε να χρησιμοποιήσετε το δείγμα κώδικα, εάν διατίθεται για το δίκτυό σας, για τη δημιουργία ενός προτύπου δημιουργικού.

  • [BANNER_UNIT]: Το URL ενός δημιουργικού banner.
  • [WIDTH]: Το πλάτος ενός δημιουργικού banner.
  • [HEIGHT]: Το ύψος ενός δημιουργικού banner.
  • [OUTSCREEN_UNIT]: Το URL ενός δημιουργικού πλήρους οθόνης. Σημείωση: Η μονάδα πλήρους οθόνης θα πρέπει να περιλαμβάνει κώδικα JavaScript για την ανάλυση του URL προορισμού και την ανακατεύθυνση του χρήστη στη σελίδα προορισμού μετά τη λήψη μιας ενέργειας κλικ. Για περισσότερες λεπτομέρειες, ανατρέξτε στην ενότητα Διαχείριση 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() {
  // Λήψη τρέχοντος url μετά το ?
  var destinationUrl = window.location.search;

  // Αφαίρεση του αρχικού ?
  destinationUrl = destinationUrl.substring(1);
  // Ανάλυση ζεύγους κλειδιού-τιμής destination=url
  var kvPair = destinationUrl.split("=");
  var key = kvPair[0]; // key: destination
  var value = kvPair[1]; // value: url
  var url = decodeURIComponent(value); 

  // Άνοιγμα προέλευσης εντός επικάλυψης
  window.location = url;

  // Άνοιγμα προορισμού σε εξωτερικό πρόγραμμα περιήγησης
  // admob.opener.openUrl(url, true);
}
</script>
</head>

<body>
<div style="position:relative;">
<!-- Φόρτωση προέλευσης περιεχομένου σε 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>
<!-- Δημιουργία περιοχής με δυνατότητα κλικ -->
<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

Το SDK διαφημίσεων Google για κινητά υποστηρίζει το πρότυπο Mobile Rich Media Ad Interface Definitions (MRAID) της IAB για διαφήμιση σε εφαρμογές για κινητά. Μπορείτε να ορίσετε ένα στοιχείο γραμμής ως MRAID v1 ή MRAID v2 μέσω των ρυθμίσεων στόχευσης στοιχείων γραμμής στην ενότητα Προσθήκη στόχευσης και Δυνατότητα συσκευής.

Απαιτήσεις MRAID:

  • Το MRAID v2 απαιτεί υπηρεσίες Google Play v7.8 ή μεταγενέστερη έκδοση για Android και SDK διαφημίσεων Google για κινητά v7.4.0 ή μεταγενέστερη έκδοση για iOS.
  • Το MRAID v3 απαιτεί υπηρεσίες Google Play v15.0.0 ή μεταγενέστερη έκδοση για Android και SDK διαφημίσεων Google για κινητά v7.30.0 ή μεταγενέστερη έκδοση για iOS.

Για να χρησιμοποιήσετε τις λειτουργίες MRAID στα δημιουργικά διαφημίσεων, θα πρέπει να εισαγάγετε ένα mraid.js στο δημιουργικό σας. Για να το κάνετε αυτό, συμπεριλάβετε το <script src="mraid.js"> στο δημιουργικό σας. Το SDK διαφημίσεων Google για κινητά, καθώς είναι συμβατό με το MRAID, θα αναζητήσει αυτόν τον κώδικα στο δημιουργικό και θα τον αντικαταστήσει με ένα πραγματικό URL το οποίο θα παραπέμπει σε μια υλοποίηση του MRAID. Κάποια άλλα SDK τα οποία υποστηρίζουν το MRAID θα κάνουν το ίδιο παρόλο που τα πραγματικά URL τους θα είναι διαφορετικά.

Μπορείτε προαιρετικά να συμπεριλάβετε στο ίδιο δημιουργικό τις βιβλιοθήκες MRAID, καθώς επίσης και τις δυνατότητες του SDK διαφημίσεων Google για κινητά.

Το mraid.resize() και άλλες παρόμοιες συναρτήσεις δεν θα έχουν καμία επίδραση μέχρι να γίνει κλικ στη διαφήμιση. Έτσι, αποτρέπεται η αυτόματη αλλαγή μεγέθους ενός κακόβουλου δημιουργικού και η εξάπλωσή του σε ολόκληρη την οθόνη.
τεκμηρίωση για προγραμματιστέςΜάθετε περισσότερα σχετικά με την υποστήριξη MRAID για Android ή iOS.

Σας βοήθησε αυτό;

Με ποιον τρόπο μπορούμε να το βελτιώσουμε;

Χρειάζεστε περισσότερη βοήθεια;

Δοκιμάστε αυτά τα επόμενα βήματα:

Ανάρτηση στην κοινότητα βοήθειας Λάβετε απαντήσεις από μέλη της κοινότητας
Επικοινωνήστε μαζί μας Πείτε μας περισσότερα ώστε να μπορέσουμε να σας βοηθήσουμε
true
Σημειώσεις έκδοσης

Διαβάστε για τις πιο πρόσφατες λειτουργίες του Ad Manager και ενημερώσεις του Κέντρου βοήθειας.

Δείτε τι νέο υπάρχει

Αναζήτηση
Διαγραφή αναζητήσεων
Κλείσιμο αναζήτησης
Κύριο μενού
17483910502902564742
true
Αναζήτηση στο Κέντρο Βοήθειας
true
true
true
true
true
148
false
false