Firebug pruža dosta opcija za fino podešavanje web stranica i efikasno ispravljanje grešaka bez sati, pa čak i dana, provedenih u kreiranju i proveravanju koda. Od osnovnog HTML, preko CSS i JavaScript koda, mnogo različitih elemenata i jezika se kombinuje da bi se postigao željeni efekat na web stranici. Zavisno od toga da li radite sa HTML, CSS ili JavaScript kodim na web stranici, imate na raspolaganju nekoliko panela sa različitim funkcijama.

1. Console Panel

Ovaj panel sadrži komandnu liniju JavaScript-a koju možete koristiti za pronalaženje i ispravljanje grešaka u JavaScript kodu. Moguć je unos JavaScipt komandi posle znaka “>>>”  u dnu panela. Takođe, možete odrediti u kom trenutku ćete zaustaviti izvršavanje skripte i pregledati kod, red po red ili po segmentima.

Komandna linija u dnu kartice Console, koja počinje sa “>>>” prihvata JavaScript komande. Rezultati ili JavaScript komanda ako postoji, se prikazuju u konzoli. Komandna linija JavaScript-a je veoma moćan alat za Firebug. Ova funkcija Vam omogućava izvršavanje JavaScript dokumenata i komandi “u letu”, bez ponovnog učitavanja web stranice što praktično znači da ćete ispravnost koda i rezultat izvršavanja skripte moći da proverite u komandnoj liniji, pre nego što ga implementirate u Vašu web stranicu.

JavaScript Profiler izvešta o vremenu potrebnom za izvršavanje vaših JavaScript funkcija, tako da možete ispratiti karakteristike JavaScript komponenti koje usporavaju Vaše stranice ili JavaScript aplikacije. Da biste videli Profiler, potrebno je da bude aktivna kartica Console, a zatim kliknite na opciju “Profile” u podmeniju (redosled opcija je “Clear | Persist | Profile”). Profajler prikazuje listu svih pozvanih funkcija i vreme potrebno za pozivanje svake funkcije. Možete izabrati funkciju čiji profil želite da prikažete dodavanjem console.profile ([title]) na početak željenog odeljka, i console.profileEnd () na kraju.

2. HTML Panel

Firebug olakšava pozicioniranje i definisanje dimenzija pojedinih elemenata stranice, kao što su visina, širina ili margine i omogućava da odmah vidite kako se pojedine izmene odražavaju na izgled stranice. Svi HTML, CSS i JavaScript objekti internet stranice mogu se menjati sa jednim ili dvostrukim klikom miša. Čim počnete da kucate, promene su odmah vidljive u prozoru browser-a što pruža instant povratnu informaciju.

Pored toga što postojeće stilove stranice možete pregledati i modifikovati, Firebug Vam omogućava da, na kartici Style u HTML panelu, proverite “kaskadu” stranice. Ovo u praksi znači da možete veoma lako otkriti zašto se stilovi koje ste definisali za određeni element ne primenjuju kako ste zamislili. Sva podešavanja stila koja se odnose na određeni element, biće prikazana po hijerarhiji. Definicije stila koje su “pregažene” podešavanjima stila nekog roditeljskog elementa i koji se neće primenjivati na stranici, biće prikazane precrtane.

Izmene numeričkih vrednosti

Jedna od najboljih komponenti ove funkcije jeste otkrivanje tačnog pozicioniranja i definisanih vrednosti padding i margin atributa. Jednostavno kliknite na numeričku vrednost koju želite da promenite i unesite novu vrednost preko tastature, ili koristeći strelice na gore i na dole na tastaturi povećajte ili smanjite vrednost za jedan. Pomoću tastera Tab možete prelaziti na naredne vrednosti polja za unos.

Layout panel: Procena visine, širine, padding-a, bordera i margina

Kada koristite Inspect element opciju, levi panel prikazuje HTML kod, dok se u desnom panelu prikazuje CSS. Pored CSS oznake, u vrhu desnog panela nalazi se kartica Layout. Ova kartica ilustruje CSS layout koji se odnosi na izabrani element. Da biste videli visinu ili širinu bilo kog drugog elementa na stranici, jednostavno izaberite Inspect element, dok je ovaj prozor otvoren i pređite mišem preko elemenata web stranice koje želite da pregledate.

U meniju kome pristupate preko strelice pored naziva HTML panela, možete uključiti/isključiti vidljivost određenih elemenata stranice. Između ostalog možete definisati da li će Firebug, ukoliko je tekst u okviru nekog elementa (na primer, <p> tagova) dugačak, skratiti ovaj tekst i dodati “…” unutar teksta ili na kraj liste atributa, ili će prikazivati ceo tekst, da li će komentari upisani unutar <!– i –> tagova u kodu stranice biti vidljivi ili ne, i slično.

Logovi događaja

Da biste omogućili logovanje događaja, jednostavno kliknite desnim tasterom miša unutar HTML panela i izaberite opciju Log Events. Lista događaja vezanih za izabrani element će se prikazati u panelu Console. Logovi registruju događaje kao što su – mousemove, mouseout, mouseover, select, click, dblclick, keypress.. vezane za prelaženje mišem preko izabranog elementa stranice, klik ili dvostruki klik mišem, upis teksta u polja za unos i slično.

3. CSS Panel

CSS panel Vam omogućava da podesite CSS stilove stranice prema svojim potrebama. Možete koristiti ovaj panel za pregled ili editovanje CSS dokumenata “u letu” i videti odmah rezultat napravljenih promena na dokumentu koji je trenutno aktivan u browser-u. Ovaj panel se najčešće koristi za podešavanje piksela, pozicije elemenata, izgleda i stila elemenata unutar HTML dokumenta. Takođe je korisno ako želite da vidite elemente čije su vrednosti postavljene na none, ili invisible.

CSS inspektor omogućava prikaz svih učitanih stilova stranica i promene stilova “u letu”. U podmeniju ovog panela, pored opcije Edit, nalazi se lista učitanih stilova stranice, iz koje možete izabrati jedan da biste ga pregledali preko panela.

4. Script Panel

U Script panelu se prikazuju JavaScript fajlovi i dokument iz kojeg se oni pozivaju. U podmeniju ovog panela, desno od ikonice Break On Next možete videti listu JavaScript fajlova i izabrati jedan koji želite da pregledate preko panela, postaviti Breakpoints i uslove pod kojima se pojavljuju tačke prekida. Ovaj panel Vam omogućava otklanjanje grešaka unutar JavaScript koda, direktno u browser-u.

5. DOM Panel

HTML elementi su takođe poznati kao DOM elementi. DOM (Document Model Object) predstavlja hijerarhiju HTML elemenata i funkcija. DOM panel prikazuje sve elemente stranice, njihove karakteristike i povezanost između njih. Takođe, prikazuje sve JavaScript promenljive i njihove vrednosti.

DOM inspektor pruža informacije o svim svojstvima svih objekata u dokumentu. Njegova možda najbolja karakteristika je da promene, tokom dinamičkog update-a Vaše web stranice, neće uticati na promenu koda stranice, vidljivog u View source opciji browser-a, već će biti vidljive u ostalim Firebug panelima.

Opcija CSS u podmeniju DOM inspektora prikazuje sva važeća CSS pravila za elemente web stranice, uključujući i osobine koje su nasledili od roditeljskih elemenata i omogućava Vam da uključite/isključite ili izmenite pojedinačna podešavanja stila i dodate CSS pravila.

6. Net Panel

Net panel prikazuje sve upite koje browser pravi prilikom učitavanja stranice, vreme potrebno svakom resursu za učitavanje, HTTP zahtevana zaglavlja i odgovore koje server šalje za svaki resurs. Opcija XHR koja se nalazi u podmeniju ovog panela je korisna za otklanjanje grešaka u AJAX kodu.

Provera brzine učitavanja stranice

Na kartici Net grafički je prikazano vreme odziva svih elemenata web stranice prilikom njenog učitavanja u browser. Monitoring mreže mora biti uključen kako bi Net panel radio, ali je po podrazumevanim podešavanjima ta opcija već uključena (opcije u padajućem meniju kartice Net vam dozvoljavaju da ovu opciju naknadno isključite ili uključite prema sopstvenim potrebama).

