Dodawanie kodu na potrzeby reklam natywnych

Jeśli w przypadku reklam natywnych wybierzesz opcję Edytor HTML i CSS, musisz dodać kod HTML i CSS, by dostosować reklamy natywne i określić ich styl. W tym artykule znajdziesz związane z tym przydatne wskazówki i przykładowe kody.

Powstałe kreacje natywne mogą wyświetlać się jako reklamy tradycyjne (kreacje zarządzane przez wydawcę w ramach gwarantowanej automatyzacji to jedyne obsługiwane reklamy automatyczne). Aby wyświetlać kreacje natywne zarówno jako reklamy tradycyjne, jak i wszystkie typy reklam automatycznych, w Edytorze pomagającym w projektowaniu wybierz opcję „Dostosuj styl natywny na podstawie szablonów”.

Przykład stylu natywnego

Poniżej znajdziesz przykład kodu HTML i CSS w stylu natywnym na potrzeby elastycznego miejsca docelowego w kanale. Ten styl opiera się na formacie reklamy natywnej „post sponsorowany” obejmującym zmienne nagłówka, obrazu i tekstu.

Typ kodu Przykładowy kod

HTML ze zmiennymi

Typ kodu	Przykładowy kod
HTML ze zmiennymi	`<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 ze zmiennymi	.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 ze zmiennymi

.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;
}

Powyższy styl natywny konwertuje komponenty kreacji natywnej w ten sposób:

Komponent	Przykład
Nagłówek	30 najszybciej rozwijających się zawodów
Obraz	jobs.jpg
Tekst	Amerykańskie Biuro Statystyki Pracy przedstawiło zawody, które w ciągu najbliższych 10 lat rozwiną się najbardziej. Lista może Cię zaskoczyć.

W reklamie natywnej wygląda to tak:

Przykład reklamy natywnej

HTML

Dodaj fragment kodu HTML określający sposób wyświetlania reklamy natywnej.

W razie potrzeby skontaktuj się z twórcą witryny lub aplikacji, by utworzyć kod.
Może on obejmować kod JavaScript w tagach <script>.
Uwzględnij tylko fragment odnoszący się do reklamy – dołączenie całego dokumentu HTML uniemożliwi wyświetlanie reklam w niektórych przeglądarkach, między innymi w Internet Explorerze. Nie uwzględniaj np. tagów <doctype> ani <html> – patrz przykład powyżej.
Reklamy natywne nie dziedziczą stylów strony nadrzędnej, ale możesz zaimportować zewnętrzne arkusze stylów i czcionki treści internetowych za pomocą tagów <link> w kodzie HTML.

Ustawienie okna docelowego pozwala określić, czy reklamy natywne po kliknięciu mają się otwierać na tej samej karcie czy w nowym oknie.

Reklamy tradycyjne dziedziczą ustawienia na poziomie jednostki reklamowej.
Reklamy automatyczne dziedziczą ustawienia na poziomie sieci.

Wstawianie makr

Możesz kliknąć Wstaw makro i użyć poniższych przycisków, które pomagają w tworzeniu kodu HTML:

CacheBuster: pozwala upewnić się, że po każdym wykonaniu kodu do serwera reklam jest wysyłane nowe żądanie, co ułatwia prawidłowe liczenie wyświetleń. Dowiedz się więcej o CacheBuster.
Kliknięcie (zalecane): pozwala śledzić kliknięcia, jeśli fragment kodu nie zawiera znaków specjalnych. Dowiedz się więcej o kliknięciu.
Docelowy adres URL: pozwala określić stronę docelową kreacji, która powinna pojawiać się, gdy użytkownik kliknie reklamę. Dowiedz się więcej o docelowych adresach URL.
Kliknięcie ze zmianą znaczenia: pozwala śledzić kliknięcia, jeśli fragment kodu zawiera znaki specjalne (np. „&”, „?”, „%”) w docelowym adresie URL. Dowiedz się więcej o kliknięciach ze zmianą znaczenia.
Kod filmu: kod, który zawiera odtwarzacz służący do wyświetlania reklamy natywnej. Dowiedz się więcej o konfigurowaniu stylu natywnej reklamy wideo.

CSS

Podaj kod CSS określający sposób wyświetlania reklamy natywnej. Zobacz przykład powyżej.

Jeśli trafikujesz reklamy natywne o rozmiarze elastycznym, nie używaj CSS z pozycjonowaniem bezwzględnym.

Czy to było pomocne?

Jak możemy ją poprawić?

Dodawanie kodu na potrzeby reklam natywnych

HTML

Wstawianie makr

CSS

Czy to było pomocne?

Potrzebujesz dodatkowej pomocy?

Wykonaj te czynności: