Mimo ciągłego rozwoju przez autorów (a właściwie autorki ) tego systemu reklamy, wciąż jest w nim kilka niedogodności które powiem jak ominąć bądź obejść. Mam tutaj na myśli rozszerzone personalizowanie wyglądu widgetu, jego umieszczanie na stronie oraz przeliczanie stawek za dzień odsłony.

Korzystasz z AdTaily.pl i chcesz wycisnąć z niego siódme poty oraz zwiększyć przychody z reklamy? Zapraszam do dalszej części wpisu.

Cały wpis podzieliłem na dwa podrozdziały, jeden dotyczący wyglądu widgetu, oraz drugi na temat ustalania stawek za dzień odsłony.

Widget

Widget, czyli boks reklamowy jaki umieszczamy na swojej stronie. Mimo iż w panelu reklamowym możemy ustalić takie rzeczy jak tytuł czy kolor ramki oraz wypełnienia, to czasami jest to za mało.

Panel konfiguracji widgetu w serwisie AdTaily.pl

Pierwsza sytuacja, tytuł boksa. Nie można go usunąć, nawet wpisując pusty ciąg znaków. Czasami chcemy sami dodać nagłówek zgodny z wyglądem naszej strony. Druga sprawa, kolor wypełnienia, co jeśli tło naszej strony nie jest jednolite? Niestety nie możemy wybrać tła przeźroczystego.

Rozwiązanie? Nadpisanie stylów w arkuszu CSS:

#AdTaily_Widget_Container div
{
  border: none !important;
  background-color: transparent !important;
}

#AdTaily_Widget_Container span
{
  display: none !important;
}

Pierwszy fragment odpowiedzialny jest za usunięcie obramowania widgetu oraz ustawienie przeźroczystego koloru tła. Drugi natomiast za usunięcie nagłówka nad boksem.

Oczywiście możemy tutaj bardziej zaszaleć i dodać sobie przykładowo bardziej finezyjne obramowanie czy w inny sposób skonfigurować wygląd widgetu AdTaily.pl.

Szerokość widgetu

Drugą poważną wadą widgetu jest jego szerokość, która czasami przekracza realną na jaką jest zapotrzebowanie. Powoduje to, że mimo dostatecznej dostępnej szerokości na stronie gdzie znajduje się boks, mieści się w nim tylko jedna reklama w rzędzie, mimo iż na oko widać że weszły by tam dwie (dokładnie jak na tej stronie).

W tej sytuacji wystarczy że wrzucimy kod widgetu w warstwę której nadamy powiększoną szerokość i odpowiednio, relatywnie przesuniemy aby uzyskać optymalne położenie. Przykładowo:

<div style="position: relative; top: 0px; left: -10px; width: 290px;">
  ... kod widgetu ...
</div>

Liczę że każdy kto bierze się za umieszczanie kodu na stronie ma na tyle rozwinięte umiejętności operowania HTML’em iż zrozumie powyższą ideę i dobierze odpowiednio parametry w zaprezentowanym kodzie.

Cena

Jeden z ważniejszych parametrów ekonomicznych naszej reklamy . Cena jaką ustalamy w konfiguracji serwisu, jest to cena za dzień prezentowania reklamy. AdTaily.pl pobiera 30% prowizji od tego co płaci reklamodawca, a ustalana stawka jaką podajemy to pozostałe 70% jakie wpadnie do naszej kieszeni.

Cena jaka będzie widoczna w widgecie oraz katalogu AdTaily.pl wyraża się wzorem:

Cena dla reklamodawcy = Cena podana / 0,7

…analogicznie:

Cena podana = Cena dla reklamodawcy * 0,7

Po co te wzory? Gdyż czasami zachodzi potrzeba ustalenie tak ceny aby ta widoczna dla kupujących była na określonym poziomie – np.: jakaś równa kwota. Jeśli przykładowo chcemy aby cena na stronie była na poziomie równo 2zł to w panelu konfiguracyjnym musimy wpisać 1,40zł (2 / 0,7).

CPM