Ovo je zgodan način za testiranje (i dokazivanje) da se postavljanjem vašeg JavaScript koda u footer web stranice, posebno strana koje sadrže pretežno JavaScript, značajno poboljšava vreme preuzimanja stranice sa Interneta. Ukupno vreme preuzimanja će biti isto, ali pošto pretraživači, kada naiđu na skripte, zaustavljaju učitavanje stranice dok ne preuzmu skriptu, stranica će izgledati kao da je potrebno manje vremena za učitavanje, što će se pozitivnije odraziti na posetioce web stranice.

Levim klikom na znak plus sa leve strane imena fajla prikazuje se HTTP zaglavlje za svaku datoteku koja je skinuta.

I pored velikog broja pozitivnih strana koje ovaj Mozilla plugin poseduje, Firebug spada u problematične ekstenzije i može praviti probleme sa prekomernim korišćenjem procesora i RAM memorije Vašeg računara. Zbog toga, ukoliko uočite da Vaš računar usporava kada surfujete, proverite CPU i Memory Usage preko Task Manager-a i deaktivirajte Firebug. Generalna preporuka je da Firebug uključite samo kada Vam je potreban za kodiranje i dizajn web strana, i da ga deaktivirate dok surfujete netom.

Listu svih problematičnih ekstenzija možete pregledati u MozillaZine bazi znanja koja sadrži dokumentaciju vezanu za sve Mozilla proizvode.

Firebug je besplatna Open Source alatka dostupna kao plugin za Firefox koja omogućava pronalaženje i otklanjanje grešaka u HTML, CSS i JavaScript kodu. Tutorijal je namenjen svima koji se na bilo koji način bave web dizajnom i razvojem Internet stranica. Za praćenje i razumevanje tutorijala potrebno je da imate osnovno znanje HTML, CSS i JavaScript koda i instaliran Firebug. U trenutku pisanja ovog tutorijala poslednja stabilna verzija je 1.5 i možete je preuzeti sa zvaničnog sajta proizvođača.

Šta Firebug nije?

Firebug nije editor koda. To praktično znači da nema mogućnost trajnog čuvanja izmena koje ste testirali na Vašoj stranici (osim ako te izmene sami prekopirate i sačuvate). Funkcija ove alatke je manipulisanje kodom direktno na stranici i praćenje kako određene promene utiču na izgled stranice bez potrebe za stalnim čuvanjem, upload-om na server i osvežavanjem stranice da bi izmenjen sadržaj postao aktivan.
Iako kreatori ovog plugin-a najavljuju da će neka od budućih verzija imati mogućnost čuvanja izmena u kodu stranice, u Firebug-u ovakva funkcija trenutno ne postoji.

Šta Firebug jeste?

Firebug je trenutno najpopularniji Mozilla Firefox plugin namenjen razvoju web stranica. Omogućava proveravanje HTML koda i menjanje stilova i layout-a stranice u realnom vremenu i predstavlja naprednu alatku za otklanjanje grešaka u JavaScript kodu. Pored toga pruža pregled svih upita koje browser pravi prilikom učitavanja web stranice, kao i grafički prikaz vremena potrebnog za učitavanje, pojedinačno za svaki element stranice.
Još jedna korisna funkcija Firebug-a je mogućnost praćenja XMLHttpRequest saobraćaja, na kojem se temelji AJAX. Firebug nudi i svoju varijantu DOM Inspector-a, a omogućava Vam da sa tačno određene stranice pratite logove HTML, CSS, JS i XML grešaka, umesto preko Firefox konzole za greške.

Treba pomenuti da za Firebug postoji veliki broj ekstenzija sa različitim dodatnim funkcijama koje olakšavaju manipulaciju sa HTML, CSS, DOM i JavaScript elementima Vašeg sajta.

Takođe postoji verzija ovog plugina Firebug Lite, namenjena ostalim browserima, kao što su IE6+, Opera, Chrome i Safari.

Ekstenzije

FireFile – Firebug ekstenzija koja omogućava čuvanje CSS fajlova modifikovanih pomoću Firebug-a.
FirePHP – omogucava ispis u Firebug konzolu pozivanjem proste PHP funkcije, narocito korisno za ajax developere.
Yslow – Dodatak za Firefox integrisan sa Firebug plugin-om. Yslow analizira i ocenjuje web stranice na osnovu tri predefinisana seta pravila ili na osnovu pravila koja definiše sam korisnik. Na osnovu toga prikazuje statistiku stranice i predlaže načine za poboljšanje performansi kako bi se stranice brže učitavale u browser.

SenSEO – Ovaj dodatak služi za proveru najvažnijih on-page SEO kriterijuma i procenjuje koliko dobro Vaša web stranica ispunjava ove kriterijume. SenSEO procenjuje Vašu stranu prema smernicama za optimizaciju, koje je definisao Google, kao što Yslow rangira stranicu prema kriterijumima za optimizaciju performansi koje je definisao Yahoo.

SenSEO pruža pregled bitnih SEO komponenti web stranice i analizira on-page SEO kriterijume kao što su title, meta description, keywords, headings tagovi, i još mnogo toga. Može biti vrlo koristan alat za jednostavno ispravljanje grešaka koje ste možda prevideli tokom pisanja koda web stranice.

Pixel Perfect – Firefox dodatak pomoću koga web dizajneri i developeri mogu lako da “preklope” kodiranu HTML stranicu sa dizajnom koji treba pretvoriti u HTML/CSS, i tako vizuelno uporede koliko se napisani kod razlikuje od onoga što je predviđeno dizajnom. Piksel Perfect takođe ima Opacity opciju tako da možete istovremeno videti obe verzije i na osnovu toga lako odrediti tačan položaj i dimenzije elemenata web stranice u odnosu na originalni dizajn.
Ostale Firebug ekstenzije možete pronaći na zvaničnom sajtu Firebug.

HTML (HyperText Markup Language, jezik za označavanje hiperteksta) je opisni jezik specijalno namenjen opisu web stranica. Pomoću njega se jednostavno mogu odvojiti elementi kao što su naslovi, pasusi, citati i slično. Pored toga, u HTML standard su ugrađeni elementi koji detaljnije opisuju sam dokument kao što su kratak opis dokumenta, ključne reči i slično. Ovi podaci su poznati kao meta podaci i jasno su odvojeni od sadržaja dokumenta. Sam standard održava W3C konzorcijum (World Wide Web Consortium).

Naredna tema je namenjena onima koji su tek počeli da se bave razvojem Web-a. Ako imate do jedne godine iskustva ili manje, neki od narednih saveta vezanih za HTML Vam mogu pomoći da unapredite svoja znanja iz ove oblasti.

1. Uvek zatvarajte tagove

Ranije nije bilo neobično videti delove koda kao što je ovaj:

<li>Text 1.
<li>Text 2.
<li>Text 3.

Možete primetiti da je izostavljeno zaokruživanje  <ul> ili <ol> tagovima. Osim toga, mnogi su se odlučivali za opciju da <li> tagove takođe ostavljaju otvorenim. Po današnjim standardima, ovo se jednostavno smatra lošom praksom i trebalo bi je izbeći u 100% slučajeva. Dakle, uvek zatvarajte tagove u okviru HTML koda. U suprotnom, nailazićete na probleme sa validacijom i greške u učitavanju stranice na svakom koraku.

Preporuka

<ul>
<li>Text 1. </li>
<li>Text 2. </li>
<li>Text 3. </li>
</ul>

2. Prikažite ispravan DocType

DOCTYPE (Document Type Declaration) ide ispred HTML taga u vrhu stranice i govori pretraživaču da li stranica sadrži HTML ili XHTML specifikaciju, odnosno govori validatoru koju verziju HTML-a ili XHTML-a da koristi za proveru sintakse dokumenta.

HTML 4.01 Strict – Sadrži sve HTML elemente i atribute, ali ne uključuje prezentacione i prevaziđene elemente (kao što su fontovi). Okviri (frameset) nisu dozvoljeni.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Transitional – Sadrži sve HTML elemente i atribute, uključujući prezentacione i prevaziđene elemente (kao što je font). Okviri (frameset) nisu dozvoljeni.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

XHTML 1.0 Transitional – Sadrži sve HTML elemente i atribute, uključujući prezentacione i prevaziđene elemente (kao što je font). Okviri (frameset) nisu dozvoljeni. Takođe, kod mora sadržati ispravnu XML sintaksu.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Strict – Sadrži sve HTML elemente i atribute, ali ne uključuje prezentacione i prevaziđene elemente (kao što su fontovi). Okviri (frameset) nisu dozvoljeni. Kod mora sadržati ispravnu XML sintaksu.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Postoje različita mišljenja po pitanju pravilnog izbora DocType deklaracije dokumenta. Jedno mišljenje je da je najbolja praksa koristiti XHTML Strict verziju. Međutim, posle nekih istraživanja, zaključeno je da većina pretraživača, prilikom interpretacije stranice, ovaj DocType vraćaju na običan HTML. Iz tog razloga, većina je odabrala da koristi HTML 4.01 Strict deklaraciju. Za bilo koju opciju da se odlučite, biće potrebno da testirate funkcionalnost stranice za različite Internet pretraživače.

3. Izbegavajte definisanje stilova unutar HTML elemenata

Tokom dužeg rada na pisanju stranice možete biti u iskušenju da u hodu dodate i poneki stil.

<p style= “ color: blue;”>Tekst</p>

Naravno, ovo izgleda bezopasno, ali ukazuje na grešku u Vašoj praksi pisanja HTML koda.

Kada kreirate HTML stranicu, nemojte još ni razmiljati o stilovima. Umesto toga, počnite da dodajete stilove onda kada je HTML stanica u potpunosti kodirana. Završite kreiranje HTML dokumenta, a zatim pozovite taj tag iz eksterne stranice sa stilovima.

Preporuka:

#element-1    p  {
color: blue;
}

<p id=“element-1”>
</p>

4. Smestite sve eksterne CSS fajlove u okviru <head> taga

Tehnički, stranice sa stilovima možete smestiti gde god to želite. Pa ipak, HTML specifikacija preporučuje da oni budu smešteni na početku dokumenta, u  okviru <head> taga. Primarna korist od ovakve prakse jeste da će se vaše stranice naizgled brže učitavati.

<head>
<title> HTML – Praktični saveti za početnike</title>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” />
<link rel=“stylesheet” type=“text/css” media=“screen” href=“css/layout.css” />
</head>

5. Razmislite o smeštanju Javascript fajlova na kraj HTML dokumenta

Zapamtite da je prioritet da se posetiocima Vašeg sajta stranica učita što je brže moguće. Pretraživač ne može nastaviti sa učitavanjem ostalog sadržaja stranice dok učitava skriptu. Iz tog razloga korisnik mora da čeka duže pre nego što vidi neki napredak.

Ako Vaš sajt sadrži Javascript fajlove čija je jedina svrha dodavanje funkcionalnosti stranice – na primer, nakon što posetilac klikne na dugme – slobodno smestite ovakve fajlove na kraj dokumenta, pre zatvaranja <body> taga.

Preporuka:

</div><!– end container –>
<script type=“text/javascript” src=“path/to/file.js”></script>
<script type=“text/javascript” src=“path/to/anotherFile.js”></script>
</body>
</html>

6. Validacija HTML i CSS koda

Preporučujemo svima, posebno početnicima, korišćenje Web Developer plugin-a namenjenog Firefox-u i dve veoma korisne opcije “Validate HTML” i “Validate CSS”. Iako je CSS relativno jednostavan za učenje, ima dosta stvari koje će vam zadavati muke dok se ne uhodate. Kao što ćete i sami zaključiti, obično su “rupe” u CSS sintaksi te koje uzrokuju čudne probleme sa elementima Vaše web prezentacije. Validacija koda većinu tih problema može rešiti.

Kao razloge za validaciju W3C navodi sledeće:

• Test validacije možemo shvatiti kao alat za debbuging. Iako sami pretraživači u novije vreme izuzetno dobro parsiraju čak i najlošije napisan HTML dokument, neke greške nije moguće prevazići. Poštovanje standarda Vam osigurava da će posetioci videti Vašu internet prezentaciju upravo onako kao Vi želite da izgleda, bez obzira koji browser koriste.
• Osiguravamo da se stranica ispravno prikazuje i u budućim verzijama pretraživača
• Olakašava održavanje
• Znak je profesionalnosti

Web sajt ne mora biti savršeno kodiran za dobijanje dobrog mesta u rezultatima pretraga, ali ispravan kod može Vam garantovati da će se stranica korektno prikazati i da će pretraživači ispravno indeksirati i zapamtiti sadržaj Vaših stranica. Takođe, validacijom možete otkriti suvišan i nepotreban kod, kao i onaj koji se ne prikazuje ispravno u svim browser-ima.

7. Firebug

Firebug je, bez sumnje, najbolji Firefox plugin koji ćete ikada koristiti prilikom kreiranja web sajtova. Ne samo da je od velike pomoći za otklanjanje grešaka u Javascript-u, već sa velikom lakoćom možete pregledati CSS, HTML i JavaScript kodom bilo koje stranice na Internetu, utvrditi kako su elementi stranice povezani i proveriti kako pojedine izmene u kodu utiču na izgled stranice.

8. Koristite H1-H6 tagove

Najbolja praksa je korišćenje svih šest <h> tagova, iako su u najvećem broju slučajeva u upotrebi samo prva četiri. Iz semantičkih i SEO razloga, naterajte sebe da zamenite <p> tagove <h6> tagovima kada je to moguće.

Kao i za sve ostalo, opredelite se za ono što najviše odgovara Vašem web sajtu. Međutim, ako pravite blog preporučujemo da sačuvate <h1> tagove za naslove vesti.

9. Navigacija u okviru liste

Svaki sajt ima deo sa navigacijom neke vrste. Iako definitivno možete izaći na kraj sa ovako definisanim menijem:

<div>
<a href=”#”>Home </a>
<a href=”#”>About </a>
<a href=”#”>Contact </a>
</div>

Ispravno je koristiti <ul> tag, s obzirom da mu je namena upravo kreiranje lista.

Preporuka

<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>

10. Dodajte svim slikama ALT atribut

<IMG SRC=”image274.jpg” />

Iako je jednostavije ignorisati potrebu za definisanjem alt atributa u okviru <img> tagova, veoma je značajno, kako zbog dostupnosti, tako i zbog validacije stranice, da odvojite vreme i definišete ove parametre.

Preporuka

<img title=”alvihost – hosting, internet marketing i web design usluge” alt=”alvihost logo” src=”images/logo.gif”/>

11. Učite od boljih

Ako ste tek počeli da učite HTML, razumljivo je da ne možete odmah sve sami znati, kao i da niste sasvim sigurni odakle da počnete. Za početak, isprobajte naše savete i pronađite na Internetu stranice koje vam se sviđaju i otkrijte kako su kodirani elementi tih stranica. Vremenom ćete početi da razvijate svoje sopstvene stilove i metode.

Primetili ste neke Javascript efekte koje biste želeli da naučite? Veoma je verovatno da je dizajner stranice koristio neki plugin koji proizvodi taj efekat. Pogledajte Source i potražite u kodu naziv skripte (obično na početku ili pri kraju HTML dokumenta). Zatim naziv potražite na Google-u i implementirajte novi plugin u Vaš sajt.

Nakon što ste uspešno kreirali Vaš Google Analytics nalog i  upoznali se sa osnovnim mogućnostima koje Vam nudi Google Analytics Dashboard, želećete da otkrijete prednosti i mane Vašeg web sajta i načine za njegovo unapređivanje. Važno je da imate jasno definisane ciljeve za Vaš sajt.
Šta je to što želite da posetioci urade kada dođu na sajt?
Praćenje Google Analytics izveštaja vezanih za funkciju Goals and Funnels Vam pomaže da shvatite kretanje posetilaca na Vašoj web stranici i da otkrijete koji koraci u procesu koji ste definisali sprečavaju posetioce da dođu do ciljne stranice koju ste zadali.

Na IX Međunarodnoj konferenciji E-trgovine, na Paliću, Nada Bukinac iz OTP banke održala je predavanje o Google Analytics tehnikama za merenje uspešnosti marketing kampanje i konverzije u kome je bilo reči i o kreiranju i praćenju ciljeva sajta.

Stepen konverzije na sajtu jeste jedna od najbitnijih matrica u web analitici jer definiše procenat jedinstvenih posetilaca koji su u određenom vremenskom periodu završili proces kupovine, prijave ili neki drugi proces postavljen kao cilj sajta/kompanije. Najbitnije je definisati koji su to strateški ciljevi sajta/kompanije i onda za njih meriti stepen konverzije.

Većina analitičara stepen konverzije definiše kao procenat posetilaca koji su uradili nešto što je vlasnik sajta želeo da posetioci urade: da poruče proizvod, prijave se na newsletter… Ako posmatramo posetioce sajta, treba da budemo svesni da ne možemo sve konvertovati. Manjina (20-40) posetilaca koji dođu na sajt ima nameru da kupi, dok ostatak dođe da istraži specifičnosti usluga koje pružate, da nauči nešto o Vama/kompaniji, traži posao, pročita obaveštenja za javnost, žele pomoć korisničke podrške ili žele da se odjave sa newsletter-a.

Merićemo da li je posetilac zadovoljio svoju svrhu dolaska na sajt tako što ćemo definisati zadatke kao ciljeve (Goals) koji će izgledati otprilike ovako: Istraživanje proizvoda/usluga, Kupovina proizvoda/usluga, Informisanje o kompaniji, Korisnička podrška, Download… Posle analize kompletiranih zadataka shvatićete zašto ljudi dolaze na vaš sajt, koliko njih je tu da kupi proizvod/uslugu i najbitnije, koji su to nedostaci sajta.

Jednom kada ste podesili funkciju Goals moći ćete da vidite stope konverzije i novčanu vrednost saobraćaja na Vašem sajtu. Takođe, možete definisati “Funnel path” za pojedinačne ciljeve koje ste postavili. Funnel path predstavlja “putanju” koji želite da posetioci Vašeg sajta pređu da bi došli do zadatog “cilja”. Definisanje Funnel path Vam omogućava da pratite koliko posetiilaca na Vašem sajtu je zapravo uspelo da zadovolji svoju primarnu svrhu dolaska na sajt.

Goal – je zapravo samo jedna poseta određene web stranice. Za cilj možemo postaviti stranicu koja se učitava kada posetilac završi proces kupovine, ostavi kontakt podatke (lead), preuzme neki fajl i slično.  Neki najčešći ciljevi su: stranica koja potvrđuje da je online kupovina uspešno obavljena, ili da se posetilac uspešno prijavio na Vašu mailing listu.

Funnels - Prilikom kreiranja ciljeva u Google Analytics-u možete predvideti, odnosno definisati sekvencu stranica „Funnel“ kroz koje posetilac treba da prođe dok ne stigne do krajnje stranice koja je definisana kao cilj.

Goal and Funnel Setup

1. Da biste podesili Goals and Funnels potrebno je da kliknete na link Edit u podešavanjima Vašeg profila.

2. U odeljku Goals izaberite Add Goal

3. U zavisnosti od toga koju opciju izaberete kao Goal Type biće Vam ponuđena različita polja za unos informacija. Ako ste se odlučili da cilj bude neka stranica Vašeg sajta (na primer, stranica za potvrdu o uspešno obavljenoj online kupovini) izaberite Goal Type – URL Destination.

4. Unesite naziv cilja. Ime bi trebalo da bude opisno tako da ih lako možete razlikovati ako postavljate više ciljeva za vaš sajt. Unesite URL adresu stranice koja će biti konačni korak od Vašeg cilja.

5. Definisanje odeljka Goal Funnel nije obavezno, ali se može koristiti ako imate niz koraka kroz koje korisnik obično prolazi do ciljne stranice. Definisanjem opcije Funnel možete da koristite Google Analytics izveštaj za analizu efikasnosti svakog koraka koji posetioci moraju da prođu do ciljane stranice.

6. Match Type – predstavlja podešavanje vrste podudaranja na osnovu URL adrese koju upisujete u polja Goal URL ili Funnel URL

Exact Match: Znači da će URL adresa u pretraživaču posetioca sajta morati da se podudara sa onom koju unesete u polje Goal URL. U ovom primeru URL adrese se neće podudarati i neće biti evidencije o ovoj poseti u vašem Goals izveštaju, iako se poseta završila kupovinom.

URL adresa posetioca: /checkout/thank-you.html?orderid=7348
Ciljana URL adresa: /checkout/thank-you.html

Head Match: Ovo znači da, ukoliko se početak URL adrese u pretraživaču posetioca sajta  poklapa sa adresom koju ste uneli u polje Goal URL, poseta će biti evidentirana u Goals and Funnels izveštaju. U ovom primeru obe adrese u pretraživaču posetioca sajta  se poklapaju sa ciljnom URL aresom:

URL adresa posetioca: /checkout/thank-you.html
URL adresa posetioca: /checkout/thank-you.html?orderid=7348
Ciljna URL adresa: /checkout/thank-you.html

Regular Expression Match*: Ovo je napredna opcija koja omogućava veliku fleksibilnost u postavljanju ciljeva. Postoje brojne knjige i drugi izvori koji objašnjavaju opciju Regular Expression. Ukratko, možete da koristite specijalne karaktere kako biste prilagodili ciljni URL da bude upravo ono što vi želite. U ovom primeru možemo zahtevati da drugi korak funkcije Funnel sadrži jednu od dve ponuđene URL adrese: “/checkout/step-two-a.html” ili “/checkout/step-two-b.html”.

STEP 1: ^/checkout/step-one\.html$
STEP 2: ^/checkout/(step-two-a|step-two-b)\.html$
STEP 3: ^/checkout/step-three.html$

7. Opciono, možete definisati Goal Value*, ako želite da pratite novčanu vrednost Cilja koji ste definisali. Ako vaš Cilj koristi dinamičke vrednosti, kao sto je vrednost proizvoda koje posetilac stavi u korpu, prilikom elektronske kupovine, ostavite ovo polje prazno.

Do sada smo pisali o osnovama XOOPS CMS-a. Da biste se lakše upoznali sa ovim CMS-om, prikazaćemo vam kako izgleda postupak njegove instalacije, pokrenut na lokalnom serveru, tj. korišćenjem softvera EasyPHP. Procedura je ista ili neznatno različita ako XOOPS instalirate i na serveru, važno je znati samo neke instalacione podatke.

Prvi korak – Preuzimanje arhive

Ono što je esencijalno za ovaj tutorijal je pre svega objekat instalacije, a to je dakle arhiva. Iako je ovaj tutorial pripreman u odnosu na verziju 2.4.4, procedura je ista ili će biti slična za sve buduće verzije. Dakle, idite na adresu www.xoops.org i kliknite na dugme “Get it Now!”, što znači “preuzmi ga odma’!” Pratite dalja uputstva sa slika i definitivno ga preuzmite odma’!

Arhiva je veličine oko 7 megabajta, zapakovana, a neraspakovana je 15 megabajta. Nije malo, mora se priznati, ali u jednom od sledećih nastavaka, pokazaćemo vam kako da smanjite instalaciju XOOPS-a i izbacite nepotrebne fajlove.

Drugi korak – Priprema za instalaciju

