Τροποποίηση του κώδικα αποκριτικής διαφήμισης

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

Σημαντικό:

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

Σημείωση: Τα παραδείγματα που περιγράφονται σε αυτό το άρθρο αποτελούν αποδεκτές τροποποιήσεις του κώδικα διαφήμισης του AdSense. Η τροποποίηση του κώδικα αποκριτικής διαφήμισης με αυτούς τους εγκεκριμένους τρόπους δεν συνιστά παράβαση των Πολιτικών προγράμματος του AdSense.

Παράδειγμα ορισμού ακριβούς μεγέθους στοιχείου διαφημίσεων ανά πλάτος οθόνης

Σε αυτό το παράδειγμα μπορείτε να δείτε πώς μπορείτε να τροποποιήσετε τον κώδικα αποκριτικής διαφήμισης, προκειμένου να ορίσετε συγκεκριμένα μεγέθη στοιχείου διαφήμισης για τρία εύρη πλάτους οθόνης: για κινητά, για tablet και για υπολογιστές. Για να ακολουθήσετε αυτό το παράδειγμα, δεν χρειάζεται να διαθέτετε προηγούμενη εμπειρία με τα ερωτήματα μέσων CSS ή με την τροποποίηση του κώδικα διαφήμισης του AdSense.

Δείτε ένα δείγμα τροποποιημένου κώδικα αποκριτικής διαφήμισης, στον οποίο ορίζονται τα ακόλουθα ακριβή μεγέθη στοιχείου διαφήμισης ανά πλάτος οθόνης:

• Για πλάτη οθόνης έως 500 pixel: ένα στοιχείο διαφήμισης 320x100.
• Για πλάτη οθόνης μεταξύ 500 και 799 pixel: ένα στοιχείο διαφήμισης 468x60.
• Για πλάτη οθόνης 800 pixel και μεγαλύτερα: ένα στοιχείο διαφημίσεων 728x90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Για να προσαρμόσετε αυτό το δείγμα με κωδικοποίηση στον δικό σας ιστότοπο:

1. Δημιουργήστε ένα στοιχείο διαφημίσεων προβολής στον λογαριασμό σας στο AdSense, φροντίζοντας να αφήσετε επιλεγμένο το στοιχείο Αποκριτική στην ενότητα Μέγεθος διαφήμισης. Σημειώστε τις παρακάτω πληροφορίες από τον κώδικα αποκριτικής διαφήμισης:
   • Το αναγνωριστικό εκδότη, για παράδειγμα ca-pub-1234567890123456
   • Το αναγνωριστικό του στοιχείου διαφημίσεων (data-ad-slot), για παράδειγμα 1234567890.
2. Στο δείγμα με κωδικοποίηση, κάντε τα εξής:
   • Αντικαταστήστε όλες τις παρουσίες του κώδικα example_responsive_1 με ένα μοναδικό όνομα, π.χ. Home_Page, front_page_123 κ.λπ.
     Σημειώσεις:

     • Το μοναδικό όνομα πρέπει να περιέχει μόνο αγγλικά γράμματα (A-Z), αριθμούς και σύμβολα υπογράμμισης και ο πρώτος χαρακτήρας του πρέπει να είναι αγγλικό γράμμα.
     • Πρέπει να χρησιμοποιείτε διαφορετικό μοναδικό όνομα κάθε φορά που προσαρμόζετε αυτό το δείγμα με κωδικοποίηση.
   • Αντικαταστήστε το στοιχείο ca-pub-1234567890123456 με το δικό σας αναγνωριστικό εκδότη.
   • Αντικαταστήστε το στοιχείο 8XXXXX1 με το αναγνωριστικό του δικού σας στοιχείου διαφημίσεων.
3. Αποφασίστε ποιο μέγεθος ανά πλάτος οθόνης θέλετε να λαμβάνει το στοιχείο διαφημίσεων:
   • Αν τα υπάρχοντα μεγέθη του στοιχείου διαφημίσεων στο δείγμα με κωδικοποίηση είναι ικανοποιητικά, δεν χρειάζεται να κάνετε καμία επιπλέον αλλαγή.
   • Αν θέλετε να ορίσετε διαφορετικά μεγέθη στοιχείου διαφημίσεων ανά πλάτος οθόνης, κάντε τα εξής στο δείγμα με κωδικοποίηση:
     • Αντικαταστήστε τα μεγέθη 320px και 100px με το πλάτος και το ύψος του στοιχείου διαφημίσεων που θέλετε να χρησιμοποιήσετε για πλάτη οθόνης έως και 500 pixel.
     • Αντικαταστήστε τα μεγέθη 468px και 60px με το πλάτος και το ύψος στοιχείου διαφήμισης που θέλετε να χρησιμοποιήσετε για πλάτη οθόνης μεταξύ 500 και 799 pixel.
     • Αντικαταστήστε τα μεγέθη 728px και 90px με το πλάτος και το ύψος στοιχείου διαφήμισης που θέλετε να χρησιμοποιήσετε για πλάτη οθόνης 800 pixel και μεγαλύτερα.
4. Αντιγράψτε και επικολλήστε τον τροποποιημένο κώδικα διαφήμισης στον πηγαίο κώδικα HTML της σελίδας όπου θέλετε να εμφανίζονται οι διαφημίσεις.
   Σημείωση: Αφού τοποθετήσετε τον κώδικα διαφήμισης, προτείνουμε να δοκιμάσετε τις διαφημίσεις σε διαφορετικές συσκευές και οθόνες, για να βεβαιωθείτε ότι η αποκριτική συμπεριφορά λειτουργεί σωστά.

Παραδείγματα σύνθετων λειτουργιών του κώδικα αποκριτικής διαφήμισης

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

Σημείωση: Η χρήση αυτών των σύνθετων λειτουργιών συνιστάται μόνο αν είστε σίγουροι ότι μπορείτε να τροποποιήσετε επιτυχώς τον κώδικα διαφήμισης.

Ορισμός επεκτάσιμου πλάτους και σταθερού ύψους

Μπορείτε να τροποποιήσετε τον κώδικα αποκριτικής διαφήμισης, για να καθορίσετε ένα επεκτάσιμο πλάτος και ένα σταθερό ύψος για το στοιχείο διαφήμισης μέσω CSS. Στο παρακάτω παράδειγμα μπορείτε να δείτε πώς να κάνετε αυτές τις τροποποιήσεις:

Παράδειγμα ορισμού επεκτάσιμου πλάτους με σταθερό ύψος

Αυτό το παράδειγμα δείχνει πώς μπορείτε να τροποποιήσετε τον κώδικα αποκριτικής διαφήμισης, για να ορίσετε σταθερό ύψος 90 pixel και μεταβλητό πλάτος από 400 pixel έως 970 pixel:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Ορισμός ακριβούς μεγέθους ανά πλάτος οθόνης

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

Παράδειγμα ορισμού ακριβούς μεγέθους ανά πλάτος οθόνης

Αν γνωρίζετε τα ακριβή μεγέθη στοιχείου διαφημίσεων ανά συσκευή που ταιριάζουν περισσότερο στον αποκριτικό ιστότοπό σας, τότε μπορείτε να χρησιμοποιήσετε τα ερωτήματα μέσων CSS3, για να ορίσετε το μέγεθος του αποκριτικού στοιχείου διαφήμισης. Το παρακάτω παράδειγμα δείχνει πώς μπορείτε να τροποποιήσετε τον κώδικα διαφήμισης, ώστε να χρησιμοποιούνται ερωτήματα μέσων CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Οι κανόνες @media αποτελούν σύνταξη CSS3 και υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης. Έχετε υπόψη ότι ο ορισμός του μεγέθους του στοιχείου διαφημίσεων μέσω CSS σε εξωτερικά φύλλα στιλ δεν υποστηρίζεται επίσημα.

Απόκρυψη στοιχείου διαφημίσεων

Σε συγκεκριμένες περιπτώσεις, ιδιαίτερα στις μικρότερες κινητές συσκευές, ίσως είναι καλό να μην προβάλλετε καθόλου διαφημίσεις. Αν θέλετε να αποκρύψετε ένα στοιχείο διαφήμισης, μπορείτε να ορίσετε μια παράμετρο με ερωτήματα μέσων CSS, ώστε να μην πραγματοποιούνται αιτήματα για διαφημίσεις και να μην προβάλλεται καμία διαφήμιση. Στο παρακάτω παράδειγμα μπορείτε να δείτε πώς να κάνετε αυτές τις τροποποιήσεις:

Παράδειγμα απόκρυψης διαφημίσεων για συγκεκριμένα μεγέθη οθόνης

Αν θέλετε να προβάλλετε διαφημίσεις μόνο για συγκεκριμένα μεγέθη οθόνης, μπορείτε να χρησιμοποιήσετε το CSS για αυτόν τον σκοπό. Το παρακάτω παράδειγμα δείχνει πώς μπορείτε να τροποποιήσετε τον κώδικα διαφήμισης, ώστε να χρησιμοποιούνται ερωτήματα μέσων CSS3 για την απόκρυψη διαφημίσεων για συγκεκριμένα μεγέθη οθόνης:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Σε αυτό το παράδειγμα, δεν θα εμφανίζονται διαφημίσεις, αν το πλάτος της οθόνης είναι μικρότερο από 400 pixel.

Ωστόσο, ακόμα και όταν χρησιμοποιείτε αυτήν την ευέλικτη επιλογή, πρέπει πάντα να συμμορφώνεστε με τις πολιτικές τοποθέτησης διαφημίσεων. Έχετε υπόψη ότι, σύμφωνα με τις πολιτικές προγράμματος, επιτρέπονται μόνο περιορισμένες τροποποιήσεις του κώδικα.