Προσθήκη κώδικα για εγγενείς διαφημίσεις

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

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

Δείγμα εγγενούς στιλ

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

Τύπος κώδικα Δείγμα κώδικα

HTML με μεταβλητές

Τύπος κώδικα	Δείγμα κώδικα
HTML με μεταβλητές	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS με μεταβλητές	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS με μεταβλητές


.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

Αυτό το εγγενές στιλ θα μετατρέπει στοιχεία εγγενών δημιουργικών με τον παρακάτω τρόπο:

Στοιχείο	Παράδειγμα
Επικεφαλίδα	Τα 30 πιο γρήγορα αναπτυσσόμενα επαγγέλματα
Εικόνα	jobs.jpg
Κύριο σώμα	Σύμφωνα με την Υπηρεσία στατιστικών στοιχείων εργασίας των ΗΠΑ (U.S Bureau of Labor Statistics), αυτά τα επαγγέλματα θα παρουσιάσουν τη μεγαλύτερη ανάπτυξη τα επόμενα 10 χρόνια. Θα εκπλαγείτε από τη λίστα.

Σε μια εγγενή διαφήμιση το παραπάνω προβάλλεται ως εξής:

Παράδειγμα εγγενούς διαφήμισης

HTML

Προσθέστε ένα απόσπασμα HTML το οποίο υποδεικνύει τον τρόπο με τον οποίο θα εμφανίζεται η εγγενής διαφήμισή σας.

Μπορεί να χρειαστεί να συνεργαστείτε με τον προγραμματιστή ιστού ή τον προγραμματιστή της εφαρμογής σας για τη δημιουργία αυτού του κώδικα.
Το στοιχείο HTML μπορεί να περιλαμβάνει JavaScript σε ετικέτες <script>.
Συμπεριλάβετε μόνο το απόσπασμα που σχετίζεται με τη διαφήμιση, καθώς η συμπερίληψη ενός πλήρους εγγράφου HTML θα αποτρέψει την εμφάνιση διαφημίσεων σε ορισμένα προγράμματα περιήγησης, μεταξύ των οποίων το Internet Explorer. Για παράδειγμα, μην συμπεριλάβετε ετικέτες <doctype> ή <html> — δείτε το παραπάνω παράδειγμα.
Οι εγγενείς διαφημίσεις δεν υιοθετούν στιλ από τη γονική σελίδα, αλλά μπορείτε να εισαγάγετε εξωτερικά φύλλα στιλ και γραμματοσειρές ιστού με ετικέτες <link> στον κώδικα HTML.

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

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

Εισαγωγή μακροεντολών

Μπορείτε να κάνετε κλικ στην επιλογή Εισαγωγή μακροεντολής και να χρησιμοποιήσετε τα παρακάτω κουμπιά, για να δημιουργήσετε πιο εύκολα το HTML:

CacheBuster: Βεβαιωθείτε ότι κάθε φορά που εκτελείται ο κώδικας πραγματοποιείται μια νέα κλήση στον διακομιστή διαφημίσεων, έτσι ώστε η μέτρηση των εμφανίσεων να είναι ακριβής. Μάθετε περισσότερα σχετικά με το CacheBuster.
Κλικ (συνιστάται): Παρακολουθήστε τα κλικ, εάν το απόσπασμα κώδικά σας δεν περιέχει ειδικούς χαρακτήρες. Μάθετε περισσότερα σχετικά με τα κλικ.
URL προορισμού: Καθορίστε τη σελίδα προορισμού του δημιουργικού που θα πρέπει να εμφανίζεται όταν κάποιος κάνει κλικ στη διαφήμιση. Μάθετε περισσότερα σχετικά με τα URL προορισμού.
Κλικ με χαρακτήρα διαφυγής: Παρακολουθήστε τα κλικ εάν το απόσπασμα κώδικα περιέχει ειδικούς χαρακτήρες (για παράδειγμα, &, ?, %) στο URL προορισμού. Μάθετε περισσότερα σχετικά με τα κλικ με χαρακτήρα διαφυγής.
Περιτύλιγμα βίντεο: Το περιτύλιγμα που περιέχει το πρόγραμμα αναπαραγωγής βίντεο για την εγγενή διαφήμιση. Μάθετε περισσότερα σχετικά με τον τρόπο διαμόρφωσης των εγγενών τύπων βίντεο.

CSS

Εισαγάγετε τον κώδικα CSS που υποδεικνύει τον τρόπο με τον οποίο θα εμφανίζεται η εγγενής διαφήμισή σας. Δείτε το παραπάνω παράδειγμα.

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

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

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

Προσθήκη κώδικα για εγγενείς διαφημίσεις

HTML

Εισαγωγή μακροεντολών

CSS

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

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

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