Nakon preuzimanja arhive, otpakujte je na vaš lokalni disk. U suštini možete kopirati fajlove i direktno iz arhive. Jedini trenutno bitan direktorijum (popularno nazvan folder) je htdocs, koji aludira na isti ili sličan public (javni) direktorijum na serveru. To, dakle, znači da sadržaj htdocs direktorijuma treba prekopirati na javno dostupno mesto na serveru koji se uglavnom tako i zove, dakle htdocs. Pošto postupak primenjujemo u lokalu, naš javni direktorijum je malo drugačiji.

Ono što treba znati pre početka instalacije su podaci o bazi. Ako koristite EasyPHP možete ih dobiti  klikom na tray ikonu i u meniju izabrati Administration. Skrolujte stranu do podataka za MySQL, koji su u ovom slučaju:

host: localhost
username: root
pasword: — (nema, dakle prazno polje)
path to database dir: koji god da vam prikaže

Prilikom instalacije na živi server, takođe su vam potrebni ovi podaci, koje uglavnom dobijete od vašeg hosting provajdera, a mi naravno preporučujemo Alvi Host.

Nakon što ste raspakovali arhivu u predviđeni public direktorijum i zapisali (zapamtili?) podatke, možemo početi sa instalacijom.

Treći korak – Instalacija XOOPS portala

Instalacija XOOPS portala, kao između ostalog i svih ostalih, pokreće se ulaskom u public direktorijum. EasyPHP nam to daje skraćenicom F7, a u slučaju “živog” sajta, to je vaš url, npr. www.sajt.com.

Ulaskom u isti, pokrenuće se automatska instalacija i na prvom ekranu imaćete priliku da izaberete jezik instalacije. U ovom slučaju to je engleski. Kliknite na jedino dugme koje vidite, NEXT.

Na drugom ekranu XOOPS će vam se obratiti sa sličnim tekstom kao i mi do sada, s tim što će vas upozoriti da neke direktorijume ostavite otvorenim za pisanje, tj. da im date dozvole ako to već nije automatski učinjeno. Ti direktorijumi su:

uploads/
mainfile.php
include/license.php

Dakle, dajte dozvole npr. chmod 777 na Linux-u i odštiklirajte Read-Only na Windowsu.

Sledeće što XOOPS kaže, to je dva direktorijuma izbacite iz htdocs (javnog) direktorijuma, jedan korak nazad. To znači da ako vam je putanja do XOOPS-a /hosting/websites/321213a/htdocs/, vi ova dva direktorijuma premestite u /hosting/websites/321213a/.

To su direktorijumi xoops_data i xoops_lib.

Pojašnjenje: Da ne biste ostali zbunjeni čemu služi ovaj korak, odgovor je jednostavan. Xoops_data direktorijum sadrži neke osnovne konfiguracije i cache za XOOPS, dok se u xoops_lib direktorijumu nalazi sigurnosni modul. Ovakav način pruža bolju sigurnost vašeg sistema, jer su važni direktorijumi izmešteni iz javnosti, niti im ista može pristupiti. Njihovo ime nije važno, tako da im možete promeniti imena. Mi smo im promenili imena u sajt_lib i sajt_data.

Na sledećem ekranu XOOPS će proveriti da li vaš sistem zadovoljava minimalne uslove za rad. Ako je sve uredu, možete nastaviti instalaciju klikom na NEXT.

Na ekranu broj 4 XOOPS će vas pitati za instalacione putanje. Prvu uglavnom ne treba dirati, jer je to ustvari putanja do vaše XOOPS instalacije.

Druga i treća putanja su putanje do xoops_lib i xoops_data direktorijuma, koje smo mi prekrstili u sajt_lib i sajt_data. Tako da, gde god da ste ih stavili, samo navedite XOOPS do njih i pritisnite NEXT.

Na ekranu broj 5 XOOPS traži da unesete pristupne podatke. To su tip baze, server hostname, username i password. “Use persistant connection?” ne dirajte ako ne znate šta je. Naravno, nakon unesenih podataka, kliknite na NEXT.

Na ekranu broj 6, unesite podatke vezane za bazu.

Ovde je važno ime baze, u našem slučaju “testbaza“. Ako baza ne postoji, XOOPS će je napraviti. Ako je ne može napraviti, napravite je vi u PHPMyAdmin-u i unesite njeno ime ovde.

Ostalo ostavite kako stoji, jer UTF-8 kodna stranica je standard, a prefix se generiše po slučajnom izboru, mada ga možete promeniti ako vam je volja, u šta god. NEXT.

Sledeći ekran je samo informativan i pokazaće vam konfiguraciju i podatke koje ste do sada uneli, a vi kliknite NEXT.

Sada zapravo počinje instalacija i ako su uneti svi podaci kako valja, XOOPS će napraviti bazu i izvestiće vas o tome. NEXT.

Na ekranu broj 9. unesite podatke za administratora. Username, e-mail i password. Sa strane imate i generator šifre, a takođe ćete biti obavešteni o sigurnosti iste. NEXT.

Ako je sve OK, na ekranu br. 10 ćete biti obavešteni o tome, dakle upisi u bazu itd. NEXT.

Ekran koji sledi služi osnovnoj konfiguraciji sajta, dakle njegovo ime, opis itd. Važna stvar je opcija o tome da li želite registraciju novih korisnika. S obzirom da tek podešavate sajt, izaberite ne. Mada je u lokalu svejedno. NEXT.

Sledi ekran sa odabirom teme, naš izbor je “zetagenesis”. NEXT.

Na ekranu broj 13 izaberite module koji želite da budu instalirani. Ako radite na “živom” serveru, obavezno izaberite modul “Protector“. U lokalu on nije bitan.

Druga dva modula su “Private Messaging” koji služi za slanje poruka između članova vašeg sajta i “User Profile” koji služi korisnicima da unesu napredne podatke o sebi, a i vama koji možete u njega uneti solidan broj upita za korisnike. Ako ne planirate da se na vaš sajt loguje iko osim vas, administratora, ili manje grupe ljudi, ova dva modula nisu neophodna. U svakom slučaju možete ih kasnije instalirati.

Takođe, pre instalacije možete u direktorijum modules/ prekopirati neke module po želji i instalacija će vas pitati da li želite da i njih instalirate. NEXT.

Sledeći korak NEXT.

Xoops konstatuje da je uspešno instalirao module, pa idemo NEXT.

Ovo je ujedno i poslednji ekran instalacije. Xoops će vas upozoriti da je u fajl mainfile.php moguće pisanje pa je potrebno skinuti mu dozvole za to, dakle chmod 444 na *nix-u ili štikliranje Read Only na Windows-u.

Takođe, Xoops kaže da bi valjalo izbrisati instalacioni direktorijum install_remove_proizvoljni_broj, pa tako i uradite.

Klikom na NEXT dobijate glavni ekran vašeg sajta, tj. vaš sajt.

Instalacija je gotova, uživajte.

Uroš Nedeljković

U eri CMS-ova Joomla-e, WordPress-a i Drupal-a treba se osvrnuti i na jedan, veoma moćan CMS, Xoops (čita se Zups). Ime je nastalo kao skraćenica od eXtensible Object Oriented Portal System – a sam portal je izveden (fork) iz portala PHPNuke, sada već davne 2004. godine.

Xoops je veoma modularan portal. Da biste lakše shvatili o čemu se radi, moramo prvo istaći neke stvari. Naime, kada preuzmete i instalirate CMS, primetićete više neobičnih stvari, pogotovu ako ste navikli na neki drugi portal, ali najvažnija stvar je da sa samom instalacijom ne dobijete ništa. Ovo je i prednost i mana: prednost – možete sami birati module koji će kreirati vaš sadržaj, mana – ako ste početnik verovatno nećete imati pojma šta raditi dalje.

Instalacija XOOPS-a
Ako ste ikada instalirali neki portal, stvari su vam manje ili više jasne. Povežite bazu i to je to. Međutim, XOOPS zbog sigurnosti važne stvari kao što su keš i modul koji pruža zaštitu od malicioznih napada drži u odvojenim direktorijumima, koji treba da stoje van domašaja javnosti, dakle pre /htdocs ili sličnog direktorijuma. Pri instalaciji videćete direktorijume xoops_lib i xoops_data. Oba izmestite pre instalacije van root-a, a u instalaciji samo navedite putanju do njih.