Koszt tysiąca odsłon reklamy. Jest to ważny czynnik przy ustalaniu ceny dziennej. Musimy pamiętać o tym aby nie przesadzić, gdyż po prostu nie zdobędziemy żadnego klienta. CPM określa nam realny koszt reklamy, bo co z tego jeśli mamy niską cenę per dzień skoro w przeliczeniu na odsłonę wychodzi drożej niż u tego który ma za dzień więcej?

I tutaj znów powstaje problem, jaką podać stawkę, aby po uwzględnieniu miesięcznych statystyk wyszedł pożądany przez nas wskaźnik CPM?

Cena podana = (Miesięczna ilość odsłon * CPM * 0.7) / 30 000

Zatem, jeśli nasz serwis zalicza przykładowo 20 000 odsłon w miesiącu, i chcemy aby CPM był na poziomie 0,40zł, to kwota jaką musimy podać za dzień wynosie 0,19zł.

Jeśli natomiast chcesz dowiedzieć się ile wyniesie CPM przy założonej cenie oraz miesięcznych statystykach odwiedzalności:

CPM = (30 000 * Cena podana) / (Miesięczna ilość odsłon * 0,7)

Dla przypomnienia, cena podana to kwota jaką wpisujemy w serwisie.

Bardzo szkoda że autorzy AdTaily.pl nie dali możliwości podawania stawki CPM zamiast dziennej. Było by to o wiele wygodniejsze i uwzględniało by wzrosty i spadki ilości wejść na stronę, dostosowując automatycznie cenę w dla reklamodawców.

Podsumowanie

Na blogu AdTaily.pl oraz forum, możemy przeczytać iż trwają pracę nad nową wersją widgetu oraz innymi udogodnieniami. Miejmy nadzieję że znajdą się tam również te dotyczące CPM.

Liczę że opisane tutaj zagadnienia pozwolą na ujarzmienie boksa od AdTaily.pl i zwiększenie zysków na Waszych stronach. Jeśli potrzebujecie innych rad lub wyliczeń, piszcie śmiało!

Zdecydowana większość systemów reklamowych opiera się na załączaniu zewnętrznego kodu JavaScript, który w przypadku wolnego serwera dostawcy reklam, może powodować niepotrzebne spowalnianie ładowania się naszej strony. O ile w sytuacji takich gigantów jak Google AdSense nie mamy się o co martwić, to przy korzystaniu z usług innych podmiotów czy też systemów pośredniczących (np.: OpenX), może warto zastanowić się jak pozbyć się tego problemu i nie opóźniać pokazania treści tylko przez reklamę. Zniecierpliwiony użytkownik naszej witryny może ją po prostu opuścić zanim zdąży cokolwiek zobaczyć.

Przedstawione rozwiązanie problemu jest stricte teoretyczne, gdyż docelowa implementacja zależy od konkretnego przypadku, a osoby które zajmują się tworzeniem stron internetowych na pewno będą wiedziały jak przenieść to na własny grunt.

Załóżmy hipotetyczną budowę naszej witryny w następującej postaci:

Przykładowy kod takiej witryny mógł by wyglądać w następujący sposób:

<div id="header"></div>
<div id="advert"></div>
<div id="content"></div>

Jeśli nie chcemy aby warstwa reklamowa blokowała pojawienie się treści, wystarczy że przeniesiemy ją na sam koniec. Ktoś powie – ok, ale w tym wypadku reklama powędruje na dół strony. Musimy zatem zastosować pewną sztuczkę. Mianowicie, zwiększamy dolny margines warstwy nagłówka o wartość wysokości sekcji reklamowej, tak aby powstała pusta luka. Z kolei warstwę z reklamą, pozycjonujemy w sposób absolutny (position: absolute;) przy pomocy stylów, umieszczając ja w otrzymanej wnęcę.

<div id="header" style="margin-bottom: 50px;"></div>
<div id="content"></div>
<div id="advert" style="position: absolute; top: 200px; height: 50px;"></div>

