Redirect Url Berdasarkan Sumber Trafik Referer Menggunakan Javascript

Redirect Url adalah pengalihan halaman web dari satu url ke url lain. Teknik Redirect Url ini bisa kita lakukan di sisi front end dan back-end. Untuk sisi backend, biasanya pengalihan url dilakukan jika respon header url memberikan nilai 201, 301, 302, 303, 307, dan 308. Target tujuan redirect diberikan oleh nilai Location pada respon header tersebut. Sedangkan redirect url pada sisi front-end, kita bisa mengunakan 2 cara yaitu menggunakan javascript dan meta html.

Untuk pembahasan kali ini, saya akan fokus membahas teknik redirect url menggunakan javascript. Jadi silahkan simak pembahasan saya berikut ini.

Apa itu referer ?

Referer adalah sumber rujukan url atau sumber trafik situs web yang mengarahkan pengguna ke situs web kedua.

Sebagai contoh, ketika kita melakukan klik link artikel di halaman pencarian google, maka browser akan menyimpan riwayat sumber trafik yang disebut dengan referer. Setelah kita landing di halaman web artikel tersebut, maka nilai referer pada web tersebut adalah url web pertama tempat kita melakukan klik yaitu google. Sampai disini paham ya.

Cara Redirect Url Menggunakan Javascript

Redirect Url bisa kita lakukan menggunakan sebuah kode javascript berikut ini.

window.location.href="https://www.facebook.com";

Jika kita menjalankan code tersebut di element script html, maka halaman web kita akan di direct menuju url facebook.com.

Setelah kamu memahami konsep redirect ini, maka kita akan masuk ke topik pembahasan sesuai judul artikel ini yaitu Redirect Url Berdasarkan Sumber Trafik Referer.

Alur Konsep Redirect

Pada alur redirect ini, saya ingin melakukan redirect sebagai berikut :

1. Pengunjung mula-mula mencari sebuah artikel tentang javascript di halaman pencarian google search.
2. Setelah itu pengunjung menemukan artikel kita di pencarian google tersebut.
3. Lalu pengunjung melakukan klik link artikel kita di halaman pencarian google tersebut dan landing di halaman web kita.
4. Script akan melakukan seleksi apakah sumber referer berasal dari google.com.
5. Jika sumber referer adalah google.com, maka pengunjung akan di alihkan menuju link facebook.com.
6. Jika sumber referer bukan berasal dari google.com, maka tidak dilakukan redirect.

Setelah kamu memahami konsep alur redirect tersebut, maka saya akan memberikan Script Redirect Url Berdasarkan Sumber Trafik Referer.

Script Redirect Url Berdasarkan Sumber Trafik Referer

Berikut ini Script Redirect Url Berdasarkan Sumber Trafik Referer yang telah saya desain.

<script type='text/javascript'>
//<![CDATA[
//--- setting ---------
var refererWeb=["www.google.com"];
var directTo="https://www.facebook.com";


//--- main script ---------
if(document.referrer){
  var aaRef = document.referrer;
  refererWeb.forEach(function(a){
   if(aaRef.indexOf(a)>=0){
	window.location.href=directTo;
   };
  });
};
//]]>
</script>

Keterangan :

• Code refererWeb adalah url sumber referer. Silahkan ganti dengan sumber referer lain.
• Code directTo adalah target pengalihan url yang kita inginkan.

Script di atas adalah redirect url yang hanya jika sumber referer adalah dari www.google.com. 

Nah bagaimana jika kita ingin sumber referernya ada banyak ? Katakanla saya ingin melakukan redirect jika referer-nya bersumber dari url bing.com, yahoo.com, yandex.com, pinterest.com, Dll.

Untuk melakukan redirect multi referer ini, kamu bisa menggunakan code script berikut ini. 

<script type='text/javascript'>
//<![CDATA[
//--- setting ---------
var refererWeb=[
  "www.google.com",
  "www.bing.com",
  "yandex.com",
  "yahoo.com",
  ".pinterest."
];
var directTo="https://www.facebook.com";


//--- main script ---------
if(document.referrer){
  var aaRef = document.referrer;
  refererWeb.forEach(function(a){
   if(aaRef.indexOf(a)>=0){
	window.location.href=directTo;
   };
  });
};
//]]>
</script>

Keterangan :

Perhatikan Code yang saya beri warna hijau. Silahkan tambahkan sumber referer yang kamu inginkan. Pastikan nilai referer yang kamu masukkan di apit oleh tanda petik dua dan di akhiri dengan tanda koma.

Jika kamu ada kendala saat menggunakan script ini, silahkan tanya di kolom komentar di bawah. Semoga artikel ini bermanfaat.