Kada se instalacija završi, dočekaće vas siromašan ekran. Klikom na ‘administration’ u meniju, ulazite u vaše carstvo kontrole. Ovde nastupa i veoma važan deo, a ako ga shvatite kako treba, shvatićete i kompletnu filozofiju Xoops-a.

Instalacijom se dobija samo jezgro (core) i neki sistemski moduli. Međutim, u prethodnim verzijama su postojali paketi koji su se mogli preuzeti sa sajta i koji su pružali kompletno rešenje za blog, prodavnicu, ličnu prezentaciju itd. To je u suštini bila arhiva u kojoj je, pored jezgra sistema, bilo i određenih modula koji služe određenoj svrsi. Po informacijama kojima raspolažemo, uskoro će se ova praksa vaspostaviti.

Da biste mogli da se igrate sadržajem bilo koje vrste, potrebno je da preuzmete određene module, sa zvaničnog ili nezvaničnog sajta. Nezvanični sajt nudi više informacija o modulima i verzije su svežije.

Instalacija modula
Moduli u Xoops-u su sve i svja. Dakle, ako želite da prikažete neki sadržaj, na primer blog, preuzećete jedan od desetak modula za to. Dobra stvar je u tome što možete imati instalirane sve ove module i tako sadržaj prilagoditi kako god želite. Postoji razlika između modula za statičan i za dinamičan sadržaj.

Naravno, prikaz tekstualnog sadržaja je samo jedna od stvari i modula koji postoje. Tu su takođe i forumi, galerije fotografija i slika uopšte, kontakt forme, igre i razno.

Da biste instalirali modul, potreban vam je FTP pristup serveru. Instalacija je veoma laka, a sastoji se iz dve radnje. Kopiranja modula u direktorijum /modules i njegove instalacije u administratorskom delu System > Modules.

Nakon toga pojaviće vam se opcije za konfigurisanje modula. Princip je isti za svaki modul. Naravno, nije na odmet pročitati uputstvo koje dođe uz modul, ako kojim slučajem postoje neke specifičnosti, kao na primer prepisivanje adresa (URL Rewrite), pa je potrebno dodati koju stavku u vaš .htaccess fajl.

Blokovi
Svaki modul se prikazuje na dva načina. Putem direktnog odlaska na njega npr. sajt.com/modules/news ili putem bloka koji generiše. Blokovima možete menjati pozicije i klonirati ih, kao i birati na kojim stranicama će se prikazivati i koje će grupe korisnika ih videti, a koji ne.

Takođe postoje i proizvoljni blokovi (custom blocks) za koji važe ista pravila i u njih možete staviti bilo koji tekst, HTML ili PHP kod.

Teme
Treba napraviti razliku između tema (themes) i šablona (templates).

Teme u XOOPS-u su izgled stranice u smislu njene definicije. Dakle, header, leva kolona, središnji deo, desna kolona, footer. Sastoji se iz HTML-a i Smarty varijabli. Za prvo vam je jasno šta je, dok za drugo treba reći da je to sistem šablona (template system) koji je srž XOOPS-a i omogućava prikaz maltene svega od sadržaja što se generiše, kao i keširanje.

Ako npr. želite da prikažete naslov stranice, unećete <{$xoops_pagetitle}>. Sadržaj bloka ćete prikazati sa <{$block.content}> itd. Sistem je veoma lagan za korišćenje i isključuje bakćanje po PHP-u bez preke potrebe.

Napomena: Ako pravite svoju temu, nemojte biti zavarani imenima kao što su leva kolona, desni blok itd. Vašu temu možete napraviti da izgleda kako god želite, pa da se npr. desna kolona prikazuje kao footer, a levu kolonu kao header. Ako ne definišete blokove koji će se prikazivati na određenom delu, tj. ako taj deo bude prazan, nijedan blok se neće ni prikazati. Možete i da ne predvidite neki od ovih elemenata uopšte.

Šabloni (Templates)
Templejtima definišete kako će konkretno izgledati neki blok ili modul. Dakle gde će stajati naslov, gde tekst, gde slika itd. Takođe se sastoji od HTML-a i Smarty varijabli.

Važne napomene:

• Da biste pravili svoj sistem šablona, potrebno je prvo da klonirate postojeći (default) i date mu neko svoje ime, nebitno je kako glasi. Svaki modul ima svoj šablon/template, a u njemu je sadržaj podeljen na modul konkretno i blokove koje generiše. U većini slučajeva nećete imati potrebe da pravite svoj template, pogotovu ako ste početnik ili želite samo da isprobate platformu.
• PHP kod se u temu i template unosi varijablama {php} kod {/php}, ali sumnjamo da ćete u početku imati potrebe za unošenjem bilo kakvog PHP koda.
• Ako ste menjali temu ili template, da biste videli izmene potrebno je da isključite sistem keširanja. Dakle, to ćete postići tako što ćete u sistemskom modulu izabrati Preferences i u njemu Check template for modifications? staviti na Yes. Kada završite sa radom na temama i templejtima, ovu opciju stavite na No i vaš sajt će se drastično ubrzati.

Instalacija tema
Teme se instaliraju lako kao i moduli. Sve što trebate da uradite je da ih prekopirate u direktorijum themes/, a nakon toga u sistemskom modulu da izaberete teme koje se mogu birati (ako dozvolite tu opciju) ili automatski stavite da je neka tema default.

Ovo je ukratko sve što trebate znati o XOOPS portalu za početak. U sledećim nastavcima ćemo se baviti konkretnijim stvarima i opisima pojedinih modula. Treba uzeti u obzir da su neki moduli veoma moćni i da kompletno mogu zameniti neki drugi CMS.

Prednosti XOOPS-a
Portal je veoma lagan za rad i veoma je logičan, što nije slučaj sa nekim drugim sistemima. Kada se jednom naviknete na njega, teško je odvići se.

Broj modula je veoma velik i njihova raznovrsnost je ogromna. Xoops-ova modularnost je ono što ga izdvaja od drugih portala, jer kada instalirate modul, nemate potrebe dalje ga prilagođavati.

Lagan je za početnike, jer ako odaberete određenu temu i određene module, nakon instalacije istih nemate potrebe bilo šta dirati u kodu, a vaše znanje PHP-a može biti ravno nuli.

Mane XOOPS-a
Iako svake dve nedelje do mesec dana izlazi nova verzija sa novim mogućnostima, neke mane za sada ostaju, ali nisu nerešive.

Iako se XOOPS u praksi se dokazao kao veoma SEO friendly, problem je sa SEF (search engine friendly) linkovima, tj. URL-ovima. Njih je moguće prepisati da izgledaju ‘ljudski’, ali to zavisi od modula do modula, jer sistemsko rešenje za sada ne postoji (do verzije 3.0 koja je planirana za ovu godinu). Ipak, najvažniji moduli sadrže ovu opciju.

Sistem komentara je dobar, ali najveća mana mu je ta što anonimni komentari ostaju – anonimni. Dakle, ako ste dozvolili anonimusima da komentarišu nešto, oni nemaju mogućnost da unesu svoje proizvoljno ime (i ostale podatke), već će se njihov komentar pojaviti pod imenom anonimus, gost ili kako ste već to definisali u sistemu. Da biste imali lep sistem komentara, dakle sa imenom i ostalim (neograničenim) podacima, potrebna je registracija korisnika.

Preuzmite XOOPS
Zvanični sajt XOOPS portala je Xoops.org, a na njemu možete preuzeti:

• Xoops 2.4.4 – stabilna verzija
• Xoops 2.4.5 beta – beta verzija
• Xoops 2.5 – alfa verzija sa mnogobrojnim rešenjima i poboljšanjima (ne preporučuje se za sajtove koji rade, već samo za testiranje)

Moduli

• Zvanični sajt Xoops.org
• Nezvanični sajt

Podrška

• Podrška se nalazi na forumu zvaničnog sajta.
• Srpska podrška (za sada) ne postoji.