Tym sposobem, przeglądarka wyświetlając stronę, najpierw pokaże nagłówek, treść a dopiero na samym końcu reklamę – ale w odpowiednim miejscu. Jeśli ta z jakichś powodów nie będzie w stanie się wyświetlić (padnie serwer reklamy), to nie spowoduje to blokowania treści.

Oczywiście to co znajduje się pod reklamą, np.: stopka strony, nie pokaże się dopóki nie zostanie pobrana reklama, nie mniej, nie jest to tak istotny element w stosunku do treści po którą sięga odwiedzający witrynę.

Rozwiązania tego nie możemy zastosować w sytuacji w której odległość warstwy z reklamą jest zmienna w stosunku do początku strony, gdyż w tym momencie nie jesteśmy w stanie pozycjonować warstwy przy pomocy atrybutu absolute. Metodę tą stosuje z powodzeniem na dwóch swoich stronach i spisuje się znakomicie – cotozaplik.pl oraz checksum.me.

Chcąc dobrze dopasować nasz temat i określić wygląd wszystkich możliwych elementów musimy zdefiniować w arkuszu stylów również te klasy których używa sam PHP-Fusion. I tutaj pojawia się problem, skąd wziąć ich listę?

Też kiedyś stanąłem przed tym problemem, i napisałem drobny skrypt PHP, który analizuje wszystkie pliki tego systemu zarządzania treścią i wyłuskuje wystąpienia definicji klasy stylu (class=’…’). Efekt tych poszukiwań prezentuje poniżej.

admin-message
alt
article_idx_cat_name
bbcode
button
center
comment-name
comment_actions
comment_message
download_idx_cat_name
failed
faq_idx_cat_name
first-link
forum
forum-caption
forum_cat_name
forum_idx_table
forum_name
forum_table
forum_thread_table
forum_thread_title
forum_thread_user_name
forum_thread_userbar
full-header
news-category
pagenav
panelbutton
passed
photogallery_album_desc
photogallery_album_photo
photogallery_album_photo_info
photogallery_album_photo_link
photogallery_album_thumb
photogallery_photo
photogallery_photo_desc
photogallery_photo_link
poll
profile_user_avatar
profile_user_level
profile_user_name
quote
setuser_body
shoutbox
shoutboxdate
shoutboxname
side
side-hr
side-label
side-small
slink
small
small2
sub-header
tbl
tbl-border
tbl1
tbl2
textbox

Oczywiście nie trzeba deklarować wszystkich wypisanych klas, a jedynie te których wygląd chcemy doprecyzować.

Powyższa lista została sporządzona na bazie źródeł PHP-Fusion w wersji 7.00.07.

Niestety nie wszystkie przeglądarki obsługują w pełni CSS 3, dlatego posłużymy się pewnymi sztuczkami, aby efekt docelowy mógł być widoczny dla jak największej ilości odbiorców.

Na potrzeby tego wpisu, stworzyłem sobie prostą stronę z jednym elementem graficznym, oraz warstwą w jego wnętrzu o kolorze czarnym. Jeśli chciałbym teraz aby czarny prostokąt stał się przeźroczysty, wystarczy że zastosuje dla niego następującą klasę CSS:

.transparent
{
  opacity: 0.5;
}

W efekcie otrzymamy przeźroczysty w 50% czarny kwadrat.

Przed i po zastosowaniu klasy .transaprent

Właściwość opacity jest jednym z elementów CSS 3, dlatego, aby uodpornić się na inne przeglądarki, dodamy nieco dodatkowych właściwości, które niestety nie są zgodne z specyfikacją CSS w żadnej wersji. Nie mniej, nasza strona będzie poprawnie wyświetlana w większości popularnych przeglądarek (FF, Opera, IE, Chrome, inne oparte o silnik WebKit).

.transparent
{
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
}

Przyczyną tego stanu jest sposób w jaki przeglądarka pobiera kolejne zasoby dołączone do odwiedzanej strony. Łącząc wszystkie drobne grafiki w jeden większy plik, a następnie przy pomocy stylów CSS wybierając interesującą nas część, możemy znacznie przyspieszyć ładowanie takiej strony.

