• Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

Referrer w linkach zewnętrznych

Opublikowane 29 czerwca 2010. Autor: Kamil Brenk. Wizyt: 1 494.

Kategorie: JavaScript
Tematyka: JavaScript, praktyczne skrypty, programowanie strukturalne, Protokół HTTP

cze 29

Aby strona się wybiła w sieci musi być dobrze zareklamowana, często polecana przez innych, linkowana z zewnętrznych źródeł, itp.

W celach analitycznych napisałem prosty skrypt JavaScript, który pełni rolę „powiadamiacza” o tym, skąd dany gość trafił na zewnętrzną stronę.

Zadaniem kodu jest sprawdzenie wszystkich linków na Twojej stronie – jeśli któryś z linków w adresie nie posiada znaku hash (#) i odnosi się do zewnętrznego źródła to zostaje mu przypisany hash z wartością adresu odsyłającego (czyli dołączony zostaje adres Twojej strony).

Całość wygląda banalnie prosto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// pobierz wszystkie linki
var links = document.getElementsByTagName('a');
   
// pętla po linkach
for (var i = 0; i < links.length; i++) {
   
    var $href = links[i].getAttribute('href');
    var $host = window.location.hostname;
   
    // wyszukaj linki zewnętrzne / niezawierające hash'a w adresie
    if (($href.search($host) == -1) && ($href.search('#') == -1)) {
       
        // dodaj referrer - nazwę Twojego hosta
        links[i].setAttribute('href', $href + '#referrer=' + $host);
           
    }
   
}

Dzięki temu prostemu kodowi uzyskujemy następujący efekt:

link zewnętrzny:
Testy zawodowe – psychologia pracy
adres: http://testy-zawodowe.pl/#referrer=blog.kamilbrenk.pl
(dodano: #referrer=blog.kamilbrenk.pl)

link wewnętrzny:
Optymalizacja zapytań SQL
adres: http://blog.kamilbrenk.pl/optymalizacja-zapytan-sql/
(bez zmian)

Jak więc widać, nic trudnego – małe i proste, a cieszy.

Kilka słów wyjaśnień

Zgodnie z protokołem HTTP do każdego żądania zostaje dołączony nagłówek Referer (o ile to możliwe). Oznacza to tyle, że w logach serwera, do którego trafia żądanie jest informacja o odsyłającym (co widać również w statystykach).

Mimo to wyżej napisany skrypt może pomóc w kilku innych przypadkach, np. link został skopiowany przez znajomego i w żądaniu HTTP nie będzie nagłówka Referer.

Inny bloger (czy twórca strony do której odsyłamy) zapewne ucieszy się widząc linki przychodzące spod Twojego adresu. Być może nawet się odwdzięczy, zamieszczając link do Twojej strony na swojej :-) I tyle w tej notce, może komuś się przyda.

Komentarze (4)

  1. motorola 3 lipca 2010

    ale jaka jest wartosc dodana, tego ze bede umieszczal # przed linkiem zewnetrznym? nie rozumiem

  2. Kamil Brenk 3 lipca 2010

    @motorola: do adresu (href) każdego zewnętrznego odsyłacza jest dodana następująca wartość:
    #referrer=http://twoja-strona.pl/

    Dzięki temu autor strony, do której linkujesz ze swojej strony sprawdzając logi lub statystyki zorientuje się, że do niego linkujesz. Być może w ten sposób postanowi Ci się odwdzięczyć :-)

  3. Michal Wachowski 3 lipca 2010

    Kilka uwag na temat #referrer…
    – praktycznie całą sprawę ‚skąd Litwini wracają’ załatwia google analytics,
    – treści po # nie może być obrabiana przez php, a szkoda…
    – co w sytuacji gdy link już zawiera #?

    Dla przykładu, dość często używam # do oznaczania która zakładka jest otwarta (no… w takich tych… zakładkowanych divach… nie umiem tego wytłumaczyć)

  4. Kamil Brenk 3 lipca 2010

    – praktycznie całą sprawę ’skąd Litwini wracają’ załatwia google analytics,

    Dokładnie. Zazwyczaj na docelowej stronie jest nagłówek HTTP_Referer, więc problemu nie ma. Ale czasem ktoś gdzieś skopiuje nasz link jako tekst (nie usuwając hasha) i mamy dodatkowe info o wizytach do naszej strony :-)

    – co w sytuacji gdy link już zawiera #?

    W moim przykładzie po prostu nie nadpisuję tego hasha, ignoruję taki link. Nie wiem czy to dobre rozwiązanie, jednak lepiej tam niczego nie zmieniać (zwłaszcza, że często informacja tam zawarta odsyła do danego ID elementu…)

    Dla przykładu, dość często używam # do oznaczania która zakładka jest otwarta (no… w takich tych… zakładkowanych divach… nie umiem tego wytłumaczyć)

    Rozumiem o co chodzi, też tak czasem robię w zakładkach (tablist czy jakoś tak). Jednak zamieszczając link na swojej stronie rzadko kiedy odwołuję się do takiej zakładki :-)



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w modułach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassaną przez file_get_content?
    • ERMLAB: Od czegoś trzeba zacząć :) Wiele osób właśnie stawia na...
    • david: co nalezy wkleić na stronę aby plik ze stylami był ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyłem prostą stronkę w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Wysyłanie wiadomości SMS w PHP
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • Miłość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech Soczyński
    • Michał Wachowski
    • Tomasz Kowalczyk
    • Filip Górczyński
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Przykład: Gramatyka w PHP
  • Przykład: Kompresja CSS
  • Przykład: Kompresja JavaScript
  • Przykład: Skracanie linków
  • Przykład: Wykrywanie serwera HTTP
  • Przykład: Własna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