Uroš Nedeljković

Kao što smo već objasnili u prvom delu vodiča za Google Analytics, ovaj besplatan servis koji nudi Google vam omogućava detaljan uvid u kretanje posetilaca na Vašem sajtu. Nakon što se ulogujete na Google Analytics nalog i otvorite stranicu sa izveštajima o vašem sajtu dobijate Dashboard, panel koji sadrži nekoliko osnovnih grafikona koji osim broja posetilaca sadrže i svu prateću statistiku koja obuhvata i podatke o najposećenijim stranicama i najčitanijim tekstovima na sajtu, vreme zadržavanja posetilaca, načine na koje posetioci dolaze na sajt i ostale veoma detaljne statističke podatke.

Dashboard se sastoji iz nekoliko odeljaka.

1. Analytics Settings - Sadrži listing svih web sajtova koje pratite sa Google Analytics. Odavde možete pregledati izveštaj za sajt, preko linka View report, ili preko linka Edit doći na stranicu Prifile Settings, gde možete videti svoj kod za praćenje i kreirati tzv. “Goals and Funnels”, o čemu ćemo više govoriti u sledećem članku.

2. Linijski grafikon – Ovde možete izabrati vremenski opseg između dva datuma za statistiku Vašeg sajta. Ako podešavate Google Analytics za nov sajt koji je tek pokrenut i još uvek je u fazi razvoja, verovatno nećete videti hiljade pregledanih stranica u vašoj statistici. Pomoću opcije Export, možete sačuvati podatke iz izveštaja kao PDF ili XML dokument. Ako izaberete PDF format, dokument će biti sačuvan na desktopu Vašeg računara.

3. Dodavanje ili brisanje modula izveštaja na Vašoj kontrolnoj tabli. U gornjoj liniji većine izveštaja (Visitors, Traffic Sources, Content…) postoji dugme “Add to dashboard” pomoću kog možete dodati na Dashboard izveštaj koji želite da pratite.  Da biste obrisali jednu stavku jednostavno kliknite na  ’X’ u gornjem desnom uglu svakog modula.

4. Analytics Intelligence - Predstavlja novu funkciju Google Analytics. Algoritam omogućava praćenje i automatsko obaveštavanje o značajnim promenama u podacima o sajtu, na dnevnom, nedeljnom i mesečnom nivou, kao i podešavanje alarma koji su prilagođeni specifičnim potrebama sajta. Više o ovoj funkciji možete videti na YouTube video prezentaciji Analytics Intelligence & Custom Alerts.

5. Visitors - Ovaj odeljak pruža informacije o posetiocima sajta, vrsti  posetilaca, kao i informacijama o tome na koji način su pregledali Vaš sajt. Između ostalih informacija ovaj odeljak sadrži tzv. Tehnički profil u kome možete saznati koji web pretraživač najčešće koriste posetioci Vašeg sajta, kao i brzinu Interneta. Nekoliko osnovnih pojmova koji će vam olakšati razumevanje izveštaja o posetiocima sajta su:

Hits – Pre pojave Google Analytics webmasteri su koristi termin – “Hit“ (ili bukvalno prevedeno – pogodak). Ali je taj termin smatra zastarelim. Kada bi korisnik želeo da pregleda jednu web stranicu na kojoj se nalazi 10 slika, stari sistemi za statistiku web stranica bi to protumačili kao  10 pogodaka. Ovaj termin je zamenjen sa tačnijim  terminima kao što su „broj pregleda stranica” i „posete“ koje možete pratiti u statistici Vašeg sajta u odeljku – Site Usage.

Visits vs. Page Views

Visits – Predstavlja ukupan broj poseta Vašem sajtu. Poseta se računa svaki put kada korisnik web sajta zatraži jednu ili više stranica sa web servera.  Ako je korisnik neaktivan određen vremenski period (obično 20 minuta), kada se vrati to se računa kao nova poseta.

Page Views – Predstavlja broj uspešno učitanih dokumenata sa Vašeg web sajta, koji se mogu smatrati stranicom, od strane jednog posetioca. To obično uključuje dokumenta sa ekstenzijom .txt, .asp, .php itd. Stranice generisane kao rezultat greške (npr. 404 – Page Not Found Error) se ne računaju u statistici posećenih stranica.

Ukratko, ako posetilac pregleda 15 stranica pre nego sto napusti Vaš sajt, to će se računati kao 15 pregleda stranica (Page Views), ali će biti zabeleženo kao 1 poseta (1 Visit)

Bounce Rate – Prema standardima analitičkih programa poseta se računa samo onda kada  posetilac pregleda više od jedne stranice na sajtu. Ako posetilac koji dođe na sajt pregleda samo jednu stranicu pre nego što napusti sajt, to se računa kao „bounce“.

6. Traffic Sources – Prikazuje koliko različitih offline i online izvora šalje saobraćaj ka vašem sajtu (direktne posete, baneri i linkovi sa drugih sajtova, pretraživači). Sa postojećih grafikona možete pratiti kako najčešće posetioci dolaze na vaš sajt i proceniti  buduće trendove.

7. Content - Prati popularnost svake od najposećenijih stranica na sajtu.  Svi ovi izveštaji su o stranicama na Vašem sajtu i popularnosti određenjih sadržaja na njima. Use the data here to find time on page, landing and exit page information, and a navigation summary for pages.

8. Goals - Ako ste postavili ciljeve za svoj Analytics nalog, onda bi trebali da podatke iz tih izveštaja.

9. Custom Reporting – Možete napraviti izveštaj prilagođeni Vašim potrebama koristeći parametre koje želite da vidite.

Za korisnike WordPress-a postoji opcija dodavanja plugin-a Google Analytics Dashboard koji vam omogućava da vidite podatke iz Google Analytics u okviru Vašeg WordPress Dashboard. Ovaj dodatak međutim ne obezbeđuje tracking kod za Google Analytics. Za to ćete morati da koristite plugin kao što je  Google Analytics for WordPress.  Ovaj plugin automatski prati i segmentira sve linkove iz postova, komentara, blogova i linkove za download.

Google Analytics je verovatno najpopularniji program za praćenje i analizu posećenosti, koji je trenutno u upotrebi na oko 40% od 10.000 najpopularnijuh web sajtova. Preko Google Analytics možete pratiti na koji način su posetioci pronašli Vaš sajt i posećenost pojedinačnih stranica sajta. Podaci koje pruža ovakva statistika mogu se koristiti u cilju povećanja broja posetilaca i poboljšanja kvaliteta njihovih poseta.

Pre korišćenja Google Analytics potrebno je:

- Kreirati Google nalog (ili možete koristiti postojeći)
- Podesiti Google Analytics nalog
- Uskladiti web stranicu sa W3C standardima

Prednosti web stranice usklađene sa W3C standardima

- Bolje rangiranje u rezultatima pretraga

- Više korisnika koji mogu videti Vaš sajt

- Kraće vreme učitavanja stranice i smanjeno opterećenje protoka na sajtu

- Kompatibilnost sa novijim pretraživačima

- Osobe sa invaliditetom mogu koristiti Vaš sajt

- Web stranici se može pristupiti sa različitih uređaja, uključujući mobilne telefone i PDA uređaje

- Lakše održavanje i nadogradnja sajta

Kako mogu videti statistiku mog sajta?

1. Ulogujte se na vaš Google nalog da biste na sajtu Google Analytics mogli da pristupite podešavanjima

2. Nakon što kliknete na dugme Sign up biće potrebno da unesete neke osnovne podatke kao što su URL sajta za koji želite da pratite statistiku, kontakt informacije i sl.

3. Kada kreirate Google Analytics nalog potrebno je da dodate Tracking Code u HTML kod vašeg sajta i prva statistika će biti dostupna već nakon 24 sata.

Dodavanje korisnika