Jak działa przeglądarka?

Otwierając dowolną stronę www, uzyskujemy od serwera treść dokumentu HTML, to czy jest on statyczny czy generowany dynamicznie (przez np.: php) nie ma w tej chwili znaczenia, która jest parsowana i wyświetlana przez przeglądarkę. Jeśli ta napotka na swej drodze zewnętrzne zasoby w postaci stylów CSS, skryptów JavaScript czy też grafikę rozpoczyna ich pobieranie.

W czym tkwi problem?

Na nieszczęście, z uwagi na fakt iż protokół HTTP jest protokołem bezstanowym, każde pobranie zasobu poprzedzone jest otwarciem gniazda TCP, nawiązaniem połączenia, pobraniem danych oraz zamknięciem połączenia. Stwarza to pewien narzut w postaci danych oraz czasu. Jeśli mamy do czynienia z dużymi plikami, przykładowo zdjęciami, nie jest to tak istotne. Z kolei jeśli naszą stronę ozdabiają różne drobne elementy graficzne, wtedy ów narzut nie tyle przekracza rozmiar zasobu co wprowadza niepotrzebne opóźnienia, gdyż samo nawiązanie sesji TCP trwa dłużej niż pobranie piku.

Jak temu zaradzić?

Dobrym rozwiązaniem jest scalenie wszystkich elementów graficznych w jeden plik, np.: w postaci kolumny obrazków. Ktoś może powiedzieć, jaki w tym zysk skoro i tak przeglądarka musi pobrać tą samą ilość danych? Zgadza się, jednakże zyskujemy mnóstwo czasu na narzucie związanym z tworzeniem połączenia i jego kończeniem dla każdego zasobu z osobna. Co to oznacza w praktyce? Znacznie szybsze ładowanie strony. Oczywiście opłacalność zabiegu w dużej mierze zależy od ilości grafiki klasyfikującej się do scalenia.

A w praktyce?

Przejdźmy zatem do części praktycznej. O ile samo scalenie obrazków nie powinno stwarzać problemów o tyle ich późniejsze wykorzystanie może rodzić pytania. Jak „wyciąć” grafikę na której nam zależy? Oczywiście stosując odpowiednią klasę stylów kaskadowych. Najprostszym sposobem jest używanie obrazków jako tło którym jest nasz zbiorczy plik graficzny, przesunięty o żądaną ilość pikseli.

Zastosujmy teraz zdobytą wiedzę do stworzenia menu strony składającego się z etykiet tekstowych oraz ikon. Potrzebny nam będzie zestaw stosownych obrazków oraz odpowiednie style zastosowane do menu. Zacznijmy jednak od napisania samego kodu HTML:

<ul class="menu">
  <li class="home">Strona główna</li>
  <li class="mail">Kontakt</li>
  <li class="download">Pobierz</li>
  <li class="tools">Narzędzia</li>
</ul>

…kolejno arkusza stylów:

.menu
{
  list-style: none;
  color: #404040;
  font: bold 16px Arial;
}
.menu li
{
  float: left;
  height: 24px;
  line-height: 24px;
  padding: 0px 30px;
}
.home     { background: url(icons.png) 0px   0px no-repeat; }
.mail     { background: url(icons.png) 0px -24px no-repeat; }
.download { background: url(icons.png) 0px -48px no-repeat; }
.tools    { background: url(icons.png) 0px -72px no-repeat; }

…jeszcze dodajmy tylko użyty zestaw ikon:

…i cieszmy oko gotowym menu:

Jak widać, cała zabawa polega na odpowiednim przesunięciu tła tak aby trafić w interesujący nas punkt. Każda ikona ma rozmiar 24x24px, zatem musimy wymusić wysokość elementu menu właśnie na 24px, tak aby sąsiednie obrazki nie były widoczne.

Co zrobić w sytuacji w której mamy dużo rysunków o różnych rozmiarach? Można scalać je podobnie, jednakże lepszym wyjściem jest pogrupowanie identycznych pod względem rozmiaru w osobne pliki.