• Strona główna
  • Curriculum Vitae
  • O mnie
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

Referrer w linkach zewnętrznych

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

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.

Podobne wpisy

  • Powrót do przeszłości
  • Kompresja JavaScript
  • Boilerplate 2.0
  • Kalkulator liczb Wolframa
  • HTML5: Atrybut download

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 :-)



Dodaj komentarz

XHTML: Możesz użyć następujących tagów
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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
    • Gramatyka w HTML i CSS
    • PHP kontra Microsoft Office, part I
    • Cross-Domain JavaScript: CORS
    • Wysyłanie wiadomości SMS w PHP
    • Boilerplate 2.0
    • Własne selektory w jQuery
    • Kamil Brenk: @Michał:1) jak już otrzymam dyplom to zrobię serię o...
    • Michal Wachowski: Po pierwsze - tyle czekania i tylko to? A bu! :) Po drugie -...
    • Kamil Brenk: @CapaciousCore: języki kompilowane są szybsze niż...
    • CapaciousCore: @Kamil Brenk wiem, że komentarze i post nie są uber świeże....
    • Kamil Brenk: @CapaciousCore: post i komentarze napisane ponad rok temu;...
    • CapaciousCore: Przebrnąłem przez te wszystkie komentarze i mam trochę...
    • Kamil Brenk: @arhiman: dzięki za komentarz :)A to dziwne co piszesz, bo...
    • Przyszłość PHP
    • Niestandardowe czcionki na stronie
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • Projekt aplikacji po stronie klienta
    • Własny mechanizm Feed
    • jQuery.extends dla PHP
  • 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
    • JavaScript po polsku | Code42
  • Archiwum
    • Luty 2012
    • Listopad 2011
    • Październik 2011
    • Wrzesień 2011
    • Sierpień 2011
    • Lipiec 2011
    • Maj 2011
    • Kwiecień 2011
    • Marzec 2011
    • Luty 2011
    • Styczeń 2011
    • Grudzień 2010
    • Listopad 2010
    • Październik 2010
    • Wrzesień 2010
    • Sierpień 2010
    • Lipiec 2010
    • Czerwiec 2010
    • Maj 2010
    • Kwiecień 2010
    • Marzec 2010
    • Luty 2010
    • Styczeń 2010
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

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

Do góry ∧