Ako je potrebno da dozvolite još nekome pristup statistici vašeg sajta to možete jednostavno postići dodavanjem novih korisnika u vašem Google Analytics nalogu. Pri dnu Overview stranice nalazi se User Manager u okviru kog dodajete e-mail adresu i prava pristupa – View Reports Only ako želite da dozvolite samo pregledanje statističkih podataka za sajt, ili Account Administrator ako želite da dozvolite potpun pristup vašem nalogu.

Bilo da imate jedan ili više domena za koje pratite statistiku, biće potrebno da ih selektujete u okviru polja Available Website Profiles i dodate ih u Selected Website Profiles. Selektujte sve domene za koje želite da dozvolite pristup novom korisniku i sačuvajte promene.

Kreiranje filtera

Filteri su način segmentacije ili manipulacije podacima koji dolaze u vaš profil. Filteri mogu biti podešeni da obavljaju više zadataka, kao što je isključivanje određene IP adrese iz ukupne statistike poseta ili prikazivanje podataka samo za određeni poddomen.

Isključivanje internog  saobraćaja iz ukupne statistike poseta

Ne želite da u ukupnoj statistici posećenosti sajta vidite koliko puta ste posetili sopstveni sajt, jer to ne bi bila stvarna slika koliko je posetilaca vaša web stranica zaista privukla. Zbog toga je veoma preporučljivo postavljanje filtera koji isključuje sav interni saobraćaj.
Filter “Exclude Internal Traffic” možete dodati preko opcije Edit za podešavanje vašeg profila. Ako već imate filter koji isključuje interni saobraćaj, onda možete izabrati opciju Apply Existing Filter To Profile. Ako nemate postojeći filter koji isključuje proveru internog saobraćaja ostavite već izabranu opciju Add New Filter To Profile. Popunite polja u odeljku Enter Filter Information i upišite vašu IP adresu:

Dodatni saveti

Nemojte dodavati Google Analytics Tracking Code u HTML kod vašeg sajta sve dok ne završite sa kreiranjem profila.
Nakon što ste dodali tracking Code, Google Analytics će početi da popunjava svoje izveštaje podacima o posetama vašem sajtu. Ako podešavanja profila nisu ispravna, statistika sajta će sadržati netačne podatke. Izdvojite vreme da proverite da li su sve postavke profila ispravne pre nego što dodate kod za praćenje. Na ovaj način, možete obezbediti da svi podaci u izveštajima budu tačni od početka.

Iskoristite funkciju Goals and Funnels.

Definišite ciljne tačke vašeg sajta. Ciljevi vam omogućavaju da lako vidite koliko je posetilaca stiglo do određene stranice i shvatite gde posetioci gube interes za sadržaj vašeg sajta. Možete koristiti ove informacije kako bi poboljšali sadržaj i dizajna sajta. Detaljnije o podešavanjima Goals and Funnels funkcije u 3. delu vodiča za Google Analytics.

Nakon što smo prošli osnove wordpress optimizacije na redu je priprema wordpress teme koju smo prethodno izabrali za naš blog ili sajt.

WordPress teme predstavljaju način da date “izgled” svom blogu. Pre uvođenja tema i templejt sistema wordpress je za kreiranje layout-a strane koristio jedinstveni index.php fajl. Sa uvođenjem posebnog modularnog sistema za prikaz sadržaja wordpress je od jednostavnog sistema za blogovanje dobio jednu od glavnih odlika CMS sistema – razdvajanje sadržaja od prikaza.

Današnje wordpress teme se toliko međusobno razlikuju da mnoge ni nemaju ništa što bi potsećalo na staru blogoliku strukturu, pa wordpress tako pored blogova i sajtova sa vestima, pokreće i mnoge korporativne i portal sajtove.

Raznolikost ovih tema međutim znatno može otežati WordPress SEO.

Optimizacija wordpress teme

Prilikom optimizacije layouta treba obratiti pažnju da različite teme poseduju različite ugrađene opcije. Zavisno od teme koju izaberete neke od ovih procedura možete preskočiti, jer će u okviru teme već biti urađene, a možete ih i izbaciti iz teme jer će praviti dupliranje sadržaja ili tagova koje želimo da dobijemo. Nije redak slučaj da tema podpada pod loše prakse SEO optimizacije pa da su izmene neophodne.

1. Breadcrumbs

Breadcrumbs ili mrvice hleba (omaž Ivici i Marici) su prvo što želimo da imamo u okviru svoje WP teme. Možete ih dodati preko breadcrumbs plugin-a, a svrha im je da na Vašim stranama kreiraju putanju od root direktorijuma bloga do strane na kojoj se nalazite. Ovo će olakšati snalaženje i pretraživačima i posetiocima. Izmene se mogu izvršiti i/ili preko page.php i single.php strana (za statične strane, odnosno za postove).

primer: Navigation: Weblog / Blog article: WordPress SEO – 2. optimizacija wp teme

2. Heading tagovi

Naslovi predstavljaju jedan od najbitnijih elemenata optimizacije. WordPress sa njima obično odlično manipuliše, ali pazite da na stranama uvek imate jedan h1 tag na početnoj strani, a da na ostalim stranama ne bi trebali da idete niže od h3 taga zavisno od situacije.

Ukoliko iz nekog razloga ne prikazujete h1 tag sa prve strane na ostalim stranama bloga možete naslovima postova i strana dati h1 svojstvo editovanjem spomenutih single.php i page.php i tako im povećati značaj.

H1 tag koristite isključivo jednom po strani da bi istakli bitan naslov.

Poželjno je da i što više CSS i Java scripti koje koristite stavite u poseban fajl, po mogućstvu gzipovan, kako bi klijentski browser i search engine botovi morali da preuzmu njihov sadržaj samo jednom. Ove fajlove je poželjno keširati zbog brzine.

Za više saveta na ovu temu možete pročitati uputstvo o dobrim HTML praksama za SEO.

3. Brzina učitavanja strane

Brzina učitavanja web strane je dobra i za SEO i za korisnike. O ubrzavanju i optimizaciji wordpressa smo već pisali.

4. Sidebar i linkovi

Ukoliko imate potrebu da linkujete veliki broj tematski nevezanih prijatelja / projekata, otvaranje posebne strane za linkove predstavlja bolji izbor od držanja velikog broja nerelevantnih linkova na prvoj strani. Gubitak nećete osetiti jer Google slabo vrednuje sitewide linkove. Linkovanje tematski sličnih sajtova je u svakom slučajnu poželjno.

5. Dupli sadržaji

Kada završite sve navedeno ostaje Vam poslednji i možda najzamršeniji deo. Potraga za duplim sadržajem i uklanjanje istog sa Vašeg sajta. Potraga je često u potpunosti različita od templejta, slično kao i sa dupliranim meta tagovima iz prvog posta na temu WP SEO optimizacije, s tim da su se meta tagovi uvek morali nalaziti u header.php fajlu dok ovde to ne mora biti slučaj.

Pomoću robots.txt fajla ili robots meta plugin-a možete zabraniti praćenje ili indeksiranje pojedinih delova sajta, pa i celog sajta zato budite pažljivi.

Želite da iz indeksiranja izbacite login, admin i search strane. Možete izbaciti i neke od strana vezanih za arhivu, a po nekim savetima i celu arhivu. Potpuno izbacivanje arhive može zavisiti od efekta koji želite da postignete pa su mišljenja ovde podeljena.

Glavni razlog gašenja arhiva je što postoji mogućnost da će ih neko linkovati i na taj način Vam napraviti negativan SEO efekat zbog duplog sadržaja.

Takođe izbacite ili uradite nofollow na postojeće nebitne linkove. Primer ovakvog linka je login link na prvoj strani, naročito ukoliko sami postujete na blogu i ugasili ste registraciju korisnika.

Poslednji potez u izmenama ovog tipa vezanim za layout Vašeg sajta je kreiranje mape sajta koja će pomoći botu da pristupi svakom delu sajta sa jedinstvene lokacije. Odličan plugin sa ovom svrhom je Table of contents creator plugin koji će umesto Vas kreirati i održavati ažurnom mapu Vašeg sajta.

—

Alviblog koristi sve tehnike WordPress SEO optimizacije koje navodimo u našim postovima.